kunjgit · kunjgit · May 27, 2023 · May 23, 2023 · May 23, 2023 · May 24, 2023
diff --git a/Games/Tic_Tac_Toe/README.md b/Games/Tic_Tac_Toe/README.md
@@ -0,0 +1,33 @@
+# **Tic_Tac_Toe** 
+
+---
+
+<br>
+
+## **Description 📃**
+- X and O have to play turn by turn.
+- whose ever turn it is ,it will be displayed on screen.
+
+## **functionalities 🎮**
+- There is sound on each and every turn.
+- The gif will appear if any one wins.
+- The game can also restart in between if required.
+<br>
+
+## **How to play? 🕹️**
+- X player always plays first.He can click on any 9 of the boxes.
+- Next is O's urn he can click in any 9 of the boxes.
+- If any 3 appear the same either X or O in row,column or digonally then he wins.
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+
+![image](../../assets/images/Tic_Tac_Toe.png)
+
+<br>
+
+## **Working video 📹**
+<!-- add your working video over here -->
diff --git a/Games/Tic_Tac_Toe/index.html b/Games/Tic_Tac_Toe/index.html
@@ -0,0 +1,43 @@
+<!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" />
+  </head>
+  <body>
+    <nav>
+      <ul>
+        <li>MyTicTacToe</li>
+      </ul>
+    </nav>
+
+    <div class="gameContainer">
+        <div class="container">
+          <div class="line"></div>
+        <div class="box bt-0 bl-0"><span class="boxtext"></span></div>
+        <div class="box bt-0"><span class="boxtext"></span></div>
+        <div class="box bt-0 br-0"><span class="boxtext"></span></div>
+        <div class="box bl-0"><span class="boxtext"></span></div>
+        <div class="box"><span class="boxtext"></span></div>
+        <div class="box br-0"><span class="boxtext"></span></div>
+        <div class="box bl-0 bb-0"><span class="boxtext"></span></div>
+        <div class="box bb-0"><span class="boxtext"></span></div>
+        <div class="box bb-0 br-0"><span class="boxtext"></span></div>
+      </div>
+      <div class="gameInfo">
+        <h1>Welcome to Simran's Tic Tac Toe Game</h1>
+        <div>
+          <span class="info">Turn for X</span>
+          <button id="reset">Reset</button>
+        </div>
+        <div class="imgbox">
+          <img src="sounds/excited.gif" alt="" />
+        </div>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Games/Tic_Tac_Toe/script.js b/Games/Tic_Tac_Toe/script.js
@@ -0,0 +1,67 @@
+console.log("Welcome to Tic Tac Toe")
+let music = new Audio("sounds/music.mp3")
+let audioTurn = new Audio("sounds/ting.mp3")
+let gameover = new Audio("sounds/gameover.mp3")
+let turn = "X"
+let isgameover = false;
+
+// Function to change the turn
+const changeTurn = ()=>{
+    return turn === "X"? "0": "X"
+}
+
+// Function to check for a win
+const checkWin = ()=>{
+    let boxtext = document.getElementsByClassName('boxtext');
+    let wins = [
+        [0, 1, 2, 5, 5, 0],
+        [3, 4, 5, 5, 15, 0],
+        [6, 7, 8, 5, 25, 0],
+        [0, 3, 6, -5, 15, 90],
+        [1, 4, 7, 5, 15, 90],
+        [2, 5, 8, 15, 15, 90],
+        [0, 4, 8, 5, 15, 45],
+        [2, 4, 6, 5, 15, 135],
+    ]
+    wins.forEach(e =>{
+        if((boxtext[e[0]].innerText === boxtext[e[1]].innerText) && (boxtext[e[2]].innerText === boxtext[e[1]].innerText) && (boxtext[e[0]].innerText !== "") ){
+            document.querySelector('.info').innerText = boxtext[e[0]].innerText + " Won"
+            isgameover = true
+            document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "200px";
+            document.querySelector(".line").style.transform = `translate(${e[3]}vw, ${e[4]}vw) rotate(${e[5]}deg)`
+            document.querySelector(".line").style.width = "20vw";
+        }
+    })
+}
+
+// Game Logic
+// music.play()
+let boxes = document.getElementsByClassName("box");
+Array.from(boxes).forEach(element =>{
+    let boxtext = element.querySelector('.boxtext');
+    element.addEventListener('click', ()=>{
+        if(boxtext.innerText === ''){
+            boxtext.innerText = turn;
+            turn = changeTurn();
+            audioTurn.play();
+            checkWin();
+            if (!isgameover){
+                document.getElementsByClassName("info")[0].innerText  = "Turn for " + turn;
+            } 
+        }
+    })
+})
+
+// Add onclick listener to reset button
+reset.addEventListener('click', ()=>{
+    let boxtexts = document.querySelectorAll('.boxtext');
+    Array.from(boxtexts).forEach(element => {
+        element.innerText = ""
+    });
+    turn = "X"; 
+    isgameover = false
+    document.querySelector(".line").style.width = "0vw";
+    document.getElementsByClassName("info")[0].innerText  = "Turn for " + turn;
+    document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = "0px"
+})
+
diff --git a/Games/Tic_Tac_Toe/sounds/excited.gif b/Games/Tic_Tac_Toe/sounds/excited.gif
diff --git a/Games/Tic_Tac_Toe/sounds/gameover.mp3 b/Games/Tic_Tac_Toe/sounds/gameover.mp3
diff --git a/Games/Tic_Tac_Toe/sounds/music.mp3 b/Games/Tic_Tac_Toe/sounds/music.mp3
diff --git a/Games/Tic_Tac_Toe/sounds/ting.mp3 b/Games/Tic_Tac_Toe/sounds/ting.mp3
diff --git a/Games/Tic_Tac_Toe/style.css b/Games/Tic_Tac_Toe/style.css
@@ -0,0 +1,119 @@
+@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&family=Roboto&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+}
+
+nav{
+   background-color: rgb(37, 9, 37);
+    color: white;
+    height: 65px;
+    font-size: 27px;
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+    font-family: 'Roboto', sans-serif;
+}
+
+nav ul{
+    list-style-type: none;
+}
+
+.gameContainer{ 
+    display: flex;
+    justify-content: center;
+    margin-top: 50px;
+}
+
+.container{
+    display: grid;
+    grid-template-rows: repeat(3, 10vw);
+    grid-template-columns: repeat(3, 10vw);
+    font-family: 'Roboto', sans-serif;
+    position: relative;
+}
+
+.box{
+    border: 2px solid black;
+    font-size: 8vw;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.box:hover{
+    background-color: rgb(242, 234, 250);
+}
+
+.info {
+    font-size: 22px;
+}
+
+.gameInfo{
+    padding: 0 34px;
+    font-family: 'Baloo Bhaina 2', cursive;
+    color: blue;
+}
+
+.gameInfo h1{
+    font-size: 2.5rem;
+}
+
+.imgbox img{
+    width: 0;
+    transition: width 1s ease-in-out;
+}
+
+.br-0{
+    border-right: 0;
+}
+
+.bl-0{
+    border-left: 0;
+}
+
+.bt-0{
+    border-top: 0;
+}
+
+.bb-0{
+    border-bottom: 0;
+}
+
+#reset {
+    margin: 0 23px;
+    padding: 1px 18px;
+    background: #f3e7f9;
+    border-radius: 6px;
+    cursor: pointer;
+    font-family: 'Baloo Bhaina 2';
+    font-size: 15px;
+    font-weight: bolder;
+}
+
+.line{
+    background-color: black;
+    height: 3px;
+    width: 0;
+    position: absolute;
+    background-color: #911d91;
+    transition: width 1s ease-in-out;
+}
+
+@media screen and (max-width: 950px)
+{
+    .gameContainer{
+        flex-wrap: wrap;
+    }
+    .gameInfo{
+        margin-top: 34px;
+    }
+    .gameInfo h1{
+        font-size: 1.5rem;
+    }
+    .container { 
+        grid-template-rows: repeat(3, 20vw);
+        grid-template-columns: repeat(3, 20vw);
+    }
+}
diff --git a/README.md b/README.md
@@ -103,7 +103,7 @@ Also join the discord server for GameZone and start collaborating with others
 | 2 | [Tilting Maze](https://github.com/kunjgit/GameZone/tree/main/Games/Tilting_Maze)|
 | 3 | [Simon Game Challenge](https://github.com/kunjgit/GameZone/tree/main/Games/Simon_Game_Challenge)|
 | 4 | [Snake Game](https://github.com/kunjgit/GameZone/tree/main/Games/Snake_Game)|
-| 5 | [Dino Runner Game](https://github.com/kunjgit/GameZone/tree/main/Games/Dino_Runner_Game)|    
+| 5 | [Dino Runner Game](https://github.com/kunjgit/GameZone/tree/main/Games/Dino_Runner_Game)|   
 | 6 | [Whack a Mole](https://github.com/kunjgit/GameZone/tree/main/Games/Whack_a_Mole)|
 | 7 | [Doraemon Jump](https://github.com/kunjgit/GameZone/tree/main/Games/Doraemon_Jump)| 
 | 8 | [Black Jack](https://github.com/kunjgit/GameZone/tree/main/Games/Black_Jack)|
@@ -123,6 +123,7 @@ Also join the discord server for GameZone and start collaborating with others
 | 22 | [Alphabet Game](https://github.com/kunjgit/GameZone/tree/main/Games/Alphabet)|
 | 23 | [Candy Crush](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Crush)|
 | 24 | [Word Association Game](https://github.com/kunjgit/GameZone/tree/main/Games/Word_Association_Game)|
+| 25 | [Tic Tac Toe](https://github.com/kunjgit/GameZone/tree/main/Games/Tic_Tac_Toe)|
 
 </center>
 

diff --git a/assets/images/Tic_Tac_Toe.png b/assets/images/Tic_Tac_Toe.png