Character doesn't move to the correct destination/wrong angle on mouse click - html canvas

Question

EDIT: SOLVED

I'm making a game in which the character moves by right-clicking. The character is supposed to slowly move/walk (not teleport) to the destination you set by right-clicking on the canvas. The problem is I used some math to determine the angle the character should be heading towards and also wrote a function that draws a circle directly on the destination (attempting to debug). The thing is, I click on a position, the destination circle is displayed in another position and the character is walking towards another 3d position. I'm not experienced enough and I have no idea what's causing this. The math I used were pretty much copy-pasted because I don't really understand how they work so thats a problem too.

The problem is pretty much this image https://i.stack.imgur.com/SBNK6.jpg

Edit: And this image is what im trying to accomplish https://i.stack.imgur.com/hdkiJ.jpg

        //VARIABLES_________________________________
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var WIDTH = 640;
        var HEIGHT = 360;
        var CANVAS_WIDTH = 640;
        var CANVAS_HEIGHT = 360;
        var renderList = [];

        var selfX = 250;
        var selfY = 100
        var frameX = 0;
        var playerSpdX = 0;
        var playerSpdY = 0;
        var drawDest = false;
        var destX;
        var destY;

        var Img = {};
        Img.player = new Image();
        Img.player.src = "Human_walk_spritesheet.png";
        Img.map = new Image();
        Img.map.src = "maptest.png";
        Img.bullet = new Image();
        Img.bullet.src = "bullet.png";


        renderList.push({img: Img.player, spdX: playerSpdX, spdY: playerSpdY, currX: selfX, currY: selfY});

        //CODE______________________________________
        function render(){
            ctx.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT);

            ctx.drawImage(Img.map, 0, 0);

            for(i in renderList){
                var renderObject = renderList[i];


                renderObject.currX += playerSpdX;
                renderObject.currY += playerSpdY;

                selfX = renderObject.currX;
                selfY = renderObject.currY;

                ctx.drawImage(renderObject.img, frameX, 0, 120, 218, selfX, selfY, renderObject.img.width/31/8, renderObject.img.height/8);
            }
            if(drawDest)
            ctx.drawImage(Img.bullet, destX, destY);

            updateAnimation();
        }

        setInterval(render, 100);


        document.onmousedown = function click(event){
            if(event.button == 2){//right click
                clickX = event.clientX;
                clickY = event.clientY;

                clickX -= selfX;
                clickY -= selfY;

                aimAngle = Math.atan2(clickY, clickX) / Math.PI * 180;
                var spdX = Math.cos(aimAngle/180*Math.PI)*10;
                var spdY = Math.sin(aimAngle/180*Math.PI)*10;
                setPlayerSpeed(spdX, spdY);
                drawDestinationDot(clickX, clickY);
            }
        }



        document.oncontextmenu = function(mouse){
            mouse.preventDefault();
        }


        function setPlayerSpeed(spdX, spdY){
            playerSpdX = spdX;
            playerSpdY = spdY;
        }

        function drawDestinationDot(x, y){
            drawDest = true;
            destX = x;
            destY = y;
        }

you should try phaser. Otherwise you should check this to get the position of the click on the canvas element : https://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element/18053642#18053642 — Loïc, Sep 25 '19 at 21:26
Hey, thanks for taking the time. I actually know how to get the click position on the canvas (i already used it in my code above) my problem is that for some reason I can't get my character to move/walk there without any problems. Edit: also i want to use pure javascript. Thats why i haven't gone to phaser for example. — Nick, Sep 25 '19 at 21:35
when you click somewhere, the destination "drawDest" isn't drawn where you click, so I believe you don't get the correct coordinates... clientX and clientY isn't what you need. check the link. — Loïc, Sep 25 '19 at 23:02
Even after using the code in your link the problem remains. The only thing that changed is that if i set the destX,Y pointer to appear on the coordinates i get with the code you linked, the destination pointer actually appears in the same line my character is following but is still way off from where i clicked. I set the destX,Y pointer to appear on the spdX,Y coordinates (where my character should go) and it appears that the issue is that the center of the angle my code is calculating is the position 0,0 of the canvas when i want the center to be on selfX,Y (The character's position). — Nick, Sep 26 '19 at 09:25
Hey Loic just an update if you are interested in what the issue was, the problem is solved (explanation in my answer below) and thanks again for your time. :) — Nick, Sep 26 '19 at 18:37

score 1 · Answer 1 · answered Sep 26 '19 at 18:26

So after spending more than 3 entire days before and after my post combined, I finally found what the problem is. It's my fault in part that I didn't post all the code but as stack overflow suggests I tried to only post the relevant code to not confuse people who would be trying to help me and I didn't think this part I removed was relevant but it was. I'm pretty much a newbie. So the entire problem was the canvas resizing which I didn't pay any attention to. I replicated my code and just used simple rectangles instead of images and it worked perfectly because I also forgot to add the canvas resizing. That's it:

resizeCanvas();
        function resizeCanvas(){
            CANVAS_WIDTH = window.innerWidth - 4;
            CANVAS_HEIGHT = window.innerHeight - 4;

            let ratio = 16 / 9;
            if(CANVAS_HEIGHT < CANVAS_WIDTH / ratio)
                CANVAS_WIDTH = CANVAS_HEIGHT * ratio;
            else
                CANVAS_HEIGHT = CANVAS_WIDTH / ratio;

            canvas.width = WIDTH;
            canvas.height = HEIGHT;

            canvas.style.width = '' + CANVAS_WIDTH + 'px';
            canvas.style.height = '' + CANVAS_HEIGHT + 'px';
        }

Thanks for helping Loïc.

Character doesn't move to the correct destination/wrong angle on mouse click - html canvas

1 Answers1