つららを避けて右端まで走れ(キーボード版) |
説 明 | キーを押して人を右端まで移動させてください。右端まで移動したタイムを競います。落下するつららに当たるとゲームオーバーになります。 |
---|---|
注意事項 | 下記サンプルの赤字部分が変更しても良い部分です。それぞれの状況に応じて書き換えてください。 |
■動作雰囲気チェック >>実行 |
|
サンプル |
<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> |