Question

我正在使用普通的javascript构建基本游戏，并且试图旋转对象以跟随鼠标。

我尝试获取客户的鼠标X和Y，然后减去画布的宽度和高度除以2。然后将这些值输入到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);

播放器绕着我的鼠标旋转，没有明显的图案。这是显示正在发生的事情的gif文件。 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。

如何固定对象旋转以跟随客户的鼠标？

1 个答案: