チェックボックスたたき(モグラたたき)
ブラウザ画面らしく(?)、チェックボックスを利用したもぐらたたきゲームです。
デモ
プログラム
<!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>
解説
(追記予定)