右端まで走れ

説  明
人をマウスボタンを押して右端まで移動させてください。右端まで移動したタイムを競います。

注意事項
下記サンプルの赤字部分が画像ファイル名、青文字が1回の移動ピクセル数、緑文字がゲームオーバー時のメッセージになっています。それぞれの状況に応じて書き換えてください。


動作雰囲気チェック >>実行
サンプル
<html>
<head>
<title>右端まで走れ</title>
<script language="JavaScript"><!--
x = 0;
endX = 0;
y = 0;
dx = 8; // 移動速度
flag = false; // ゲーム中かどうかのフラグ
sTime = 0;
eTime = 0;
manObj = 0;

function moveMan()
{
if (!flag) return; // ゲーム中でなければ処理しない
x += dx;
manObj.style.pixelLeft = x;
if (x < endX) return;
eTime = (new Date()).getTime();
sec = (eTime - sTime) / 1000;
flag = false;
alert(sec+"秒でした\nゲームオーバー");
}

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;
sTime = (new Date()).getTime();
}
// --></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">
</body>
</html>