apna-college · Chhayankadew19 · Jan 30, 2025
diff --git a/README.md b/README.md
@@ -1,3 +1 @@
-# Delta
-
-## Please use this repo to download your in-class starter codes.
+TIC-TAC-TOE !! 
diff --git a/background.mp3 b/background.mp3
diff --git a/error-2-126514.mp3 b/error-2-126514.mp3
diff --git a/game-over-arcade-6435.mp3 b/game-over-arcade-6435.mp3
diff --git a/gameover.gif b/gameover.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!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>tictactoe</li>
+        </ul>
+    </nav>
+<div class="gamecontainer">
+
+    <div class="container">
+
+        <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="info">
+        <h1>Welcomeeeee !!!!!</h1>
+        <div>
+            <span class="info">Turn for X</span>
+            <!-- <button id="reset">Reset</button> -->
+        </div>
+        <!-- <div class="img"> -->
+            <!-- <img src="gameover.gif" alt=""> -->
+        <!-- </div> -->
+    </div>
+
+</div>
+    <script src="sscript.js"></script>
+</body>
+</html>
diff --git a/sscript.js b/sscript.js
@@ -0,0 +1,72 @@
+console.log("Welcome to Tic Tac Toe")
+let music = new Audio("background.mp3")
+let audioTurn = new Audio("error-2-126514.mp3")
+let gameover = new Audio("game-over-arcade-6435.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('.img').getElementsByTagName('img')[0].style.width ="200px";
+            //document.querySelector(".line").style.width = "20vw";
+        }           document.querySelector('.info').innerText = boxtext[e[0]].innerText + " Won"
+
+    })
+}
+
+
+
+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;
+
+            }
+        }
+    })
+})
+
+
+
+
+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('.img').getElementsByTagName('img')[0].style.width = "0px";
+
+})
diff --git a/style.css b/style.css
@@ -0,0 +1,88 @@
+*{
+    margin: 0px;
+    padding: -11px;
+}
+
+
+nav{
+    background-color: black;
+    color: white;
+    height: 36px;
+    font-size: 30px;
+    display: flex;
+    text-align: center;
+    padding: 0px 67px;
+    font-family: fantasy;
+    align-content: space-around;
+}
+
+
+nav ul{
+    list-style-type: none;
+}
+.gamecontainer{
+background-color:white;
+display: flex;
+justify-content: center;
+margin-top: 50px;
+}
+.container{
+display: grid;
+grid-template-rows: repeat(3,10vw);
+grid-template-columns: repeat(3,10vw);
+}
+.container div{
+    border: 1px solid black;
+    font-size: 5vw;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.box:hover{
+    background-color: rgb(207, 230, 237);
+}
+.info{
+    padding: 34px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.img 
+{
+    width: 0;
+
+    transition: width 1s ease-in-out;
+}
+.box.br-0{
+    border-right: 0;
+}
+.box.bl-0{
+    border-left: 0;
+}
+.box.bt-0{
+    border-top: 0;
+}
+.box.bb-0
+{
+    border-bottom: 0;
+}
+#reset{
+margin: 0;
+padding: 6px;
+background-color: burlywood;
+border-radius: 2px;
+cursor: pointer;
+}
+@media screen and(max-width:800px) {
+    .gamecontainer{
+        flex-wrap: wrap;
+    }
+    .info{
+        margin-top: 34px;
+    }
+    .container{
+        display: grid;
+        grid-template-rows: (3,20vw);
+        grid-template-columns: repeat(3,20vw);
+    }
+}