メモ帳でできるプログラミング JavaScript

チェックボックスたたき(モグラたたき)

ブラウザ画面らしく(?)、チェックボックスを利用したもぐらたたきゲームです。

デモ





プログラム

<!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>

解説

(追記予定)