5x5マスの3並べゲーム

3 In A Row Game
Player 1: Red | Player 2: Blue
Player 1 starts first.
<!DOCTYPE html>
<html>
<head>
	<title>3 In A Row Game</title>
	<style>
		table {
			border-collapse: collapse;
			margin: 0 auto;
		}
		td {
			width: 50px; 
			height: 50px; 
			border: 1px solid black;
			text-align: center;
			font-size: 20px;
			cursor: pointer;
		}
		td:hover {
			background-color: lightgray;
		}
		.player1 {
			background-color: #ff5050;
		}
		.player2 {
			background-color: #99ccff;
		}
		.win {
			background-color: yellow;
		}
	</style>
</head>
<body>
	<h1>3 In A Row Game</h1>
	<p>Player 1: Red | Player 2: Blue</p>
	<table>
		<tr>
			<td id="00"></td>
			<td id="01"></td>
			<td id="02"></td>
			<td id="03"></td>
			<td id="04"></td>
		</tr>
		<tr>
			<td id="10"></td>
			<td id="11"></td>
			<td id="12"></td>
			<td id="13"></td>
			<td id="14"></td>
		</tr>
		<tr>
			<td id="20"></td>
			<td id="21"></td>
			<td id="22"></td>
			<td id="23"></td>
			<td id="24"></td>
		</tr>
		<tr>
			<td id="30"></td>
			<td id="31"></td>
			<td id="32"></td>
			<td id="33"></td>
			<td id="34"></td>
		</tr>
		<tr>
			<td id="40"></td>
			<td id="41"></td>
			<td id="42"></td>
			<td id="43"></td>
			<td id="44"></td>
		</tr>
	</table>
	<script>
		let currentPlayer = Math.floor(Math.random() * 2) + 1;
		let gameOver = false;
		let turns = 0;

		function checkWin(id) {
			let row = parseInt(id.charAt(0));
			let col = parseInt(id.charAt(1));
			let playerClass = "player" + currentPlayer;

			// check row
			let count = 0;
			for(let i=0; i<5; i++) {
				if(document.getElementById(row + "" + i).className === playerClass) {
					count++;
				} else {
					count = 0;
				}
				
				if(count === 3) {
					for(let j=i-2; j<=i; j++) {
						document.getElementById(row + "" + j).classList.add("win");
					}
					return true;
				}
			}

			// check column
			count = 0;
			for(let i=0; i<5; i++) {
				if(document.getElementById(i + "" + col).className === playerClass) {
					count++;
				} else {
					count = 0;
				}
				
				if(count === 3) {
					for(let j=i-2; j<=i; j++) {
						document.getElementById(j + "" + col).classList.add("win");
					}
					return true;
				}
			}

			// check diagonal top-left to bottom-right
			count = 0;
			let diff = row - col;
			for(let i=Math.max(diff,0); i<Math.min(5, 5+diff); i++) {
				if(document.getElementById(i + "" + (i-diff)).className === playerClass) {
					count++;
				} else {
					count = 0;
				}

				if(count === 3) {
					for(let j=i-2; j<=i; j++) {
						document.getElementById(j + "" + (j-diff)).classList.add("win");
					}
					return true;
				}
			}

			// check diagonal bottom-left to top-right
			count = 0;
			let sum = row + col;
			for(let i=Math.max(0,sum-4); i<=Math.min(sum,4); i++) {
				if(document.getElementById(i + "" + (sum-i)).className === playerClass) {
					count++;
				} else {
					count = 0;
				}

				if(count === 3) {
					for(let j=i+2; j>=i; j--) {
						document.getElementById(j + "" + (sum-j)).classList.add("win");
					}
					return true;
				}
			}

			return false;
		}

		function draw() {
			if(turns === 25) {
				document.getElementById("message").textContent = "Draw!";
				gameOver = true;
			}
		}
		
		function handleClick(event) {
			if(gameOver) return;

			let cell = event.target;
			let id = cell.id;

			if(cell.className === "player1" || cell.className === "player2") {
				document.getElementById("message").textContent = "This cell is already occupied! Please try another one.";
				return;
			}

			cell.classList.add("player" + currentPlayer);
			turns++;

			if(checkWin(id)) {
				document.getElementById("message").textContent = "Player " + currentPlayer + " wins!";
				gameOver = true;
				return;
			}

			draw();

			currentPlayer = currentPlayer === 1 ? 2 : 1;
			document.getElementById("message").textContent = "Player " + currentPlayer + "'s turn.";
		}

		let cells = document.getElementsByTagName("td");
		for(let i=0; i<cells.length; i++) {
			cells[i].addEventListener("click", handleClick);
		}
	</script>
	<p id="message">Player 1 starts first.</p>
</body>
</html>
<!--Why don't scientists trust atoms? Because they make up everything. -->