Added Tic Tac Toe

kunjgit · Jun 12, 2024 · 390096a · 390096a
1 parent 8385bad
commit 390096a
Show file tree

Hide file tree

Showing 10 changed files with 434 additions and 1 deletion.
diff --git a/Games/Tic_tac_toe_responsive/README.md b/Games/Tic_tac_toe_responsive/README.md
@@ -0,0 +1,28 @@
+# **Game_Name** 
+
+Tic Tac Toe
+
+<br>
+
+## **Description 📃**
+- Tic Tac Toe is a traditional 2 player game. Where players take turn one by one to mark a cell out of 9
+
+
+## **functionalities 🎮**
+- If a player is able to mark 3 consecutive cells (horizontally/vertically/diagonally) then that player wins the game.
+- If no player is able to mark 3 consecutive cells, then the game is a draw
+
+<br>
+
+## **How to play? 🕹️**
+- Firstly player X takes turn and clicks on a cell of their choice
+- The cell is filled with an X
+- Now player O will mark a cell and fills it by a O
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+[image](/Games/Tic_tac_toe_responsive/assets/images/Tic_tac_toe_responsive.png)
+
diff --git a/Games/Tic_tac_toe_responsive/assets/images/PointerBody.png b/Games/Tic_tac_toe_responsive/assets/images/PointerBody.png
diff --git a/Games/Tic_tac_toe_responsive/assets/images/PointerHover.png b/Games/Tic_tac_toe_responsive/assets/images/PointerHover.png
diff --git a/Games/Tic_tac_toe_responsive/assets/images/PointerText.png b/Games/Tic_tac_toe_responsive/assets/images/PointerText.png
diff --git a/Games/Tic_tac_toe_responsive/assets/images/Tic_tac_toe_responsive.png b/Games/Tic_tac_toe_responsive/assets/images/Tic_tac_toe_responsive.png
diff --git a/Games/Tic_tac_toe_responsive/index.html b/Games/Tic_tac_toe_responsive/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tic Tac Toe</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+</head>
+<body>
+
+
+        <div class="phoneUi">
+
+            <div class="notch">
+              <h3>Tic Tac Toe</h3>  
+              <p>The easiest one</p>
+            </div>
+
+            <div class="screen" >
+                <div class="screenHeader" >
+                    <div class="greenBars">
+                        <span  style="background-color: #EF4F1E;"></span>
+                    </div>
+
+                    <div class="circleDiv">
+                       <span  style=" background-color: #FF8477;" ></span> 
+                       <span  style=" background-color: #FFC700;" ></span> 
+                       <span  style=" background-color: #C8B8FF;" ></span> 
+                    </div>
+
+                </div>
+
+                <div class="displayDiv">
+                      <p class="display"></p>
+                      <i class="fa-solid fa-arrow-rotate-left fa-lg" id="restart"></i>
+                </div>
+
+                <div class="content">
+                    <div class="gameBox">
+                       <div class="cell"></div>
+                       <div class="cell"></div>
+                       <div class="cell"></div>
+                       <div class="cell"></div>
+                       <div class="cell"></div>
+                       <div class="cell"></div>
+                       <div class="cell"></div>
+                       <div class="cell"></div>
+                       <div class="cell"></div>
+                    </div>
+                </div>
+                <footer>
+                    Designed & Developed with ❤️ by <a href="https://github.com/ThisIsSahaj"><span style="color: #f4592a;"><i>This Is Sahaj</i></span></a>
+                </footer>
+            </div>
+
+        </div>
+</body>
+
+<script src="script.js"></script>
+</html>
diff --git a/Games/Tic_tac_toe_responsive/script.js b/Games/Tic_tac_toe_responsive/script.js
@@ -0,0 +1,101 @@
+const cells = document.querySelectorAll('.cell');
+const display = document.querySelector('.display');
+let restart = document.querySelector('#restart');
+
+display.innerText = "X's turn"
+let count = 0;
+let xTurn;
+
+const winCombinations = [
+    [0, 1, 2],
+    [0, 3, 6],
+    [0, 4, 8],
+    [1, 4, 7],
+    [2, 5, 8],
+    [2, 4, 6],
+    [3, 4, 5],
+    [6, 7, 8],
+];
+
+const handleClick = (cell) => {
+    let curCell = cell.target;
+    count++;
+
+    if (xTurn) {
+        curCell.innerText = 'X';
+        display.innerText = "O's turn"
+        xTurn = false;
+    }
+    else {
+        curCell.innerText = 'O';
+        display.innerText = "X's turn"
+        xTurn = true;
+    }
+
+    if (count == 9) {
+        console.log(count);
+        checkDraw();
+        return;
+    }
+    getWinner();
+}
+
+const startGame = () => {
+    xTurn = true;
+
+    cells.forEach((element) => {
+        element.removeEventListener('click', handleClick);
+        element.addEventListener('click', handleClick, { once: true }        // so that a cell can be clicked only once
+        )
+    })
+}
+startGame();
+
+
+
+const showWinner = (winner) => {
+    display.innerText = `${winner} won 🍾`;
+}
+
+
+const getWinner = () => {
+
+    for (let combinations of winCombinations) {
+
+        const pos1 = cells[combinations[0]].innerText;
+        const pos2 = cells[combinations[1]].innerText;
+        const pos3 = cells[combinations[2]].innerText;
+
+        if (pos1 != "", pos2 != "", pos3 != "") {
+
+            if (pos1 === pos2 && pos2 === pos3) {
+                showWinner(pos1);
+                return true;
+            }
+        }
+
+    }
+    return false;
+}
+
+
+const checkDraw = () => {
+    cells.forEach(cell => {
+        if (cell.innerText !== "" && !getWinner()) {
+            display.innerText = "Draw!🤝";
+        }
+    })
+}
+
+const restartGame = () => {
+    cells.forEach(cell => {
+        cell.innerText = "";
+        count = 0;
+        display.innerText = "X's turn"
+        startGame();
+
+
+    })
+}
+
+restart.addEventListener('click', restartGame)