编写程序，其中的图片围绕一个圆圈旋转 [英] Writing a program in which there's a picture rotating around a circle
问题描述
这些天，我正在尝试编写计算机游戏.
在我的游戏的一部分中，有一幅敌人绕一圈旋转的图片.我的意思是，它旋转但不正确.
在我的程序中，敌人必须每500毫秒向前移动一个像素.但是每隔500毫秒，它就会出现在圆的随机点上.
我不知道问题出在什么地方.
这是我的代码:
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>
在我的代码中，createCircle函数通过创建一些DIV元素来创建一个圆.每个DIV元素都代表圆圈的一个像素.该函数通过传递给它的x和y坐标来定位圆. outlineColor参数指定圆的轮廓颜色.创建圆后，此函数返回表示圆像素的DIV元素数组.
程序完成加载后，该程序将创建一个圆并将其放置在程序窗口的中间.然后，该程序在每经过500毫秒时就使用setInterval方法运行一个函数.此功能将敌人向前移动一个像素.
顺便说一句，如果您想回答我，请不要在回答中使用JQuery.因为我不知道如何使用JQuery.
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.
推荐答案
您需要将角度转换为弧度，即在正弦和余弦参数中乘以Math.PI/180.也许引入第二个变量，以便您只需执行一次转换.通常以这种方式定义三角函数，以测量单位圆上的弧长角.
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.
这篇关于编写程序，其中的图片围绕一个圆圈旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
