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

まるばつゲーム２

先ほど作ったプログラムを、プログラムらしく繰り返しをfor文で書くなどして短くしました。

デモ

プログラム

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

解説

（追記予定）

ここまでできたら、勝敗の判定、次のゲームの開始などの機能も追加したいですね。→ 次回へ続く。