チェックボックスたたき(モグラたたき)
ブラウザ画面らしく(?)、チェックボックスを利用したもぐらたたきゲームです。
デモ
プログラム
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>チェックボックスたたき(モグラたたき)</title> <script> window.onload = function() { var startTime; var time; function start() { for (var i = 0; i < document.moguratataki.ana.length; ++i) { document.moguratataki.ana[i].disabled = true; document.moguratataki.ana[i].checked = false; } startTime = Date.now(); document.moguratataki.point.value = 0; document.moguratataki.start.disabled = true; tokei(); mogura(); } function tokei() { time = Math.floor((Date.now() - startTime) / 1000); if (time >= 10) { for (var i = 0; i < document.moguratataki.ana.length; ++i) { document.moguratataki.ana[i].disabled = true; } document.moguratataki.time.value = 10; alert('終了! ' + document.moguratataki.point.value + '匹たたきました'); document.moguratataki.start.disabled = false; return; } document.moguratataki.time.value = time; setTimeout(tokei, 100); } function mogura() { if (time < 10) { document.moguratataki.time.value = time; for (var i = 0; i < document.moguratataki.ana.length; ++i) { document.moguratataki.ana[i].disabled = true; document.moguratataki.ana[i].checked = false; } for (var i = 0; i < 3; ++i) { var j = Math.floor(document.moguratataki.ana.length * Math.random()); document.moguratataki.ana[j].disabled = false; document.moguratataki.ana[j].checked = true; } setTimeout(mogura, 1200); } } function tataku(e) { if (!e.target.disabled) { e.target.disabled = true; document.moguratataki.point.value = +document.moguratataki.point.value + 1; } } document.moguratataki.start.addEventListener('click', start); for (var i = 0; i < document.moguratataki.ana.length; ++i) { document.moguratataki.ana[i].addEventListener('click', tataku); } } </script> </head> <body> <form name="moguratataki"> <button type="button" name="start">start</button> <input type="text" name="time" value="0" size="3" readonly> <input type="text" name="point" value="0" size="5" readonly> <div style="margin:10px;"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <br> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <br> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <br> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <br> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> <input type="checkbox" name="ana"> </div> </form> </body> </html>
解説
(追記予定)