问题
These days I'm trying to write a computer game.
In a part of my game, there's a picture of enemy rotating around a circle. I mean, it rotates but not correctly.
In my program, the enemy must move forward on pixel after each 500 milliseconds. But after each 500 milliseconds, it appears at a random point of the circle.
I don't know what the problem is.
Here is my code:
<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>
In my code, the createCircle function creates a circle by creating some DIV elements. Every DIV element represents a pixel of the circle. This function positions the circle by x and y coordinates passed to it. The outlineColor parameter specifies the circle's outline color. After creating the circle, this function returns an array of DIV elements that represent the pixels of the circle.
When the program finishes loading, this program creates a circle and positions it right in the middle of the program's window. Then this program uses setInterval method to run a function each time that 500 milliseconds has elapsed. This function moves the enemy forward one pixel.
By the way, if you want to answer me, please don't use JQuery in your answer. Because I don't know how to work with JQuery.
回答1:
You need to convert the angle to radians, that is, multiply with Math.PI/180, in the arguments of sine and cosine. Perhaps introduce a second variable so that you have to do this conversion only once. The trigonometric functions are usually defined that way, to measure the angle in arc length on the unit circle.
After that the position computation might still be strange as it seems that you tried to compensate for something that then is no longer there.
来源：https://stackoverflow.com/questions/46366168/writing-a-program-in-which-theres-a-picture-rotating-around-a-circle