Как исправить вращение объекта, чтобы следовать за мышью клиента?

Question

Я создаю основную игру с использованием простого javascript и пытаюсь повернуть объект, чтобы он следовал за моей мышью.

Я попытался получить клиентскую мышь X и Y, а затем вычесть ширину и высоту холста, разделенную на два. Затем, взяв эти значения и введя их в Math.atan2(). Тем не менее, я чувствую, что проблема может быть в моем преобразовании и повороте. Код ниже - это то, что я пробовал.

WIDTH = c.height;
HEIGHT = c.width;
document.onmousemove = function(ve){
            let cX = -c.width / 2;
            let cY = -c.height / 2;
            let x = ve.offsetX;
            let y = ve.offsetY;
            var rX = cX + x - 8;
            var rY = cY + y - 8;
            player.angle = Math.atan2(rX, rY) / Math.PI * 180;
        }
function update(){
                        var now = Date.now();
                        dt = now - lastUpdate;
                        ctx.clearRect(0, 0, WIDTH, HEIGHT);
                        ctx.setTransform(1, 0, 0, 1, WIDTH / 2, HEIGHT / 2);
                        ctx.rotate(player.angle + 10);
                        drawCircle(player.x, player.y, 20, 0, 180, "red");
                        tx.setTransform(1, 0, 0, 1, 0, 0);
}
setInterval(update, dt/10000);

Игрок вращается вокруг моей мыши в широких кругах без видимого рисунка. Вот рисунок, показывающий, что происходит. https://gyazo.com/006c99879ecf219791d059de14d98b74

Answer 1

Чтобы повернуть объект, следуя за мышью, вам нужно получить угол между предыдущим положением мыши и фактическим положением мыши и использовать этот угол для поворота объекта. Также объект рисуется кончиком в начале холста {x: 0, y: 0}, поэтому вам нужно перевести игрока в положение мыши.

Надеюсь, это то, что вам нужно.

const ctx = c.getContext("2d")
const HEIGHT = c.height = window.innerHeight;
const WIDTH = c.width = window.innerWidth;
let m = {x:0,y:0}
let prev = {x:0,y:0}
let angle = 0;
   
c.addEventListener("mousemove",(evt)=>{
  ctx.clearRect(-WIDTH, -HEIGHT, 2*WIDTH, 2*HEIGHT);
  // the previous position of the mouse
  prev.x = m.x;
  prev.y = m.y;
  //the actual position of the mouse
  m = oMousePos(c, evt);
  // if the mpuse is moving get the angle between the previoue position and the actual position of the mouse
  if(m.x != prev.x && m.y != prev.y){
  angle = Math.atan2(m.y-prev.y, m.x-prev.x)
  }

  ctx.restore();
  ctx.save();
 
  ctx.translate(m.x, m.y);
  ctx.rotate(angle);
  
  drawPlayer();
  
})  
  
function drawPlayer(){
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(-20,-5);
  ctx.lineTo(-20,5);
  ctx.lineTo(0,0);
  ctx.closePath();
  ctx.fill() 
} 
  
// a function to detect the mouse position  
function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
	return { //objeto
	x: Math.round(evt.clientX - ClientRect.left),
	y: Math.round(evt.clientY - ClientRect.top)
}
}

<canvas id="c"></canvas>

Как наблюдение: в вашем коде у вас есть Math.atan2(rX, rY) Первый аргумент должен быть y.