Tic Tac Toe, often called “Noughts and Crosses” in some parts of the world, is a classic and simple two-player strategy game that has been enjoyed by people of all ages for generations. The tic tac toe game is typically played on a 3×3 grid, although larger variants can be found as well.
Tic Tac Toe
Here’s a brief overview of how Tic Tac Toe is played:
- Game Setup: Tic Tac Toe is played on a 3×3 grid. Players take turns marking an empty square with their symbol (usually “X” for the first player and “O” for the second player). The goal is to be the first to form a line of three of your symbols in a row, column, or diagonal.
- The Gameplay: Players alternate turns, and each player can place their symbol in any unoccupied square on the grid. The strategy in Tic-Tac-Toe comes from trying to create your line of three while simultaneously blocking your opponent from achieving the same.
- Winning: The game can end in one of three ways:
- If a player successfully forms a line of three of their symbols in a row, column, or diagonal, they win the game.
- If all the squares on the grid are filled, and no player has won, the game is a draw (often referred to as a “cat’s game”).
- Strategy: Optimal Tic-Tac-Toe strategy for both players results in a draw if both players play perfectly. This makes Tic-Tac-Toe an excellent game for introducing the concept of strategy, tactics, and pattern recognition, especially to children.
Tic-Tac-Toe is not only a fun and engaging pastime but also a great tool for teaching problem-solving skills. It is often used in the field of computer science and artificial intelligence to demonstrate the basic game theory and simple algorithms can be designed to play Tic-Tac-Toe at an advanced level. The game’s simplicity is both its charm and its enduring appeal, making it a beloved and timeless classic in the world of board games.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic Tac Toe</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #282c35;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
text-align: center;
padding: 20px;
width: 350px;
}
h1 {
color: #333;
font-size: 24px;
margin: 0 0 20px;
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
margin: 10px 0;
}
.cell {
width: 100px;
height: 100px;
font-size: 36px;
border: 2px solid #333;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: #f2f2f2;
color: #333;
}
.cell.winner {
background-color: #4CAF50;
color: #fff;
}
.cell:empty {
background-color: #f2f2f2;
}
.cell:not(:empty) {
background-color: #f2f2f2;
}
.message {
color: #333;
font-size: 20px;
margin: 10px 0;
}
#reset {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<h1>Tic Tac Toe</h1>
<div class="board" id="board">
<div class="cell" data-index="0"></div>
<div class="cell" data-index="1"></div>
<div class="cell" data-index="2"></div>
<div class="cell" data-index="3"></div>
<div class="cell" data-index="4"></div>
<div class="cell" data-index="5"></div>
<div class="cell" data-index="6"></div>
<div class="cell" data-index="7"></div>
<div class="cell" data-index="8"></div>
</div>
<div class="message" id="message"></div>
<button id="reset">Reset</button>
</div>
<script>
const board = document.getElementById("board");
const cells = document.querySelectorAll(".cell");
const message = document.getElementById("message");
const resetButton = document.getElementById("reset");
let currentPlayer = "X";
let winner = null;
let winIndex = null; // Added this variable
// Winning combinations
const winCombos = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
cells.forEach(cell => {
cell.addEventListener("click", handleClick, { once: true });
});
resetButton.addEventListener("click", startGame);
function startGame() {
cells.forEach(cell => {
cell.textContent = "";
cell.classList.remove("winner");
});
currentPlayer = "X";
winner = null;
winIndex = null; // Reset winIndex
message.textContent = "";
board.style.pointerEvents = "auto";
cells.forEach(cell => {
cell.addEventListener("click", handleClick, { once: true });
});
}
function handleClick(e) {
const cell = e.target;
if (cell.textContent || winner) return;
cell.textContent = currentPlayer;
if (checkWinner(currentPlayer)) {
winner = currentPlayer;
cells[winCombos[winIndex][0]].classList.add("winner");
cells[winCombos[winIndex][1]].classList.add("winner");
cells[winCombos[winIndex][2]].classList.add("winner");
message.textContent = `Player ${currentPlayer} wins!`;
board.style.pointerEvents = "none";
} else if (isBoardFull()) {
message.textContent = "It's a draw!";
} else {
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
}
function checkWinner(player) {
for (let i = 0; i < winCombos.length; i++) {
const combo = winCombos[i];
if (
cells[combo[0]].textContent === player &&
cells[combo[1]].textContent === player &&
cells[combo[2]].textContent === player
) {
winIndex = i;
return true;
}
}
return false;
}
function isBoardFull() {
return [...cells].every(cell => cell.textContent);
}
startGame();
</script>
<script>
// Add animations using JavaScript
document.addEventListener("DOMContentLoaded", function () {
const message = document.getElementById("message");
const resetButton = document.getElementById("reset");
setTimeout(() => {
message.classList.add("fade-in");
resetButton.classList.add("fade-in");
}, 500);
});
</script>
</body>
</html>