3×In square 3, ⚪︎ and×are placed alternately.'s game

Click here for free DL of the app version that can save data.

No:711

176

←

Prev Next

→

3×In square 3, ⚪︎ and×are placed alternately.
Developer User3098｜Date and time 23/6/17 14:14:36
Build time 35.489 sec｜Game capacity 2.633KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Tic Tac Toe</title>
	<style>
		table {
			margin: auto;
			border-collapse: collapse;
		}
		
		td {
			width: 50px;
			height: 50px;
			text-align: center;
			font-size: 30px;
			font-weight: bold;
			border: 1px solid black;
			cursor: pointer;
		}
		
		#message {
			text-align: center;
			font-size: 24px;
			font-weight: bold;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<td id="cell-0"></td>
			<td id="cell-1"></td>
			<td id="cell-2"></td>
		</tr>
		<tr>
			<td id="cell-3"></td>
			<td id="cell-4"></td>
			<td id="cell-5"></td>
		</tr>
		<tr>
			<td id="cell-6"></td>
			<td id="cell-7"></td>
			<td id="cell-8"></td>
		</tr>
	</table>
	<div id="message"></div>

// ゲーム盤をクリックした時の処理
	function cellClicked(id) {
		if (cells[id] == "") {
			document.getElementById("cell-" + id).textContent = player;
			cells[id] = player;

// 勝敗の判定
			if (isWin(player)) {
				message.textContent = player + "の勝利！";
				disableCells();
			} else if (isDraw()) {
				message.textContent = "引き分け！";
				disableCells();
			} else {
				player = (player == "⚪︎") ? "×" : "⚪︎";
				message.textContent = player + "の番です";
			}
		}
	}

// 勝利判定
	function isWin(p) {
		if (cells[0] == p && cells[1] == p && cells[2] == p) return true;
		if (cells[3] == p && cells[4] == p && cells[5] == p) return true;
		if (cells[6] == p && cells[7] == p && cells[8] == p) return true;
		if (cells[0] == p && cells[3] == p && cells[6] == p) return true;
		if (cells[1] == p && cells[4] == p && cells[7] == p) return true;
		if (cells[2] == p && cells[5] == p && cells[8] == p) return true;
		if (cells[0] == p && cells[4] == p && cells[8] == p) return true;
		if (cells[2] == p && cells[4] == p && cells[6] == p) return true;
		return false;
	}

// 引き分け判定
	function isDraw() {
		for (var i = 0; i < 9; i++) {
			if (cells[i] == "") {
				return false;
			}
		}
		return true;
	}

// ゲーム盤のセルを無効化する
	function disableCells() {
		for (var i = 0; i < 9; i++) {
			document.getElementById("cell-" + i).removeEventListener("click", clickHandler);
		}
	}

// ゲーム盤を描画する
	for (var i = 0; i < 9; i++) {
		var cell = document.getElementById("cell-" + i);
		cell.addEventListener("click", clickHandler);

function clickHandler() {
			cellClicked(i);
		}
	}
	</script>
</body>
</html>