Merge pull request #4619 from Saipradyumnagoud/main

Added New game Tic Tac Toe
kunjgit · Jun 20, 2024 · 5412315 · 5412315
2 parents 8d2f8cd + 21c287e
commit 5412315
Show file tree

Hide file tree

Showing 8 changed files with 178 additions and 0 deletions.
diff --git a/Games/Tic-tac-toe/README.md b/Games/Tic-tac-toe/README.md
@@ -0,0 +1,31 @@
+# **Tic Tac Toe** 
+
+---
+
+<br>
+
+## **Description 📃**
+<!-- add your game description here  -->
+- Tic Tac Toe is a classic two-player game where players take turns marking the spaces in a 3×3 grid. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game.
+
+## **Functionalities 🎮**
+<!-- add functionalities over here -->
+- Two-player game mode.
+- Visual representation of the game board.
+- Real-time updates of the game state.
+- Winning condition check and message display.
+- Winning animation with music.
+
+<br>
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+1. Open the `index.html` file in your browser.
+2. The first player (X) clicks on an empty cell to mark it.
+3. The second player (O) takes their turn by clicking on another empty cell.
+4. The game alternates turns between players X and O.
+5. The game checks for a winner after each turn. If a player has three marks in a row (horizontally, vertically, or diagonally), a winning message is displayed, and a winning animation is played.
+6. If all cells are filled without any player winning, the game ends in a draw.
+
+<br>
+
diff --git a/Games/Tic-tac-toe/index.html b/Games/Tic-tac-toe/index.html
@@ -0,0 +1,29 @@
+<!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>
+    <h1>Tic Tac Toe</h1>
+    <div class="game-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="message"></div>
+    <div id="winner-animation" class="hidden">
+        <img src="panda.avif" alt="Panda">
+        <audio id="win-music" src="win-music.mp3"></audio>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Tic-tac-toe/panda.avif b/Games/Tic-tac-toe/panda.avif
diff --git a/Games/Tic-tac-toe/script.js b/Games/Tic-tac-toe/script.js
@@ -0,0 +1,71 @@
+const cells = document.querySelectorAll('.cell');
+const message = document.getElementById('message');
+const winnerAnimation = document.getElementById('winner-animation');
+const winMusic = document.getElementById('win-music');
+let currentPlayer = 'X';
+let board = ['', '', '', '', '', '', '', '', ''];
+let gameActive = true;
+
+const winningConditions = [
+    [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 handleCellClick(event) {
+    const clickedCell = event.target;
+    const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index'));
+
+    if (board[clickedCellIndex] !== '' || !gameActive) {
+        return;
+    }
+
+    board[clickedCellIndex] = currentPlayer;
+    clickedCell.innerText = currentPlayer;
+    checkResult();
+}
+
+function checkResult() {
+    let roundWon = false;
+    for (let i = 0; i < winningConditions.length; i++) {
+        const winCondition = winningConditions[i];
+        let a = board[winCondition[0]];
+        let b = board[winCondition[1]];
+        let c = board[winCondition[2]];
+        if (a === '' || b === '' || c === '') {
+            continue;
+        }
+        if (a === b && b === c) {
+            roundWon = true;
+            break;
+        }
+    }
+
+    if (roundWon) {
+        message.innerText = `${currentPlayer} wins!`;
+        gameActive = false;
+        displayWinnerAnimation();
+        return;
+    }
+
+    let roundDraw = !board.includes('');
+    if (roundDraw) {
+        message.innerText = 'Draw!';
+        gameActive = false;
+        return;
+    }
+
+    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
+}
+
+function displayWinnerAnimation() {
+    winnerAnimation.classList.remove('hidden');
+    winMusic.play();
+}
+
+cells.forEach(cell => cell.addEventListener('click', handleCellClick));
diff --git a/Games/Tic-tac-toe/styles.css b/Games/Tic-tac-toe/styles.css
@@ -0,0 +1,46 @@
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: Arial, sans-serif;
+}
+
+h1 {
+  margin-top: 20px;
+}
+
+.game-board {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  gap: 5px;
+  margin-top: 20px;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  background-color: #f0f0f0;
+  border: 2px solid #333;
+  font-size: 2em;
+  cursor: pointer;
+}
+
+.hidden {
+  display: none;
+}
+
+#winner-animation {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+}
+
+#winner-animation img {
+  width: 200px;
+  height: auto;
+}
diff --git a/Games/Tic-tac-toe/win-music.mp3 b/Games/Tic-tac-toe/win-music.mp3
diff --git a/README.md b/README.md
@@ -795,6 +795,7 @@ This repository also provides one such platforms where contributers come over an
  | [Ganesh QR Maker](https://github.com/kunjgit/GameZone/tree/main/Games/Ganesh_QR_Maker) |
 
 |[Wheel_of_Fortunes](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Wheel_of_Fortunes)|
+|[Tic-tac-toe](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Tic-tac-toe)|
  </center>
 
 <br>

diff --git a/assets/images/Tic-tac-toe.png b/assets/images/Tic-tac-toe.png