Add the project

tajulafreen · tajulafreen · Dec 24, 2024 · Dec 24, 2024 · Dec 24, 2024 · Dec 24, 2024
commit cd7c06f608e15e99c8e2a565c0d589f1904de454
diff --git a/Source-Code/TicTacToe/index.html b/Source-Code/TicTacToe/index.html
@@ -0,0 +1,20 @@
+<!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="style.css">
+</head>
+<body>
+  <div class="container">
+    <h1>Tic Tac Toe</h1>
+    <div class="board" id="board">
+      <!-- Game Grid will be generated by JavaScript -->
+    </div>
+    <button id="restartBtn">Restart</button>
+    <div id="message"></div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Source-Code/TicTacToe/script.js b/Source-Code/TicTacToe/script.js
@@ -0,0 +1,72 @@
+/* eslint-disable no-use-before-define */
+// Get elements
+const board = document.getElementById('board');
+const restartBtn = document.getElementById('restartBtn');
+const message = document.getElementById('message');
+
+let currentPlayer = 'X';
+let gameBoard = Array(9).fill(null); // 3x3 grid, initialized to null (empty)
+
+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
+];
+
+// Check for a winner or draw
+const checkWinner = () => {
+  const winner = winPatterns.some(([a, b, c]) => {
+    if (
+      gameBoard[a]
+      && gameBoard[a] === gameBoard[b]
+      && gameBoard[a] === gameBoard[c]
+    ) {
+      message.textContent = `${gameBoard[a]} wins!`;
+      board.style.pointerEvents = 'none'; // Disable clicks after game ends
+      return true;
+    }
+    return false;
+  });
+
+  if (!winner && !gameBoard.includes(null)) {
+    message.textContent = "It's a draw!";
+  }
+};
+
+// Create the board cells
+const createBoard = () => {
+  board.innerHTML = ''; // Clear any existing cells
+  gameBoard.forEach((cell, index) => {
+    const cellElement = document.createElement('div');
+    cellElement.classList.add('cell');
+    cellElement.textContent = cell;
+    cellElement.addEventListener('click', () => handleCellClick(index));
+    board.appendChild(cellElement);
+  });
+};
+
+// Handle cell click
+const handleCellClick = (index) => {
+  if (gameBoard[index] !== null) return; // If cell is already filled, return
+  gameBoard[index] = currentPlayer;
+  currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; // Switch player
+  createBoard();
+  checkWinner();
+};
+
+// Restart the game
+restartBtn.addEventListener('click', () => {
+  gameBoard = Array(9).fill(null); // Reset the game board
+  currentPlayer = 'X'; // Reset to Player X
+  createBoard();
+  message.textContent = ''; // Clear the message
+  board.style.pointerEvents = 'auto'; // Enable clicks again
+});
+
+// Initialize the game
+createBoard();
diff --git a/Source-Code/TicTacToe/style.css b/Source-Code/TicTacToe/style.css
@@ -0,0 +1,61 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #f4f4f9;
+}
+
+.container {
+  text-align: center;
+}
+
+h1 {
+  margin-bottom: 20px;
+}
+
+.board {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  gap: 5px;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.cell {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  background-color: #fff;
+  border: 2px solid #333;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.cell:hover {
+  background-color: #f0f0f0;
+}
+
+button {
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+#message {
+  margin-top: 20px;
+  font-size: 18px;
+  font-weight: bold;
+}