Tic tac
<!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 {
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.score-board {
display: flex;
justify-content: space-around;
width: 300px;
margin-bottom: 20px;
background-color: #ecf0f1;
padding: 10px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.score {
text-align: center;
}
.score span {
display: block;
font-size: 24px;
font-weight: bold;
}
.x-score {
color: #e74c3c;
}
.o-score {
color: #3498db;
}
.tie-score {
color: #7f8c8d;
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 8px;
margin-bottom: 20px;
background-color: #2c3e50;
padding: 10px;
border-radius: 10px;
}
.cell {
width: 100px;
height: 100px;
background-color: #ecf0f1;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.cell:hover {
background-color: #d6eaf8;
transform: scale(1.03);
}
.status {
font-size: 24px;
margin-bottom: 20px;
font-weight: bold;
color: #2c3e50;
padding: 10px 20px;
background-color: #ecf0f1;
border-radius: 5px;
}
.controls {
display: flex;
gap: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
font-weight: bold;
}
#reset {
background-color: #e74c3c;
color: white;
}
#reset:hover {
background-color: #c0392b;
}
#new-game {
background-color: #2ecc71;
color: white;
}
#new-game:hover {
background-color: #27ae60;
}
.x {
color: #e74c3c;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.o {
color: #3498db;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.winning-cell {
background-color: #f1c40f;
animation: pulse 0.5s infinite alternate;
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.05); }
}
.tie-message {
color: #7f8c8d;
font-style: italic;
}
</style>
<div class="score-board">
<div class="score x-score">
<div>X Wins</div>
<span id="x-wins">0</span>
</div>
<div class="score tie-score">
<div>Ties</div>
<span id="ties">0</span>
</div>
<div class="score o-score">
<div>O Wins</div>
<span id="o-wins">0</span>
</div>
</div>
<div class="status">Player X's turn</div>
<div class="board" 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 class="controls">
<button id="reset">Reset Board</button>
<button id="new-game">New Game</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const board = document.getElementById('board');
const cells = document.querySelectorAll('.cell');
const status = document.querySelector('.status');
const resetButton = document.getElementById('reset');
const newGameButton = document.getElementById('new-game');
// Score elements
const xWinsElement = document.getElementById('x-wins');
const oWinsElement = document.getElementById('o-wins');
const tiesElement = document.getElementById('ties');
// Game state
let currentPlayer = 'X';
let gameState = ['', '', '', '', '', '', '', '', ''];
let gameActive = true;
let scores = { xWins: 0, oWins: 0, ties: 0 };
const winningConditions = [
[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
];
function handleCellClick(e) {
const clickedCell = e.target;
const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index'));
if (gameState[clickedCellIndex] !== '' || !gameActive) {
return;
}
// Make the move
gameState[clickedCellIndex] = currentPlayer;
clickedCell.textContent = currentPlayer;
clickedCell.classList.add(currentPlayer.toLowerCase());
checkResult();
}
function checkResult() {
let roundWon = false;
// Check for win
for (let i = 0; i < winningConditions.length; i++) {
const [a, b, c] = winningConditions[i];
if (gameState[a] === '' || gameState[b] === '' || gameState[c] === '') {
continue;
}
if (gameState[a] === gameState[b] && gameState[b] === gameState[c]) {
roundWon = true;
// Highlight winning cells
document.querySelector(`[data-index="${a}"]`).classList.add('winning-cell');
document.querySelector(`[data-index="${b}"]`).classList.add('winning-cell');
document.querySelector(`[data-index="${c}"]`).classList.add('winning-cell');
break;
}
}
if (roundWon) {
status.textContent = `Player ${currentPlayer} wins! 🎉`;
gameActive = false;
// Update scores
if (currentPlayer === 'X') {
scores.xWins++;
xWinsElement.textContent = scores.xWins;
} else {
scores.oWins++;
oWinsElement.textContent = scores.oWins;
}
return;
}
// Check for tie
if (!gameState.includes('')) {
status.innerHTML = `<span class="tie-message">Game ended in a tie! 🤝</span>`;
gameActive = false;
// Update tie score
scores.ties++;
tiesElement.textContent = scores.ties;
return;
}
// Switch player
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
status.textContent = `Player ${currentPlayer}'s turn`;
}
function resetBoard() {
// Clear the board but keep scores
currentPlayer = 'X';
gameState = ['', '', '', '', '', '', '', '', ''];
gameActive = true;
status.textContent = `Player ${currentPlayer}'s turn`;
cells.forEach(cell => {
cell.textContent = '';
cell.classList.remove('x', 'o', 'winning-cell');
});
}
function newGame() {
// Reset everything including scores
scores = { xWins: 0, oWins: 0, ties: 0 };
xWinsElement.textContent = '0';
oWinsElement.textContent = '0';
tiesElement.textContent = '0';
resetBoard();
}
// Event listeners
cells.forEach(cell => cell.addEventListener('click', handleCellClick));
resetButton.addEventListener('click', resetBoard);
newGameButton.addEventListener('click', newGame);
});
</script>