星をクリックしよう！

説　　明
星が画面上から下へ落下します。落下する星を素早くクリックしてください。１０個の星を全部クリックするとクリックまでの時間が表示されます。
注意事項
下記サンプルの赤字部分が画像ファイル名、青文字が表示するメッセージ、緑文字が星の移動速度、紫文字が星の座標になっています。それぞれの状況に応じて書き換えてください。

■動作雰囲気チェック　>>実行
サンプル
 <html>
<head>
<title>星をクリックしよう！</title>
<style type="text/css"><!--
.star { position:absolute;left:-100px;top:0px;}
--></style>
<script language="JavaScript"><!--
x = [50,200,140,350,460,10,40,90,220,400];
y = [-100,50,200,400,330,0,500,390,270,510];
x = [];
y = [];
f = [0,0,0,0,0,0,0,0,0,0];
dx = 1.8; //　移動速度および方向
dy = 10; //　落下速度
flag = false; //　ゲーム中かどうかのフラグ
sCount = 10; //　落下する星の数
sTime = 0;
eTime = 0;
function fallStar()
{
for (i=0; i<sCount; i++)
{
if (f[i] == 1)
{
x[i] = x[i] + dx;
y[i] = y[i] + dy;
x[i] = x[i] % document.body.clientWidth;
y[i] = y[i] % document.body.clientHeight;
if (x[i] < -50) x[i] = document.body.clientWidth;
document.images["star"+i].style.pixelLeft = x[i];
document.images["star"+i].style.pixelTop = y[i];
}
}
if (flag) setTimeout("fallStar()",50);
}

function clickStar(n)
{
if (!flag) return;
f[n] = 0;
for (i=0,c=0; i<sCount; i++) c += f[i];
if (c > 0) return;
eTime = (new Date()).getTime();
df = (eTime - sTime) / 1000;
alert("ゲームクリア："+df+"秒でした");
flag = false;
}

function startGame()
{
if (flag) return;
flag = true;
for(i=0; i<sCount; i++) f[i] = 1;
for(i=0; i<sCount; i++) { x[i] = initX[i]; y[i] = initY[i]; }
setTimeout("fallStar()",50);
sTime = (new Date()).getTime();
}
// --></script>
</head>
<body>
落下する星を全部クリックしよう！<br>
（全部クリックするまでの時間を競います）<br>
<br>
<form><input type="button" value="Game Start" onClick="startGame()"></form>
<img src="star.gif" onClick="clickStar(0)" name="star0" class="star">
<img src="star.gif" onClick="clickStar(1)" name="star1" class="star">
<img src="star.gif" onClick="clickStar(2)" name="star2" class="star">
<img src="star.gif" onClick="clickStar(3)" name="star3" class="star">
<img src="star.gif" onClick="clickStar(4)" name="star4" class="star">
<img src="star.gif" onClick="clickStar(5)" name="star5" class="star">
<img src="star.gif" onClick="clickStar(6)" name="star6" class="star">
<img src="star.gif" onClick="clickStar(7)" name="star7" class="star">
<img src="star.gif" onClick="clickStar(8)" name="star8" class="star">
<img src="star.gif" onClick="clickStar(9)" name="star9" class="star">
</body>
</html>