Scribd
Upload
5 views

HTML code

The document contains the HTML, CSS, and JavaScript code for a Tic Tac Toe game. The HTML structure includes a game board, status display, and buttons for resetting and starting a new game. The CSS styles the game interface, while the JavaScript handles game logic, including player turns, win conditions, and game state management.

Uploaded by

catherinewhite00500
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

HTML code

The document contains the HTML, CSS, and JavaScript code for a Tic Tac Toe game. The HTML structure includes a game board, status display, and buttons for resetting and starting a new game. The CSS styles the game interface, while the JavaScript handles game logic, including player turns, win conditions, and game state management.

Uploaded by

catherinewhite00500
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML code

<div id="game">
<h1>Tic Tac Toe</h1>
<div 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 id="status"></div>
<button id="resetButton">Reset Game</button>
</div>

<div id="resultScreen" class="hidden">


<h2 id="resultMessage"></h2>
<button id="newGameButton">New Game</button>
</div>

CSS code
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to right, #ff7e5f, #feb47b);
margin: 0;
}

#game, #resultScreen {
text-align: center;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#board {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 5px;
margin: 20px auto;
}

.cell {
width: 100px;
height: 100px;
background-color: white;
border: 2px solid #333;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
cursor: pointer;
}

.cell:hover {
background-color: #e0e0e0;
}

#status {
margin-top: 20px;
font-size: 18px;
}

.hidden {
display: none;
}

JavaScript
const cells = document.querySelectorAll('.cell');
const statusDisplay = document.getElementById('status');
const resetButton = document.getElementById('resetButton');
const resultScreen = document.getElementById('resultScreen');
const resultMessage = document.getElementById('resultMessage');
const newGameButton = document.getElementById('newGameButton');

let currentPlayer = 'X';


let gameActive = true;
let boardState = ['', '', '', '', '', '', '', '', ''];

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]
];

function handleCellClick(event) {
const clickedCell = event.target;
const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index'));

if (boardState[clickedCellIndex] !== '' || !gameActive) {


return;
}

boardState[clickedCellIndex] = currentPlayer;
clickedCell.innerText = currentPlayer;

checkResult();
}

function checkResult() {
let roundWon = false;

for (let i = 0; i < winningConditions.length; i++) {


const [a, b, c] = winningConditions[i];
if (boardState[a] === '' || boardState[b] === '' || boardState[c] === '') {
continue;
}
if (boardState[a] === boardState[b] && boardState[a] === boardState[c]) {
roundWon = true;
break;
}
}

if (roundWon) {
gameActive = false;
displayResult(`Player ${currentPlayer} has won!`);
return;
}
if (!boardState.includes('')) {
gameActive = false;
displayResult('Game ended in a draw!');
return;
}

currentPlayer = currentPlayer === 'X' ? 'O' : 'X';


statusDisplay.innerText = `It's ${currentPlayer}'s turn`;
}

function displayResult(message) {
resultMessage.innerText = message;
resultScreen.classList.remove('hidden');
document.getElementById('game').classList.add('hidden');
}

function resetGame() {
currentPlayer = 'X';
gameActive = true;
boardState = ['', '', '', '', '', '', '', '', ''];
statusDisplay.innerText = `It's ${currentPlayer}'s turn`;

cells.forEach(cell => {
cell.innerText = '';
});

resultScreen.classList.add('hidden');
document.getElementById('game').classList.remove('hidden');
}

function startNewGame() {
resetGame();
resultScreen.classList.add('hidden');
}

// Event Listeners
cells.forEach(cell => cell.addEventListener('click', handleCellClick));
resetButton.addEventListener('click', resetGame);
newGameButton.addEventListener('click', startNewGame);

// Initial Status
statusDisplay.innerText = `It's ${currentPlayer}'s turn`;

You might also like