最近我在尝试编写一个电脑游戏。
在我的游戏的一部分中，有一张敌人绕着圆圈旋转的图片。我的意思是，它旋转但不正确。
在我的程序中，敌人必须在每 500 毫秒后按像素向前移动。但每隔 500 毫秒，它会出现在圆的随机点上。
我不知道是什么问题。
这是我的代码:
<HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="GENERATOR" Content="Microsoft Visual Studio">
<META HTTP-EQUIV="Content-Type" content="text/html; charset=UTF-8">
<META name="author" content="Javad">
<script language="javascript">
function getCoordinates(r,angle)
{
var coords=[];
with (Math)
{
if ((angle > 0) && (angle <= 90))
{
coords[0]=round(r - r * cos(angle));
coords[1]=round(r - r * sin(angle));
}
else if ((angle > 90) && (angle <= 180))
{
angle= 180 - angle;
coords[0]=round(r + r * cos(angle));
coords[1]=round(r - r * sin(angle));
}
else if ((angle > 180) && (angle <= 270))
{
coords[0]=round(r + r * cos(angle));
coords[1]=round(r + r * sin(angle));
}
else if ((angle > 270) && (angle <= 360))
{
angle= 360 - angle;
coords[0]=round(r - r * cos(angle));
coords[1]=round(r + r * sin(angle));
}
}
return coords;
}
function makePoints(r)
{
var points=[];
var P= 2 * r * Math.PI;
for (var i=1;i<=P;i++)
points.push(getCoordinates(r,i / P * 360));
return points;
}
function createCircle(x,y,r,outlineColor)
{
var points=makePoints(r);
var pixels=[];
var b=false;
for (var i in points)
{
var pixel=document.createElement("DIV");
pixels.push(pixel);
with (pixel.style)
{
fontSize=1;
width=1;
height=1;
position="absolute";
left= x + points[i][0];
top= y + points[i][1];
}
pixel.style.backgroundColor=outlineColor;
document.body.insertBefore(pixel,enemy);
}
return pixels;
}
var myCircle, interval, enemy;
//The varible below specifies the index of the DIV element in myCircle Array which the enemy is on.
var enemyPosition=0;
onload=function() {
var x=Math.round(document.body.clientWidth / 2 - 50);
var y=Math.round(document.body.clientHeight / 2 - 50);
enemy=document.images[0];
myCircle=createCircle(x, y, 50, "green");
enemy.style.left=parseInt(myCircle[0].style.left) - 16;
enemy.style.top=parseInt(myCircle[0].style.top) - 16;
interval=setInterval(function() {
enemyPosition++;
if (enemyPosition == myCircle.length) enemyPosition=0;
enemy.style.left=parseInt(myCircle[enemyPosition].style.left) - 16;
enemy.style.top=parseInt(myCircle[enemyPosition].style.top) - 16;
},500);
};
</script>
</HEAD>
<BODY>
<img src="enemy.png" style="position:absolute;" width="32" height="32">
</BODY>
</HTML>
在我的代码中，createCircle 函数通过创建一些 DIV 元素来创建一个圆。每个 DIV 元素代表圆的一个像素。此函数通过传递给它的 x 和 y 坐标定位圆。 outlineColor 参数指定圆的轮廓颜色。创建圆后，此函数返回代表圆像素的 DIV 元素数组。
当程序完成加载时，该程序会创建一个圆圈并将其放置在程序窗口的正中央。然后这个程序使用 setInterval 方法在每次 500 毫秒过去时运行一个函数。此函数将敌人向前移动一个像素。
顺便说一下，如果你想回答我，请不要在你的回答中使用 JQuery。因为我不知道如何使用 JQuery。
最佳答案
在正弦和余弦的参数中需要将 Angular 转换为弧度，即乘以Math.PI/180。也许引入第二个变量，这样您只需进行一次转换。三 Angular 函数通常是这样定义的，用来测量单位圆上弧长的 Angular 。
在那之后，位置计算可能仍然很奇怪，因为您似乎试图补偿当时不再存在的东西。
关于javascript - 编写一个程序，其中有一张图片绕着一个圆圈旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46366168/