<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>
/* Full-screen styles */
html, body {
height: 100%;
margin: 0;
overflow: hidden; /* Prevent scrolling */
}
/* Cool gradient background with animation */
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Game container */
.game-container {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 15px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
max-width: 400px; /* Limit width for better readability */
}
/* Stylish title */
h1 {
font-size: 3rem;
margin-bottom: 20px;
font-family: 'Orbitron', sans-serif;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
0% {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080;
}
100% {
text-shadow: 0 0 10px #fff, 0 0 20px #ff0080, 0 0 30px #ff0080, 0 0 40px #ff0080, 0 0 50px #ff0080;
}
}
/* Game board */
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 20px auto;
width: 300px;
height: 300px;
}
/* Game cells */
.cell {
background-color: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
display: flex;
justify-content: center;
align-items: center;
font-size: 2.5rem;
font-family: 'Orbitron', sans-serif;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.cell:hover {
background-color: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
.cell:active {
transform: scale(0.95);
}
/* Status text */
#status {
font-size: 1.2rem;
margin-top: 20px;
font-family: 'Orbitron', sans-serif;
animation: fadeInOut 2s ease-in-out infinite;
}
@keyframes fadeInOut {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 1;
}
}
/* Reset button */
#reset-button {
padding: 10px 20px;
font-size: 1rem;
background-color: #ff6f61;
color: #fff;
border: none;
border-radius: 25px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
margin-top: 20px;
font-family: 'Orbitron', sans-serif;
}
#reset-button:hover {
background-color: #ff3b2f;
transform: scale(1.05);
}
#reset-button:active {
transform: scale(0.95);
}
/* Add a cool font for the title */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');
</style>
</head>
<body>
<div class="game-container">
<h1>Tic-Tac-Toe</h1>
<div class="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">Player X's turn</div>
<button id="reset-button">Reset Game</button>
</div>
<script>
const board = document.querySelector(".board");
const cells = document.querySelectorAll(".cell");
const statusText = document.getElementById("status");
const resetButton = document.getElementById("reset-button");
let currentPlayer = "X";
let gameState = ["", "", "", "", "", "", "", "", ""]; // Represents the game board
let gameActive = true;
// Winning conditions
const winningConditions = [
[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
];
// Function to handle cell click
function handleCellClick(event) {
const clickedCell = event.target;
const clickedCellIndex = parseInt(clickedCell.getAttribute("data-index"));
// Check if the cell is already filled or the game is over
if (gameState[clickedCellIndex] !== "" || !gameActive) {
return;
}
// Update the game state and UI
gameState[clickedCellIndex] = currentPlayer;
clickedCell.textContent = currentPlayer;
// Check for a winner
checkForWinner();
}
// Function to check for a winner
function checkForWinner() {
let roundWon = false;
for (let condition of winningConditions) {
const [a, b, c] = condition;
if (
gameState[a] !== "" &&
gameState[a] === gameState[b] &&
gameState[a] === gameState[c]
) {
roundWon = true;
break;
}
}
if (roundWon) {
statusText.textContent = `Player ${currentPlayer} wins!`;
gameActive = false;
return;
}
// Check for a draw
if (!gameState.includes("")) {
statusText.textContent = "It's a draw!";
gameActive = false;
return;
}
// Switch players
currentPlayer = currentPlayer === "X" ? "O" : "X";
statusText.textContent = `Player ${currentPlayer}'s turn`;
}
// Function to reset the game
function resetGame() {
gameState = ["", "", "", "", "", "", "", "", ""]; // Clear the game state
gameActive = true; // Reactivate the game
currentPlayer = "X"; // Reset to Player X's turn
statusText.textContent = `Player ${currentPlayer}'s turn`; // Update status text
cells.forEach((cell) => (cell.textContent = "")); // Clear all cells
}
// Add event listeners
cells.forEach((cell) => cell.addEventListener("click", handleCellClick));
resetButton.addEventListener("click", resetGame);
</script>
</body>
</html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.