1
最近、私はコンピュータゲームを書こうとしています。 私のゲームの一部には、円の周りを回転する敵の写真があります。つまり、回転はしますが正しくはありません。
私のプログラムでは、敵は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ミリ秒が経過するたびに関数を実行します。この関数は、敵を1ピクセルだけ前方に移動させます。
ところで、あなたが私に答えたいなら、答えにJQueryを使わないでください。 JQueryの使い方は分かりません。
ご回答ありがとうございます。私は自分のプログラムのバグを修正し、敵はかなり正しく回転します。しかし、回転が遅すぎます。だから私はそれをより速く回転させるために、10にsetIntervalメソッドの2番目のパラメータを設定する必要があります。 –
@JavadBayat：はい、または1度以上進めます。 500 msecごとに1°は毎秒2°、毎分120°または3分の1に変換されます。 1秒ごとに10ミリ秒ごとに毎秒100度、したがって3.6秒ごとにフル回転するので、速すぎる可能性があります。 – LutzL
@JavadBayat：r = 50の場合、円上に100 * PI = 314ピクセルが残っているので、上記はまだ概算しています。 – LutzL