Initial commit

dushyantrajotia · Jan 6, 2025 · 1b98a60 · 1b98a60
1 parent ba2b567
commit 1b98a60
Show file tree

Hide file tree

Showing 3 changed files with 232 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!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>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <header>
+    <h1>Tic Tac Toe</h1>
+    <p class="signature">Developed by <span>stoicraj</span></p>
+  </header>
+  <div class="container">
+    <div class="board">
+      <div class="cell" data-cell></div>
+      <div class="cell" data-cell></div>
+      <div class="cell" data-cell></div>
+      <div class="cell" data-cell></div>
+      <div class="cell" data-cell></div>
+      <div class="cell" data-cell></div>
+      <div class="cell" data-cell></div>
+      <div class="cell" data-cell></div>
+      <div class="cell" data-cell></div>
+    </div>
+    <button id="restartButton" class="restart-btn">Restart Game</button>
+  </div>
+
+  <div class="result-screen" id="resultScreen">
+    <p id="resultText"></p>
+    <button id="newGameButton">New Game</button>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,76 @@
+const cells = document.querySelectorAll('[data-cell]');
+const resultScreen = document.getElementById('resultScreen');
+const resultText = document.getElementById('resultText');
+const newGameButton = document.getElementById('newGameButton');
+const restartButton = document.getElementById('restartButton');
+
+let currentPlayer = 'X';
+let board = Array(9).fill(null);
+
+const winningCombinations = [
+  [0, 1, 2],
+  [3, 4, 5],
+  [6, 7, 8],
+  [0, 3, 6],
+  [1, 4, 7],
+  [2, 5, 8],
+  [0, 4, 8],
+  [2, 4, 6],
+];
+
+function handleClick(cell, index) {
+  if (board[index] || resultScreen.style.display === 'flex') return;
+
+  board[index] = currentPlayer;
+  cell.textContent = currentPlayer;
+
+  if (checkWin(currentPlayer)) {
+    showResult(`${currentPlayer} Wins!`);
+  } else if (board.every(cell => cell !== null)) {
+    showResult("It's a Draw!");
+  } else {
+    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
+  }
+}
+
+function checkWin(player) {
+  return winningCombinations.some(combination =>
+    combination.every(index => board[index] === player)
+  );
+}
+
+function showResult(message) {
+  resultText.textContent = message;
+  resultScreen.style.display = 'flex';
+}
+
+function resetGame() {
+  board.fill(null);
+  currentPlayer = 'X';
+  resultScreen.style.display = 'none';
+  cells.forEach(cell => {
+    cell.textContent = '';
+  });
+}
+
+// Add event listeners to cells and buttons
+function initializeGame() {
+  cells.forEach((cell, index) => {
+    cell.textContent = '';
+    cell.removeEventListener('click', () => handleClick(cell, index));
+    cell.addEventListener('click', () => handleClick(cell, index), { once: true });
+  });
+}
+
+newGameButton.addEventListener('click', () => {
+  resetGame();
+  initializeGame();
+});
+
+restartButton.addEventListener('click', () => {
+  resetGame();
+  initializeGame();
+});
+
+// Initialize the game on page load
+initializeGame();
diff --git a/styles.css b/styles.css
@@ -0,0 +1,120 @@
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100vh;
+  background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb);
+  background-size: 200% 200%;
+  animation: gradientAnimation 10s ease infinite;
+}
+
+@keyframes gradientAnimation {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+header {
+  text-align: center;
+  margin: 20px 0;
+}
+
+h1 {
+  font-size: 2.5em;
+  margin: 0;
+  color: #fff;
+}
+
+.signature {
+  font-size: 1em;
+  margin-top: 5px;
+  color: #fff;
+}
+
+.signature span {
+  font-weight: bold;
+  color: #ff0066;
+}
+
+.container {
+  max-width: 400px;
+  width: 90%;
+}
+
+.board {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  background-color: #333;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+.cell {
+  background-color: #fff;
+  width: 100px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2em;
+  font-weight: bold;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.cell[data-cell]:hover {
+  background-color: #f3f3f3;
+}
+
+.restart-btn {
+  margin-top: 20px;
+  background-color: #007BFF;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 1em;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+.restart-btn:hover {
+  background-color: #0056b3;
+}
+
+.result-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: #fff;
+  display: none;
+}
+
+.result-screen p {
+  font-size: 2em;
+  margin-bottom: 20px;
+}
+
+button {
+  background-color: #007BFF;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 1em;
+  cursor: pointer;
+  border-radius: 5px;
+}
+
+button:hover {
+  background-color: #0056b3;
+}