つららを避けて右端まで走れ(キーボード版)

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

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


動作雰囲気チェック >>実行
サンプル
<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 - 40;
document.images["t"+i].style.pixelTop = y - 40; // つららの最初の位置
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 onKeydown="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>