我无法让鼠标瞄准正常工作

Posted 2023-03-05

【中文标题】我无法让鼠标瞄准正常工作

【英文标题】：I can't get mouse aiming to work properly

【发布时间】：2016-07-17 19:50:54

【问题描述】：

我试图让我的灰色方形点指向鼠标，我进行了计算，但有些地方不对，因为瞄准（黄色矩形）不是直接在鼠标位置。它有效，但方式很奇怪。

我进行角度和旋转计算的代码如下：

//Get angle:
angleToTurn = -Math.atan2(mouseX - (500+25), mouseY - (250+25))*(180/Math.PI);
//Rotate the object:
//Observation, 500 is the objects x location and 250 is it's y
var rad = (angleToTurn * (Math.PI / 180))+90;
ctx.translate((500+25) + robots.width/2,(250+25) + robots.height/2)
ctx.rotate(rad);
robots.x = (robots.width / 2) * (-1);
robots.y = (robots.height / 2) * (-1);
robots.drawn();
ctx.rotate(rad * ( -1 ));
ctx.translate(((500+25) + (robots.width / 2)) * (-1), ((250+25) + (robots.height / 2)) * (-1));

目标是使正方形瞄准，黄色矩形，精确指向鼠标位置（蓝色正方形）。

---

离题

我需要帮助来改进我的问题。如果您有任何建议，请告诉我应该怎么做才能使这个问题变得更好。我会很高兴收到一些指导。

var canvas, ctx, intervalo, players, robots, mouseX, mouseY;

function load() 
  canvas = document.getElementById('box');
  ctx = canvas.getContext('2d');

  function player(health, width, height, speed, x, y) 
    this.health = health;
    this.width = width;
    this.height = height;
    this.speed = speed;
    this.x = x;
    this.y = y;

    this.up = false;
    this.down = false;
    this.left = false;
    this.right = false;

    this.drawn = function() 
      ctx.fillStyle = "red";
      ctx.fillRect(this.x, this.y, this.width, this.height);
    
  
  var Player = new Array();
  Player.push(new player(50, 5, 5, 3, 200, canvas.height / 2));
  players = Player[0];

  function inteligentRobot(width, height, x, y) 
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;

    this.drawn = function() 
      ctx.fillStyle = "gray";
      ctx.fillRect(this.x, this.y, this.width, this.height);
      ctx.fillStyle = "yellow";
      ctx.fillRect(this.x + this.width, this.y + (this.height / 2), this.width * 2, this.height / 10)

      if ((players.x > this.x - this.width) &&
        (players.x < this.x) &&
        (players.y < this.y + this.height) &&
        (players.y > this.y)) 

      
    
  
  var iaRobot = new Array();
  iaRobot.push(new inteligentRobot(50, 50, 500, 250));
  robots = iaRobot[0];

  var keyUp, keyDown, keyLeft, keyRight;
  keyUp = 87;
  keyDown = 83;
  keyLeft = 65;
  keyRight = 68;
  window.addEventListener('keydown', checkKeyDown, false);

  function checkKeyDown(e) 
    if (event.keyCode == keyUp) 
      players.up = true;
     else if (event.keyCode == keyDown) 
      players.down = true;
     else if (event.keyCode == keyLeft) 
      players.left = true;
     else if (event.keyCode == keyRight) 
      players.right = true;
    
  

  window.addEventListener("keyup", checkKeyUp, false);

  function checkKeyUp(e) 
    if (event.keyCode == keyUp) 
      players.up = false;
     else if (event.keyCode == keyDown) 
      players.down = false;
     else if (event.keyCode == keyLeft) 
      players.left = false;
     else if (event.keyCode == keyRight) 
      players.right = false;
    
  

  //Mouse position
  document.onmousemove = mouseMove;

  function mouseMove(event) 
    event = event || canvas.event
    mouseX = event.pageX;
    mouseY = event.pageY;
    mouseX = mouseX - 11;
    mouseY = mouseY - 13;
  


function play() 
  intevalo = setInterval(animation, 1000 / 60)


function animation() 
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  if (players.up) 
    players.y -= players.speed;
  
  if (players.down) 
    players.y += players.speed;
  
  if (players.left) 
    players.x -= players.speed;
  
  if (players.right) 
    players.x += players.speed;
  
  //Get angle:
  angleToTurn = -Math.atan2(mouseX - (500 + 25), mouseY - (250 + 25)) * (180 / Math.PI);
  //Rotate the object:
  var rad = (angleToTurn * Math.PI / 180) + 90;
  ctx.translate((500 + 25) + robots.width / 2, (250 + 25) + robots.height / 2)
  ctx.rotate(rad);
  robots.x = (robots.width / 2) * (-1);
  robots.y = (robots.height / 2) * (-1);
  robots.drawn();
  ctx.rotate(rad * (-1));
  ctx.translate(((500 + 25) + (robots.width / 2)) * (-1), ((250 + 25) + (robots.height / 2)) * (-1));
  //Mouse pointer location:
  ctx.fillStyle = "blue";
  ctx.fillRect(mouseX, mouseY, 5, 5);
  players.drawn();

#box 
  border: 1px solid black;
  border-color: white;

#button 
  border: none;
  background-color: gray;
  width: 70;
  height: 50;

canvas 
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

