まるばつゲーム３

勝敗判定と、勝負がついた後のリセットを追加しました。
デモ

プログラム

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>まるばつゲーム</title>
<style>
#a td {
	width: 100px;
	height: 100px;
	font-size: 80px;
	border: 1px solid #ccc;
	text-align:center;
}
</style>
<script>
window.onload = function() {

	var turn = '○';

	function mark(e)
	{
		if (e.target.innerHTML == '') {
			e.target.innerHTML = turn;
			if (hantei()) {
				alert(turn + 'の勝ち！');
				mouichido();
			} else {
				change_turn();
			}
		}
	}

	function hantei()
	{
		var tds = document.getElementById('a').getElementsByTagName('td');
		if (tds[0].innerHTML != '' && tds[0].innerHTML == tds[1].innerHTML && tds[0].innerHTML == tds[2].innerHTML) {
			return true;
		} else if (tds[3].innerHTML != '' && tds[3].innerHTML == tds[4].innerHTML && tds[3].innerHTML == tds[5].innerHTML) {
			return true;
		} else if (tds[6].innerHTML != '' && tds[6].innerHTML == tds[7].innerHTML && tds[6].innerHTML == tds[8].innerHTML) {
			return true;
		} else if (tds[0].innerHTML != '' && tds[0].innerHTML == tds[3].innerHTML && tds[0].innerHTML == tds[6].innerHTML) {
			return true;
		} else if (tds[1].innerHTML != '' && tds[1].innerHTML == tds[4].innerHTML && tds[1].innerHTML == tds[7].innerHTML) {
			return true;
		} else if (tds[2].innerHTML != '' && tds[2].innerHTML == tds[5].innerHTML && tds[2].innerHTML == tds[8].innerHTML) {
			return true;
		} else if (tds[0].innerHTML != '' && tds[0].innerHTML == tds[4].innerHTML && tds[0].innerHTML == tds[8].innerHTML) {
			return true;
		} else if (tds[2].innerHTML != '' && tds[2].innerHTML == tds[4].innerHTML && tds[2].innerHTML == tds[6].innerHTML) {
			return true;
		} else {
			return false;
		}
	}

	function mouichido()
	{
		var tds = document.getElementById('a').getElementsByTagName('td');
		for (var i = 0; i < tds.length; ++i) {
			tds[i].innerHTML = '';
		}
		turn = '○';
	}

	function change_turn()
	{
		if (turn == '○') {
			turn = '×';
		} else {
			turn = '○';
		}
	}

	var tds = document.getElementById('a').getElementsByTagName('td');
	for (var i = 0; i < tds.length; ++i) {
		tds[i].addEventListener('click', mark);
	}

}
</script>
</head>
<body>
	<h1>まるばつゲーム</h1>
	<table id="a">
		<tbody>
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
		</tbody>
	</table>
</body>
</html>
解説

（追記予定）