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

No:3699

586

←

Prev Next

→

Tic Tac Toe is where there's a giant hashtag and a..ALL
Developer User3709｜Date and time 23/6/26 4:37:26
Build time 32.532 sec｜Game capacity 3.218KB｜

Script

Tic Tac Toe

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Tic Tac Toe</title>
</head>
<body>
	<h1>Tic Tac Toe</h1>
	<div id="board">
		<div class="cell" onclick="playerTurn(0)"></div>
		<div class="cell" onclick="playerTurn(1)"></div>
		<div class="cell" onclick="playerTurn(2)"></div>
		<div class="cell" onclick="playerTurn(3)"></div>
		<div class="cell" onclick="playerTurn(4)"></div>
		<div class="cell" onclick="playerTurn(5)"></div>
		<div class="cell" onclick="playerTurn(6)"></div>
		<div class="cell" onclick="playerTurn(7)"></div>
		<div class="cell" onclick="playerTurn(8)"></div>
	</div>

// check if board is full
		function isBoardFull() {
			for (let i = 0; i < playingBoard.length; i++) {
				if (playingBoard[i] == "") {
					return false;
				}
			}
			return true;
		}

// check for winning condition
		function checkWinningCondition(symbol) {
			if (
				(playingBoard[0] == symbol && playingBoard[1] == symbol && playingBoard[2] == symbol) ||
				(playingBoard[3] == symbol && playingBoard[4] == symbol && playingBoard[5] == symbol) ||
				(playingBoard[6] == symbol && playingBoard[7] == symbol && playingBoard[8] == symbol) ||
				(playingBoard[0] == symbol && playingBoard[3] == symbol && playingBoard[6] == symbol) ||
				(playingBoard[1] == symbol && playingBoard[4] == symbol && playingBoard[7] == symbol) ||
				(playingBoard[2] == symbol && playingBoard[5] == symbol && playingBoard[8] == symbol) ||
				(playingBoard[0] == symbol && playingBoard[4] == symbol && playingBoard[8] == symbol) ||
				(playingBoard[2] == symbol && playingBoard[4] == symbol && playingBoard[6] == symbol)
			) {
				return true;
			}
			return false;
		}

// game over
		function gameOver() {
			isGameOver = true;
			alert("Game over!");
			location.reload();
		}

// player's turn
		function playerTurn(cellId) {
			if (!isGameOver) {
				if (playingBoard[cellId] == "") {
					document.getElementsByClassName("cell")[cellId].innerText = playerSymbol;
					playingBoard[cellId] = playerSymbol;
					if (checkWinningCondition(playerSymbol)) {
						alert("You won!");
						gameOver();
					} else if (isBoardFull()) {
						alert("Tie game!");
						gameOver();
					} else {
						aiTurn();
					}
				}
			}
		}

// AI's turn
		function aiTurn() {
			let emptyCells = [];
			for (let i = 0; i < playingBoard.length; i++) {
				if (playingBoard[i] == "") {
					emptyCells.push(i);
				}
			}
			let randomCell = emptyCells[Math.floor(Math.random()*emptyCells.length)];
			document.getElementsByClassName("cell")[randomCell].innerText = aiSymbol;
			playingBoard[randomCell] = aiSymbol;
			if (checkWinningCondition(aiSymbol)) {
				alert("You lost!");
				gameOver();
			} else if (isBoardFull()) {
				alert("Tie game!");
				gameOver();
			}
		}
	</script>
	<style>
		#board {
			display: flex;
			flex-wrap: wrap;
			width: 300px;
			height: 300px;
			border: 2px solid black;
		}

.cell {
			width: 100px;
			height: 100px;
			font-size: 70px;
			text-align: center;
			line-height: 100px;
			border: 1px solid black;
			cursor: pointer;
		}
	</style>
</body>
</html>