つららを避けて右端まで走れ

説  明
マウスボタンを押して人を右端まで移動させてください。右端まで移動したタイムを競います。落下するつららに当たるとゲームオーバーになります。

注意事項
下記サンプルの赤字部分が変更しても良い部分です。それぞれの状況に応じて書き換えてください。


動作雰囲気チェック >>実行
サンプル
<html>
<head>
<title>つららを避けて右端まで走れ</title>
<script language="JavaScript"><!--
x = 0;
endX = 0;
y = 0;
dx = 8; // 移動速度
flag = false; // ゲーム中かどうかのフラグ
sTime = 0;
eTime = 0;
manObj = 0;
turaraY = new Array();
tMax = 0; // つららの総数
tW = 16; // 1つのつららの横幅
tH = 16; // 1つのつららの縦幅
tDy = 4; // つららの落下速度

function moveMan()
{
if (!flag) return; // ゲーム中でなければ処理しない
x += dx;
manObj.style.pixelLeft = x;
for (i=0; i<tMax; i++)
{
if ( (turaraY[i] >= (y-tH)) && ((i * tW) <= x) && (((i+1) * tW) > x))
{
flag = false;
alert("ゲームオーバー");
}
}
if (x < endX) return;
eTime = (new Date()).getTime();
sec = (eTime - sTime) / 1000;
flag = false;
alert(sec+"秒でした\nゲームオーバー");
}

function moveTurara()
{
if (!flag) return; // ゲーム中でなければ処理しない
n = Math.floor(Math.random() * tMax);
turaraY[n] += tDy;
if (turaraY[n] > (document.body.clientHeight - tH)) turaraY[n] = document.body.clientHeight - tH;
document.images["t"+n].style.pixelTop = turaraY[n];
setTimeout("moveTurara()",100);
}
function startGame()
{
if (flag) return;
flag = true;
x = 0;
manObj = document.images["man"];
endX = document.body.clientWidth - manObj.width;
y = document.body.clientHeight - manObj.height;
manObj.style.pixelLeft = x;
manObj.style.pixelTop = y;

for (i=0; i<tMax; i++)
{
turaraY[i] = y - 50;
document.images["t"+i].style.pixelTop = y - 50; // つららの最初の位置
document.images["t"+i].style.pixelLeft = i * tW;
}

sTime = (new Date()).getTime();
setTimeout("moveTurara()",100);
}

function wrtImage()
{
n = 0;
tMax = Math.floor(document.body.clientWidth / tW);
for (i=0; i<tMax; i++)
{
document.write("<img src='turara.gif' name='t"+n+"' style='position:absolute;top:0px;left:0px;'>");
n++;
}
}
// --></script>
</head>
<body onMousedown="moveMan()">
つららに当たらないようにマウスボタンを押して右端まで人を移動させてください。<br>
到達までの時間を競います。つららに当たるとゲームオーバーです。<br>
<br>
<form><input type="button" value="Game Start" onClick="startGame()"></form>
<img src="man.gif" name="man" style="position:absolute;top:0px;left:0px">
<script language="JavaScript"><!--
wrtImage();
// --></script>
</body>
</html>