Tic Tac Toe game
<!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 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: 'Comic Sans MS', cursive, sans-serif;
margin: 0;
background: radial-gradient(circle, #ff9a9e, #fad0c4);
animation: backgroundAnimation 10s infinite alternate;
}
@keyframes backgroundAnimation {
0% { background: radial-gradient(circle, #ff9a9e, #fad0c4); }
100% { background: radial-gradient(circle, #a1c4fd, #c2e9fb); }
}
h1 {
margin-bottom: 20px;
font-size: 3em;
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
}
.cell {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
font-weight: bold;
border: 2px solid #fff;
background: rgba(255, 255, 255, 0.9);
cursor: pointer;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
transition: transform 0.3s, background 0.3s;
}
.cell:hover {
transform: scale(1.1);
background: rgba(255, 255, 255, 1);
}
.cell.taken {
pointer-events: none;
background: rgba(200, 200, 200, 0.8);
}
.message {
margin-top: 20px;
font-size: 1.5em;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.restart {
margin-top: 10px;
padding: 10px 20px;
font-size: 1.2em;
cursor: pointer;
background: #ff9a9e;
border: none;
border-radius: 5px;
color: #fff;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
transition: background 0.3s, transform 0.3s;
}
.restart:hover {
background: #fad0c4;
transform: scale(1.1);
}
.mode {
margin-bottom: 20px;
font-size: 1.2em;
color: #fff;
}
</style>
</head>
<body>
<h1>Tic Tac Toe</h1>
<div class="mode">
<label>
<input type="radio" name="mode" value="human" checked> Play with Human
</label>
<label>
<input type="radio" name="mode" value="robot"> Play with Robot
</label>
</div>
<div class="board" id="board"></div>
<div class="message" id="message"></div>
<button class="restart" id="restart" style="display: none;">Restart Game</button>
<audio id="winSound" src="https://example.com/winning-music.mp3"></audio>
<audio id="loseSound" src="https://example.com/losing-music.mp3"></audio>
<audio id="backgroundMusic" src="https://example.com/nice-background-music.mp3" loop autoplay></audio>
<script>
const board = document.getElementById("board");
const message = document.getElementById("message");
const restartButton = document.getElementById("restart");
const modeSelector = document.querySelectorAll("input[name='mode']");
const winSound = document.getElementById("winSound");
const loseSound = document.getElementById("loseSound");
const backgroundMusic = document.getElementById("backgroundMusic");
let currentPlayer = "X";
let gameActive = true;
let playWithRobot = false;
const gameState = ["", "", "", "", "", "", "", "", ""];
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
modeSelector.forEach(option => {
option.addEventListener("change", () => {
playWithRobot = document.querySelector("input[name='mode']:checked").value === "robot";
restartGame();
});
});
function handleCellClick(event) {
const cell = event.target;
const cellIndex = cell.getAttribute("data-index");
if (gameState[cellIndex] !== "" || !gameActive) {
return;
}
makeMove(cellIndex, currentPlayer);
if (playWithRobot && gameActive && currentPlayer === "O") {
setTimeout(robotMove, 500); // Add a slight delay for a more natural feel
}
}
function makeMove(cellIndex, player) {
gameState[cellIndex] = player;
const cell = document.querySelector(`.cell[data-index='${cellIndex}']`);
cell.textContent = player;
cell.classList.add("taken");
if (checkWin()) {
message.textContent = `Player ${player} wins!`;
gameActive = false;
restartButton.style.display = "block";
player === "X" ? winSound.play() : loseSound.play();
return;
}
if (gameState.every(cell => cell !== "")) {
message.textContent = "It's a tie!";
gameActive = false;
restartButton.style.display = "block";
return;
}
currentPlayer = currentPlayer === "X" ? "O" : "X";
message.textContent = `Player ${currentPlayer}'s turn`;
}
function robotMove() {
// Prioritize winning
for (let condition of winningConditions) {
const [a, b, c] = condition;
if (gameState[a] === "O" && gameState[b] === "O" && gameState[c] === "") {
return makeMove(c, "O");
}
if (gameState[a] === "O" && gameState[c] === "O" && gameState[b] === "") {
return makeMove(b, "O");
}
if (gameState[b] === "O" && gameState[c] === "O" && gameState[a] === "") {
return makeMove(a, "O");
}
}
// Block opponent's win
for (let condition of winningConditions) {
const [a, b, c] = condition;
if (gameState[a] === "X" && gameState[b] === "X" && gameState[c] === "") {
return makeMove(c, "O");
}
if (gameState[a] === "X" && gameState[c] === "X" && gameState[b] === "") {
return makeMove(b, "O");
}
if (gameState[b] === "X" && gameState[c] === "X" && gameState[a] === "") {
return makeMove(a, "O");
}
}
// Take center if available
if (gameState[4] === "") {
return makeMove(4, "O");
}
// Take a corner if available
const corners = [0, 2, 6, 8];
for (let corner of corners) {
if (gameState[corner] === "") {
return makeMove(corner, "O");
}
}
// Take a random empty cell as a last resort
const emptyCells = gameState.map((val, index) => val === "" ? index : null).filter(val => val !== null);
const randomIndex = emptyCells[Math.floor(Math.random() * emptyCells.length)];
makeMove(randomIndex, "O");
}
function checkWin() {
return winningConditions.some(condition => {
const [a, b, c] = condition;
return gameState[a] && gameState[a] === gameState[b] && gameState[b] === gameState[c];
});
}
function restartGame() {
gameState.fill("");
currentPlayer = "X";
gameActive = true;
message.textContent = "Player X's turn";
restartButton.style.display = "none";
Array.from(board.children).forEach(cell => {
cell.textContent = "";
cell.classList.remove("taken");
});
}
function createBoard() {
gameState.forEach((_, index) => {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.setAttribute("data-index", index);
cell.addEventListener("click", handleCellClick);
board.appendChild(cell);
});
}
createBoard();
message.textContent = "Player X's turn";
restartButton.addEventListener("click", restartGame);
</script>