html 
  background-color: black;
  color: white;
  font-family: courier new;

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/estilo.css">
  <script src="js/main.js"></script>
</head>

<body onload="load()">
  <canvas id="box"  ></canvas>
  <button onclick="play()" id="button">Play</button>
</body>

</html>

【问题讨论】：

请注意，参数函数的自然调用格式是atan2( dy, dx)，在数学上正向的笛卡尔坐标中。由于屏幕上的 y 方向指向下方，因此必须将其修改为 atan2(-dy,dx)，这样就不需要校正 90°。

【参考方案1】：

有几个问题，首先(500+25) + robots.width/2 我假设 25 应该是robots.width/2 所以你要添加两次。第二个(angleToTurn * (Math.PI / 180))+90，90 以度为单位，但(angleToTurn * (Math.PI / 180)) 以弧度为单位。我不确定你为什么首先来回翻译 atan2 返回弧度。

我不是 JS 开发人员，但我不确定旋转和平移画布、绘制对象、然后旋转和平移回来是做事的最佳方式，这让我感到困惑。似乎它应该更容易翻译和旋转它自己的对象。

无论如何我做了一些更正，它似乎工作，看看代码：

var canvas, ctx, intervalo, players, robots, mouseX, mouseY;

function load() 
  canvas = document.getElementById('box');
  ctx = canvas.getContext('2d');

  function player(health, width, height, speed, x, y) 
    this.health = health;
    this.width = width;
    this.height = height;
    this.speed = speed;
    this.x = x;
    this.y = y;

    this.up = false;
    this.down = false;
    this.left = false;
    this.right = false;

    this.drawn = function() 
      ctx.fillStyle = "red";
      ctx.fillRect(this.x, this.y, this.width, this.height);
    
  
  var Player = new Array();
  Player.push(new player(50, 5, 5, 3, 200, canvas.height / 2));
  players = Player[0];

  function inteligentRobot(width, height, x, y) 
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;

    this.drawn = function() 
      ctx.fillStyle = "gray";
      ctx.fillRect(this.x, this.y, this.width, this.height);
      ctx.fillStyle = "yellow";
      ctx.fillRect(this.x + this.width, this.y + (this.height / 2), this.width * 2, this.height / 10)

      if ((players.x > this.x - this.width) &&
        (players.x < this.x) &&
        (players.y < this.y + this.height) &&
        (players.y > this.y)) 

      
    
  
  var iaRobot = new Array();
  iaRobot.push(new inteligentRobot(50, 50, 500, 250));
  robots = iaRobot[0];

  var keyUp, keyDown, keyLeft, keyRight;
  keyUp = 87;
  keyDown = 83;
  keyLeft = 65;
  keyRight = 68;
  window.addEventListener('keydown', checkKeyDown, false);

  function checkKeyDown(e) 
    if (event.keyCode == keyUp) 
      players.up = true;
     else if (event.keyCode == keyDown) 
      players.down = true;
     else if (event.keyCode == keyLeft) 
      players.left = true;
     else if (event.keyCode == keyRight) 
      players.right = true;
    
  

  window.addEventListener("keyup", checkKeyUp, false);

  function checkKeyUp(e) 
    if (event.keyCode == keyUp) 
      players.up = false;
     else if (event.keyCode == keyDown) 
      players.down = false;
     else if (event.keyCode == keyLeft) 
      players.left = false;
     else if (event.keyCode == keyRight) 
      players.right = false;
    
  

  //Mouse position
  document.onmousemove = mouseMove;

  function mouseMove(event) 
    event = event || canvas.event
    mouseX = event.pageX;
    mouseY = event.pageY;
    mouseX = mouseX - 11;
    mouseY = mouseY - 13;
  


function play() 
  intevalo = setInterval(animation, 1000 / 60)


function animation() 
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  if (players.up) 
    players.y -= players.speed;
  
  if (players.down) 
    players.y += players.speed;
  
  if (players.left) 
    players.x -= players.speed;
  
  if (players.right) 
    players.x += players.speed;
  
  //Get angle:
  angleToTurn = -Math.atan2(mouseX - (500+ robots.width / 2), mouseY - (250 + robots.height / 2)) ;
  //Rotate the object:
  var rad = angleToTurn + Math.PI/2;
  ctx.translate(500 + (robots.width / 2), 250 + (robots.height / 2))
  ctx.rotate(rad);
  robots.x = (robots.width / 2) * (-1);
  robots.y = (robots.height / 2) * (-1);
  robots.drawn();
  ctx.rotate(rad * (-1));
  ctx.translate((500 + (robots.width / 2)) * (-1), (250 + (robots.height / 2)) * (-1));
  //Mouse pointer location:
  ctx.fillStyle = "blue";
  ctx.fillRect(mouseX, mouseY, 5, 5);
  players.drawn();

#box 
  border: 1px solid black;
  border-color: white;

#button 
  border: none;
  background-color: gray;
  width: 70;
  height: 50;

canvas 
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

html 
  background-color: black;
  color: white;
  font-family: courier new;

<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="css/estilo.css">
  <script src="js/main.js"></script>
</head>

<body onload="load()">
  <canvas id="box"  ></canvas>
  <button onclick="play()" id="button">Play</button>
</body>

</html>

【讨论】：

Canvas 旋转事物的方式其实很奇怪。感谢您提供的信息，我不太确定这一切是如何运作的。