スピードマッチ

デモ

今表示されているマークがひとつ前に表示されていたマークと一致か不一致かを間違えずに選択するゲームです。
制限時間は45秒です。
カッコ内の数字のキーでも操作できます。
プログラム

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>スピードマッチ</title>
<style>
#a {font-size:150px;text-align:center;}
#b {text-align:center;}
#c {margin:10px 0;}
#d {text-align:center;}
#e {text-align:center; padding:10px;}
</style>
<script>
window.onload = function() {
	var running = false;
	var tid;
	var prev = '';
	var p1 = 0;
	var p2 = 0;

	function r() {
		return ['●', '▲', '■'][Math.floor(Math.random()*3)];
	}

	function init() {
		document.getElementById('b').style.display = 'none';
		document.getElementById('a').innerHTML = r();
		prev = '';
		tid = 0;
		running = false;
		p1 = 0;
		p2 = 0;
		document.f.b0.disabled = false;
	}

	function n() {
		document.getElementById('a').style.color = '#fff';
		setTimeout(function(){document.getElementById('a').style.color = '#000';}, 150);
		prev = document.getElementById('a').innerHTML;
		document.getElementById('a').innerHTML = r();
	}

	function start() {
		n();
		document.f.b0.disabled = true;
		tid = setTimeout(timeout, 45000);
		running = true;
	}

	function timeout() {
		tid = 0;
		running = false;
		result();
	}

	function answer(a) {
		if (running) {
			++p2;
			if ((a == 1 && prev == document.getElementById('a').innerHTML) || (a == 2 && prev != document.getElementById('a').innerHTML)) {
				++p1;
				document.getElementById('e').innerHTML = '<span style="color:#090;">○</span>';
			} else {
				document.getElementById('e').innerHTML = '<span style="color:#c00;">×</span>';
			}
			n();
		}
	}

	function result() {
		document.getElementById('c').innerHTML = '総回答数: ' + p2 + '、正解数:' + p1 + '、判断の速さ:' + (Math.floor(p2 / 45 * 1000) / 1000) + '回/秒、判断の正確さ:' + Math.floor(p1 / p2 * 100) + '%';
		document.getElementById('b').style.display = 'block';
	}

	function k(e) {
		switch (String.fromCharCode(e.keyCode)) {
			case '0':
				start();
				break;
			case '1':
				answer(1);
				break;
			case '2':
				answer(2);
				break;
			case '3':
				if (!running) {
					init();
				}
				break;
		}
	}

	init();
	document.f.b0.addEventListener('click', start);
	document.f.b1.addEventListener('click', function () {
		answer(1);
	});
	document.f.b2.addEventListener('click', function () {
		answer(2);
	});
	document.f.b3.addEventListener('click', init);
	document.addEventListener('keyup', k);
}
</script>
</head>
<body>
	<form name="f">
		<div id="a">★</div>
		<div id="d">
			<button type="button" name="b1">一致 (1)</button>
			<button type="button" name="b0">スタート (0)</button>
			<button type="button" name="b2">不一致 (2)</button>
		</div>
		<div id="e"></div>
		<div id="b">
			<div id="c"></div>
			<button type="button" name="b3">もう一度 (3)</button>
		</div>
	</form>

	<ul>
		<li>今表示されているマークがひとつ前に表示されていたマークと一致か不一致かを間違えずに選択するゲームです。</li>
		<li>制限時間は45秒です。</li>
		<li>カッコ内の数字のキーでも操作できます。</li>
	</ul>
</body>
</html>
解説

（追記予定）