<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tic-tac-toe</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>tic-tac-toe!</h1>
<div id="game">
<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="result"></div>
<button id="restart">Restart</button>
<script src="script.js"></script>
</body>
</html>
/* styles.css */
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #b3e5fc, #e1f5fe);
background-size: 400% 400%;
animation: gradientBG 10s ease infinite;
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
h1 {
font-size: 2rem;
margin-bottom: 20px;
color: #333;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
#game {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
justify-content: center;
}
.cell {
width: 100px;
height: 100px;
background-color: #ffffff;
border: 2px solid #333;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s, transform 0.2s;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}
.cell:hover {
background-color: #bbdefb;
transform: scale(1.1);
}
#result {
margin-top: 20px;
font-size: 1.5rem;
font-weight: bold;
color: #444;
}
#restart {
margin-top: 10px;
padding: 10px 20px;
font-size: 1rem;
border: none;
background-color: #0288d1;
color: #FFFFFFF;
cursor: paint;
border-radius: 5px;
transition: background-color 0.3s;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}
#restart:hover {
background-color: #0277bd;
}
// script.js
const cells = document.querySelectorAll(".cell");
const resultDisplay = document.getElementById("result");
const restartButton = document.getElementById("restart");
let currentPlayer = "X";
let board = ["", "", "", "", "", "", "", "", ""]; // Empty board
let gameActive = true;
// Winning combinations
const winPatterns = [
[0, 1, 2], // Row 1
[3, 4, 5], // Row 2
[6, 7, 8], // Row 3
[0, 3, 6], // Column 1
[1, 4, 7], // Column 2
[2, 5, 8], // Column 3
[0, 4, 8], // Diagonal 1
[2, 4, 6], // Diagonal 2
];
// Handle cell click
function handleCellClick(e) {
const cell = e.target;
const index = cell.getAttribute("data-index");
if (board[index] !== "" || !gameActive) {
return; // Ignore if cell is already taken or game is over
}
board[index] = currentPlayer; // Update board
cell.textContent = currentPlayer; // Display current player's symbol
checkWin(); // Check for a win or draw
currentPlayer = currentPlayer === "X" ? "O" : "X"; // Switch player
}
// Check for a win or a draw
function checkWin() {
let winner = null;
for (const pattern of winPatterns) {
const [a, b, c] = pattern;
if (board[a] && board[a] === board[b] && board[a] === board[c]) {
winner = board[a];
break;
}
}
if (winner) {
resultDisplay.textContent = `${winner} wins!`;
gameActive = false;
return;
}
if (!board.includes("")) {
resultDisplay.textContent = "It's a draw!";
gameActive = false;
return;
}
}
// Restart the game
function restartGame() {
board = ["", "", "", "", "", "", "", "", ""];
gameActive = true;
currentPlayer = "X";
resultDisplay.textContent = "";
cells.forEach((cell) => (cell.textContent = ""));
}
// Add event listeners
cells.forEach((cell) => cell.addEventListener("click", handleCellClick));
restartButton.addEventListener("click", restartGame);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.