Use this html code to make your own Tic Tac Toe game. HTML Code for Tic tac toe Game with beautiful interface.
<!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 | Beautiful Game By Tipstv4you</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial Rounded MT Bold', Arial, sans-serif;
}
body {
background: linear-gradient(135deg, #1e1e1e, #2d2d2d);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.scene {
position: absolute;
display: none;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.start-scene {
animation: fadeIn 1s ease-out;
}
.game-container {
background: rgba(255, 255, 255, 0.1);
padding: 2rem;
border-radius: 20px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.game-board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 2rem;
}
.cell {
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
.cell:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
}
.cell.x {
color: #ff4757;
}
.cell.o {
color: #2ed573;
}
button {
padding: 1rem 2rem;
font-size: 1.2rem;
border: none;
border-radius: 10px;
background: #2ed573;
color: white;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 2px;
}
button:hover {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(46, 213, 115, 0.5);
}
.result-scene {
text-align: center;
color: white;
animation: slideUp 0.5s ease-out;
}
.result-text {
font-size: 3rem;
margin-bottom: 2rem;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-50px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(100px); }
to { opacity: 1; transform: translateY(0); }
}
.title {
font-size: 4rem;
color: white;
text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.active {
display: flex;
}
</style>
</head>
<body>
<!-- Start Scene -->
<div class="scene start-scene active">
<h1 class="title">Tic Tac Toe</h1>
<button onclick="startGame()">Start Game</button>
</div>
<!-- Game Scene -->
<div class="scene game-scene">
<div class="game-container">
<div class="game-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>
<button onclick="resetGame()">Restart Game</button>
</div>
</div>
<!-- Result Scene -->
<div class="scene result-scene">
<div class="result-text" id="result-text">You Win! 🎉</div>
<button onclick="resetGame()">Play Again</button>
</div>
<script>
let currentPlayer = 'X';
let gameBoard = ['', '', '', '', '', '', '', '', ''];
let gameActive = true;
function startGame() {
document.querySelector('.start-scene').classList.remove('active');
document.querySelector('.game-scene').classList.add('active');
initializeGame();
}
function initializeGame() {
const cells = document.querySelectorAll('.cell');
cells.forEach(cell => {
cell.classList.remove('x', 'o');
cell.textContent = '';
cell.addEventListener('click', handleCellClick);
});
gameBoard = ['', '', '', '', '', '', '', '', ''];
currentPlayer = 'X';
gameActive = true;
}
function handleCellClick(e) {
const cell = e.target;
const index = cell.dataset.index;
if (gameBoard[index] !== '' || !gameActive) return;
gameBoard[index] = currentPlayer;
cell.textContent = currentPlayer;
cell.classList.add(currentPlayer.toLowerCase());
if (checkWin()) {
showResult(`${currentPlayer} Wins! 🎉`);
gameActive = false;
return;
}
if (checkDraw()) {
showResult("Draw! 🤝");
gameActive = false;
return;
}
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}
function checkWin() {
const winPatterns = [
[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
];
return winPatterns.some(pattern =>
pattern.every(index => gameBoard[index] === currentPlayer)
);
}
function checkDraw() {
return gameBoard.every(cell => cell !== '');
}
function showResult(text) {
document.querySelector('.game-scene').classList.remove('active');
const resultScene = document.querySelector('.result-scene');
document.getElementById('result-text').textContent = text;
resultScene.classList.add('active');
}
function resetGame() {
document.querySelector('.result-scene').classList.remove('active');
startGame();
}
// Keyboard controls
document.addEventListener('keydown', (e) => {
if (e.key === 'r') resetGame();
if (e.key === 'n') startGame();
});
</script>
</body>
</html>
Comments
Post a Comment