动画瞄准角atan2
动画瞄准角atan2
提问于 2017-11-09 22:45:11
我希望从红色方块射出的子弹打到蓝色方块，但它不会朝向蓝色方块，我该怎么办？
我尝试了Math.atan2(100, 100)/ Math.PI * 180;，结果是45°，这是正确的，但它拍摄的方向相反，而不是朝向蓝色正方形。
我糊涂了，请帮帮忙，如果有任何错误，我很抱歉谢谢
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<title> just my game </title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
<script>
/* LEGEND
red : red square
blue : blue square
Dim : width or hight (px) (dimention)
posX : position on the X axis
posY : position on the Y axis
Inc : increment (known as speed)
aimAng : aiming angle
*/
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var redDim = 20;
var redPosX = 200;
var redPosY = 200;
var redPosXInc = 1;
var redPosYInc = 1;
var blueDim = 15;
var bluePosX = 300;
var bluePosY = 300;
var bulletDim = 6;
var bulletPosX = bluePosX ;
var bulletPosY = bluePosY ;
var bulletPosXInc;
var bulletPosYInc;
var aimAng;
var bullet = false;
//filling the canvas
animate();
function animate () {
setInterval(print, 25);
}
function print () {
//clearing the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
//printing the canvas
context.fillStyle="#c1d9ff";
context.fillRect(0, 0, canvas.width, canvas.height);
//printing red square
context.fillStyle="red";
context.fillRect(redPosX, redPosY, redDim, redDim);
//printing blue square
context.fillStyle="blue";
context.fillRect(bluePosX, bluePosY, blueDim, blueDim);
//calculating the aiming angle between the two squares
aimAng = Math.atan2(redPosY - bluePosY, redPosX - bluePosX) / Math.PI * 180;
//calculating the increment of the position of the bullet (if the bullet is not active)
if (bullet == false) {
bulletPosXInc = Math.cos(aimAng)*5;
bulletPosYInc = Math.sin(aimAng)*5;
bullet = true;
}
//printing the bullet
context.fillStyle="black";
context.fillRect(bulletPosX, bulletPosY, bulletDim, bulletDim);
//changing position of the bullet for the next print
bulletPosX = bulletPosX + bulletPosXInc;
bulletPosY = bulletPosY + bulletPosYInc;
}
</script>
</body>
回答 1
Stack Overflow用户
发布于 2017-11-09 23:23:44
Math.sin和Math.cos采用弧度，因此您不需要将结果转换为度数！因此忽略* 180 / PI位
要获得更平滑、更有效的动画设置方式，请尝试在系统准备绘制动画帧时调用该帧。使用
window.requestAnimationFrame(print);完整代码：
<head>
<meta charset="UTF-8"/>
<title> just my game </title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000"></canvas>
<script>
/* LEGEND
red : red square
blue : blue square
Dim : width or hight (px) (dimention)
posX : position on the X axis
posY : position on the Y axis
Inc : increment (known as speed)
aimAng : aiming angle
*/
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var redDim = 20;
var redPosX = 200;
var redPosY = 200;
var redPosXInc = 1;
var redPosYInc = 1;
var blueDim = 15;
var bluePosX = 300;
var bluePosY = 300;
var bulletDim = 6;
var bulletPosX = bluePosX ;
var bulletPosY = bluePosY ;
var bulletPosXInc;
var bulletPosYInc;
var aimAng;
var bullet = false;
var speed = 6;
//filling the canvas
animate();
function animate () {
window.requestAnimationFrame(print);
}
function print () {
//clearing the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
//printing the canvas
context.fillStyle="#c1d9ff";
context.fillRect(0, 0, canvas.width, canvas.height);
//printing red square
context.fillStyle="red";
context.fillRect(redPosX, redPosY, redDim, redDim);
//printing blue square
context.fillStyle="blue";
context.fillRect(bluePosX, bluePosY, blueDim, blueDim);
//calculating the aiming angle between the two squares in radians
aimAng = Math.atan2(redPosY - bluePosY, redPosX - bluePosX) ;
//calculating the increment of the position of the bullet (if the bullet is not active)
if (bullet == false) {
bulletPosXInc = Math.cos(aimAng)*speed ;
bulletPosYInc = Math.sin(aimAng)*speed ;
bullet = true;
}
//printing the bullet
context.fillStyle="black";
context.fillRect(bulletPosX, bulletPosY, bulletDim, bulletDim);
//changing position of the bullet for the next print
bulletPosX = bulletPosX + bulletPosXInc;
bulletPosY = bulletPosY + bulletPosYInc;
window.requestAnimationFrame(print);
}
</script>
</body>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47204729
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号