Tic Tac Toe Game

AryanMittal11 · Sep 4, 2024 · 606feb2 · 606feb2
1 parent 68035b7
commit 606feb2
Show file tree

Hide file tree

Showing 5 changed files with 226 additions and 0 deletions.
diff --git a/Tic Tac Toe/index.html b/Tic Tac Toe/index.html
@@ -0,0 +1,40 @@
+<!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>
+    <nav>
+        <ul>
+            <li>Welcome to Tic Tac Toe Game</li>
+        </ul>
+    </nav>
+    <div class="main">
+        <div class="grids">
+            <div class="line"></div>
+            <div class="box bt bl"><span class="boxtext"></span></div>
+            <div class="box bt"><span class="boxtext"></span></div>
+            <div class="box bt br"><span class="boxtext"></span></div>
+            <div class="box bl"><span class="boxtext"></span></div>
+            <div class="box"><span class="boxtext"></span></div>
+            <div class="box br"><span class="boxtext"></span></div>
+            <div class="box bl bb"><span class="boxtext"></span></div>
+            <div class="box bb"><span class="boxtext"></span></div>
+            <div class="box bb br"><span class="boxtext"></span></div>
+        </div>
+        <div class="gameinfo">
+            <div class="content">
+                <span class="info">Turn of X</span>
+                <button id="reset">Reset</button>
+            </div>
+            <div class="imgbox">
+                <img src="win img.gif" alt="">
+            </div>
+        </div>
+    </div>
+</body>
+<script src="script.js"></script>
+</html>
diff --git a/Tic Tac Toe/script.js b/Tic Tac Toe/script.js
@@ -0,0 +1,57 @@
+let audioTurn = new Audio("turn.mp3");
+
+let turn = "X";
+let isgameOver = false;
+
+const changeTurn = ()=>{
+    return turn === "X"?"0":"X"
+}
+
+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 = "15vw"
+            document.querySelector(".line").style.width = "20vw";
+            document.querySelector(".line").style.transform = `translate(${e[3]}vw, ${e[4]}vw) rotate(${e[5]}deg)`;
+        }
+    })
+}
+
+let boxes = document.getElementsByClassName("box");
+Array.from(boxes).forEach(element=>{
+    let boxtext = element.querySelector(".boxtext");
+    element.addEventListener('click', ()=>{
+        boxtext.innerHTML = turn;
+        turn = changeTurn();
+        audioTurn.play();
+        checkWin();
+        if(!isgameOver){
+            document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
+        }
+    })
+})
+
+reset.addEventListener('click', () => {
+    let boxtext = document.querySelectorAll(".boxtext");
+    Array.from(boxtext).forEach(element => {
+        element.innerText = " "
+    });
+    turn = "X";
+    isgameOver = false;
+    document.querySelector(".line").style.width = "0";
+    document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
+    document.querySelector(".imgbox").getElementsByTagName("img")[0].style.width = "0px"
+})
diff --git a/Tic Tac Toe/style.css b/Tic Tac Toe/style.css
@@ -0,0 +1,129 @@
+@import url('https://fonts.googleapis.com/css2?family=Nerko+One&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nerko+One&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+}
+
+nav{
+    height: 65px;
+    background-color: blueviolet;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: "Nerko One", cursive;
+    font-size: 3vw;
+}
+
+nav ul{
+    list-style: none;
+}
+
+.main{
+    margin-top: 50px;
+    display: flex;
+    justify-content: center;
+}
+
+.grids{
+    display: grid;
+    grid-template-columns: repeat(3, 10vw);
+    grid-template-rows: repeat(3, 10vw);
+    position: relative;
+}
+
+.box{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid black;
+    font-size: 6vw;
+    font-family: "Roboto", sans-serif;
+}
+
+.box:hover{
+    background-color: rgb(244, 234, 255);
+}
+
+.bt{
+    border-top: 0;
+}
+
+.bb{
+    border-bottom: 0;
+}
+
+.bl{
+    border-left: 0;
+}
+
+.br{
+    border-right: 0;
+}
+
+.gameinfo{
+    margin-left: 130px;
+    font-family: "Roboto", sans-serif;
+    font-size: 2vw;
+    display: flex;
+    flex-direction: column;
+}
+
+.content{
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+button{
+    height: 30px;
+    width: 100px;
+    background: #8a2be2;
+    color: white;
+    font-size: 1vw;
+    cursor: pointer;
+}
+
+.imgbox img{
+    width: 0;
+    transition: width 1s ease-in-out;
+}
+
+.line{
+    background-color: #8a2be2;
+    width: 0;
+    height: 3px;
+    position: absolute;
+    transition: width 1s ease-in-out;
+}
+
+@media screen and (max-width: 650px)
+{
+    .main{
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .gameinfo{
+        font-size: 5vw;
+        margin-top: 30px;
+        margin-left: 0;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .grids{
+        grid-template-columns: repeat(3, 15vw);
+        grid-template-rows: repeat(3, 15vw);
+    }
+
+    button{
+        font-size: 2vw;
+    }
+
+    nav{
+        font-size: 6vw;
+    }
+}
diff --git a/Tic Tac Toe/turn.mp3 b/Tic Tac Toe/turn.mp3
diff --git a/Tic Tac Toe/win img.gif b/Tic Tac Toe/win img.gif