Tic-Tac-Toe ka coding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0X Game (Tic-Tac-Toe)</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
background: #f4f4f4;
}
h1 {
color: #333;
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
justify-content: center;
margin: 20px auto;
}
.cell {
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 2px solid #ccc;
font-size: 36px;
cursor: pointer;
transition: background 0.3s;
}
.cell:hover {
background: #f1f1f1;
}
.cell.x {
color: #2196F3; /* Blue for X */
}
.cell.o {
color: #F44336; /* Red for O */
}
.status {
font-size: 24px;
margin: 10px;
}
button {
padding: 10px 20px;
font-size: 18px;
color: #fff;
background: #4CAF50;
border: none;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #45a049;
}
</style>
</head>
<body>
<h1>0X Game (Tic-Tac-Toe)</h1>
<div class="status" id="status">Player X's Turn</div>
<div class="board" id="board"></div>
<button onclick="resetGame()">Restart Game</button>
<script>
const board = document.getElementById("board");
const statusDisplay = document.getElementById("status");
let currentPlayer = "X";
let gameState = ["", "", "", "", "", "", "", "", ""];
let gameActive = true;
// Create board cells
function createBoard() {
board.innerHTML = "";
gameState.forEach((_, index) => {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.dataset.index = index;
cell.addEventListener("click", handleCellClick);
board.appendChild(cell);
});
}
// Handle cell click
function handleCellClick(e) {
const cell = e.target;
const index = cell.dataset.index;
if (gameState[index] !== "" || !gameActive) return;
gameState[index] = currentPlayer;
cell.textContent = currentPlayer;
cell.classList.add(currentPlayer.toLowerCase());
if (checkWinner()) {
statusDisplay.textContent = `Player ${currentPlayer} Wins! 🎉`;
gameActive = false;
} else if (gameState.every(cell => cell !== "")) {
statusDisplay.textContent = "It's a Draw! 😐";
gameActive = false;
} else {
currentPlayer = currentPlayer === "X" ? "O" : "X";
statusDisplay.textContent = `Player ${currentPlayer}'s Turn`;
}
}
// Check for winner
function checkWinner() {
const winPatterns = [
[0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
[0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
[0, 4, 8], [2, 4, 6] // Diagonals
];
return winPatterns.some(pattern => {
const [a, b, c] = pattern;
return gameState[a] &&
gameState[a] === gameState[b] &&
gameState[a] === gameState[c];
});
}
// Reset the game
function resetGame() {
currentPlayer = "X";
gameState = ["", "", "", "", "", "", "", "", ""];
gameActive = true;
statusDisplay.textContent = "Player X's Turn";
createBoard();
}
// Initialize the game
createBoard();
</script>
</body>
</html>
Comments
Post a Comment