Question

这些天我正在尝试编写电脑游戏。在我游戏的一部分中，有一张敌人绕着圆圈旋转的照片。我的意思是，它旋转但不正确。
在我的程序中，敌人必须在每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。

Answer 1

您需要在正弦和余弦的参数中将角度转换为弧度，即乘以Math.PI/180。也许引入第二个变量，这样你只需要进行一次转换。三角函数通常以这种方式定义，以测量单位圆上弧长的角度。

之后，位置计算可能仍然很奇怪，因为您似乎试图补偿那些不再存在的东西。

编写一个程序，其中有一个图片围绕一个圆圈旋转

1 个答案: