[go: up one dir, main page]
Scribd
Upload
4 views5 pages

Tic Tac Toe HTML.html

Uploaded by

mimi.ontopppp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views5 pages

Tic Tac Toe HTML.html

Uploaded by

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

<!

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 Game</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
background-color: #f5f5f5;
}

.container {
max-width: 500px;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}

.status {
text-align: center;
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 20px;
}

.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 5px;
margin-bottom: 20px;
}

.square {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: bold;
background-color: #fff;
border: 2px solid #ccc;
cursor: pointer;
transition: all 0.2s;
}

.square:hover {
background-color: #f0f0f0;
}

.square.x {
color: #3b82f6;
}

.square.o {
color: #ef4444;
}

button.reset {
display: block;
margin: 0 auto 20px;
padding: 10px 20px;
font-size: 1rem;
font-weight: 600;
color: white;
background-color: #3b82f6;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}

button.reset:hover {
background-color: #2563eb;
}

.history {
border: 1px solid #e5e5e5;
border-radius: 5px;
padding: 10px;
max-height: 150px;
overflow-y: auto;
background-color: #f9f9f9;
}

.history h2 {
margin-top: 0;
font-size: 1.2rem;
}

.history ul {
padding-left: 20px;
margin: 0;
}

.history li {
margin-bottom: 5px;
font-size: 0.9rem;
}

.empty-history {
color: #888;
font-style: italic;
text-align: center;
}

@media (max-width: 500px) {


.square {
width: 70px;
height: 70px;
}

.container {
padding: 15px;
width: 90%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Tic-Tac-Toe</h1>
<div class="status" id="status">Next player: X</div>

<div class="board" id="board">


<button class="square" data-index="0"></button>
<button class="square" data-index="1"></button>
<button class="square" data-index="2"></button>
<button class="square" data-index="3"></button>
<button class="square" data-index="4"></button>
<button class="square" data-index="5"></button>
<button class="square" data-index="6"></button>
<button class="square" data-index="7"></button>
<button class="square" data-index="8"></button>
</div>

<button class="reset" id="reset-button">Reset Game</button>

<div class="history-container">
<h2>Game History</h2>
<div class="history" id="history">
<p class="empty-history">No moves yet</p>
</div>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
// Game state
let squares = Array(9).fill(null);
let xIsNext = true;
let gameHistory = [];
let gameActive = true;

// DOM elements
const boardElement = document.getElementById('board');
const squareButtons = document.querySelectorAll('.square');
const statusElement = document.getElementById('status');
const resetButton = document.getElementById('reset-button');
const historyElement = document.getElementById('history');

// Add event listeners


squareButtons.forEach(button => {
button.addEventListener('click', handleSquareClick);
});

resetButton.addEventListener('click', resetGame);

// Handle square click


function handleSquareClick(event) {
const index = parseInt(event.target.dataset.index);

// Return if the square is already filled or game is over


if (squares[index] || !gameActive) {
return;
}

// Mark the square


const currentPlayer = xIsNext ? 'X' : 'O';
squares[index] = currentPlayer;
event.target.textContent = currentPlayer;
event.target.classList.add(currentPlayer.toLowerCase());

// Add to history
addToHistory(`${currentPlayer} placed at position ${index + 1}`);

// Check for winner


const winner = calculateWinner(squares);

if (winner) {
if (winner === 'draw') {
statusElement.textContent = "It's a draw!";
} else {
statusElement.textContent = `Winner: ${winner}`;
}
gameActive = false;
} else {
// Switch player
xIsNext = !xIsNext;
statusElement.textContent = `Next player: ${xIsNext ? 'X' :
'O'}`;
}
}

// Reset game
function resetGame() {
squares = Array(9).fill(null);
xIsNext = true;
gameHistory = [];
gameActive = true;

// Reset UI
squareButtons.forEach(button => {
button.textContent = '';
button.classList.remove('x', 'o');
});

statusElement.textContent = 'Next player: X';


historyElement.innerHTML = '<p class="empty-history">No moves
yet</p>';
}
// Add move to history
function addToHistory(move) {
gameHistory.push(move);

if (gameHistory.length === 1) {
historyElement.innerHTML = '<ul></ul>';
}

const ul = historyElement.querySelector('ul');
const li = document.createElement('li');
li.textContent = move;
ul.appendChild(li);
}

// Calculate winner
function calculateWinner(squares) {
const lines = [
[0, 1, 2], // top row
[3, 4, 5], // middle row
[6, 7, 8], // bottom row
[0, 3, 6], // left column
[1, 4, 7], // middle column
[2, 5, 8], // right column
[0, 4, 8], // diagonal
[2, 4, 6], // diagonal
];

// Check for winner


for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[a] ===
squares[c]) {
return squares[a];
}
}

// Check for draw


if (squares.every(square => square !== null)) {
return 'draw';
}

return null;
}
});
</script>
</body>
</html>

You might also like