UPDATE: RESOLVED
I am currently working on a game where the character moves by right-clicking. The character is meant to walk slowly, not teleport, towards the destination set by right-clicking on the canvas. However, I have encountered an issue where the character is moving towards a different position than intended despite my efforts to calculate the correct angle and debug using a circle drawing function. As a novice in this field, I find it challenging to comprehend the math involved and its impact on the character's movement.
The problem can be visualized through this reference image: https://i.stack.imgur.com/SBNK6.jpg
Additionally, my goal is illustrated in this image: 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;
}