我试图在鼠标上制作灰色方形点，我进行了计算，但是因为瞄准（黄色矩形）不是直接在鼠标位置，所以有些不对劲。它的工作原理却很奇怪。
我进行角度和旋转计算的代码如下：
//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>
答案 0 :(得分：1)
有几个问题，首先(500+25) + robots.width/2我认为25假设为robots.width/2，所以你要加两次。第二个(angleToTurn * (Math.PI / 180))+90，90是度，但(angleToTurn * (Math.PI / 180))是弧度。我不确定为什么你在第一个地方来回翻译atan2返回弧度。
我不是JS Dev，但我不确定旋转和平移画布，绘制对象，然后旋转和平移是最好的做事方式，这对我来说似乎很困惑。似乎应该更容易翻译和旋转它自己的对象。
无论如何我做了一些修正，似乎工作，看看代码：
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>