Merge pull request #51 from tajulafreen/Tic_Tac_Toe

50Projects-HTML-CSS-JavaScript : Tic tac toe
tajulafreen · Dec 24, 2024 · b8b35d0 · b8b35d0
2 parents 818dff2 + 803a715
commit b8b35d0
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -540,6 +540,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Tic Tac Toe App</summary>
+<p>This is a simple Tic Tac Toe game built using HTML, CSS, and JavaScript. The game allows two players to alternate turns and try to win by getting three of their symbols (X or O) in a row, either horizontally, vertically, or diagonally. The game will automatically check for a winner or draw after each move, and players can restart the game at any time.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/TicTacToe/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/TicTacToe">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

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;
+}