Version 2

Code

<!DOCTYPE html>

<head>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

background-color: #f8f9fa;

}

h1 {

color: #007bff;

}

.board {

display: grid;

grid-template-columns: repeat(3, 100px);

grid-template-rows: repeat(3, 100px);

gap: 5px;

margin: 20px auto;

width: 320px;

}

.cell {

width: 100px;

height: 100px;

font-size: 2.5em;

font-weight: bold;

text-align: center;

line-height: 100px;

background-color: #f0f0f0;

border: 2px solid #000;

cursor: pointer;

transition: background-color 0.3s ease;

}

.cell:hover {

background-color: #ddd;

}

.winner, .turn {

font-size: 1.5em;

margin-top: 20px;

}

.turn {

font-size: 1.2em;

color: #28a745;

}

button, select {

margin-top: 10px;

padding: 10px;

font-size: 1em;

cursor: pointer;

background-color: #007bff;

color: white;

border: none;

border-radius: 5px;

transition: background-color 0.3s;

}

button:hover {

background-color: #0056b3;

}

</style>

</head>

<body>

<label for="playerSelect">Choose your player:</label>

</select>

<button onclick="startGame()">Start Game</button>

<div class="turn" id="turnMessage">Player X's turn</div>

<button onclick="resetGame()" id="resetButton" style="display: none;">Play Again</button>

let board = ["", "", "", "", "", "", "", "", ""];

let currentPlayer = "X";

let gameOver = false;

let playerChoice = "X";

let turnMessage = document.getElementById("turnMessage");

let winnerMessage = document.getElementById("winnerMessage");

let resetButton = document.getElementById("resetButton");

const winSound = new Audio("https://www.soundjay.com/button/beep-07.wav");

const drawSound = new Audio("https://www.soundjay.com/button/beep-09.wav");

function startGame() {

playerChoice = document.getElementById("playerSelect").value;

currentPlayer = playerChoice;

gameOver = false;

board = ["", "", "", "", "", "", "", "", ""];

winnerMessage.innerText = "";

turnMessage.innerText = `Player ${currentPlayer}'s turn`;

resetButton.style.display = "none";

createBoard();

}

function createBoard() {

let boardElement = document.getElementById("board");

boardElement.innerHTML = "";

board.forEach((cell, index) => {

let cellElement = document.createElement("div");

cellElement.classList.add("cell");

cellElement.innerText = cell;

cellElement.addEventListener("click", () => makeMove(index));

boardElement.appendChild(cellElement);

});

}

function makeMove(index) {

if (!gameOver && board[index] === "") {

board[index] = currentPlayer;

checkWinner();

currentPlayer = currentPlayer === "X" ? "O" : "X";

turnMessage.innerText = `Player ${currentPlayer}'s turn`;

createBoard();

}

function checkWinner() {

const winningCombinations = [

[0, 1, 2], [3, 4, 5], [6, 7, 8],

[0, 3, 6], [1, 4, 7], [2, 5, 8],

[0, 4, 8], [2, 4, 6]

];

for (let combination of winningCombinations) {

let [a, b, c] = combination;

if (board[a] && board[a] === board[b] && board[a] === board[c]) {

winnerMessage.innerText = `Player ${board[a]} Wins!`;

winSound.play();

gameOver = true;

resetButton.style.display = "inline-block";

return;

}

if (!board.includes("")) {

winnerMessage.innerText = "It's a Draw!";

drawSound.play();

gameOver = true;

resetButton.style.display = "inline-block";

}

function resetGame() {

startGame();

}

createBoard();

</script>

</body>

</html>