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

Question

我试图使灰色方 block 指向鼠标，我进行了计算，但有些东西不对，因为瞄准(黄色矩形)并不直接位于鼠标位置。它可以工作，但是以一种奇怪的方式。

我进行 Angular 和旋转计算的代码如下:

//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" width="1330" height="500"></canvas>
  <button onclick="play()" id="button">Play</button>
</body>

</html>

Answer 1

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

我不是 JS 开发人员，但我不确定旋转和平移 Canvas ，绘制对象，然后旋转并平移回来是最好的方法，这对我来说似乎很困惑。似乎应该更容易平移和旋转对象本身。

无论如何，我做了一些修正，它似乎有效，请看一下代码:

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" width="1330" height="500"></canvas>
  <button onclick="play()" id="button">Play</button>
</body>

</html>