右端まで走れ |
説 明 | 人をマウスボタンを押して右端まで移動させてください。右端まで移動したタイムを競います。 |
---|---|
注意事項 | 下記サンプルの赤字部分が画像ファイル名、青文字が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> |