Add files via upload

princeraj07m · Aug 21, 2024 · 138b26a · 138b26a
commit 138b26a
Show file tree

Hide file tree

Showing 7 changed files with 287 additions and 0 deletions.
diff --git a/circle.png b/circle.png
diff --git a/cross.png b/cross.png
diff --git a/excited.gif b/excited.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!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>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+      <nav class="navbar">
+        <span class="yellow" >Tic Tac Toe</span>
+    </nav>
+    <div class="gamecontainer">
+              <div class="container">
+              <div class="line"></div>
+              <div class="tile"><span class="boxtext"></span></div>
+              <div class="tile"><span class="boxtext"></span></div>
+              <div class="tile"><span class="boxtext"></span></div>
+              <div class="tile"><span class="boxtext"></span></div>
+              <div class="tile"><span class="boxtext"></span></div>
+              <div class="tile"><span class="boxtext"></span></div>
+              <div class="tile"><span class="boxtext"></span></div>
+              <div class="tile"><span class="boxtext"></span></div>
+              <div class="tile"><span class="boxtext"></span></div>
+            </div>
+            <div class="gameinfo">
+              <h1>Tic Tac Toe</h1>
+              <div class="controls">
+                <span class="info">Turn for X</span>
+                  <button id="reset">Reset</button>
+              </div>
+              <div class="image">
+                <img src="excited.gif" alt="excited.gif">
+              </div>
+            </div>
+
+        </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,102 @@
+console.log("welcome to Tic Tac Toe");
+let music = new Audio("win.mp3");
+let boxes = document.querySelectorAll('.tile');
+let boxtext = document.querySelectorAll('.boxtext');
+let info = document.querySelector('.info');
+let image = document.querySelector('.image');
+let turnOf = document.getElementById("turn")
+
+let turn = "X";
+let isgameover = false;
+const changeTurn = ()=>{
+    return turn === "X" ? "O" : "X"
+}
+
+Array.from(boxes).forEach(element =>{
+    element.classList.add('hover');
+})
+
+const checkWin = () =>{
+    let wins = [
+      [0,1,2,0,-12,0],
+      [3,4,5,0,0,0],
+      [6,7,8,0,12,0],
+      [0,3,6,-12,0,90],
+      [1,4,7,0,0,90],
+      [2,5,8,12,0,90],
+      [0,4,8,0,0,45],
+      [2,4,6,0,0,-45],
+  ]
+
+  wins.forEach(e =>{
+      if( (boxtext[e[0]].innerText === boxtext[e[1]].innerText) && (boxtext[e[2]].innerText === boxtext[e[1]].innerText) && (boxtext[e[0]].innerText !== ""))
+      {
+          boxes[e[0]].classList.add('background');
+          boxes[e[1]].classList.add('background');
+          boxes[e[2]].classList.add('background');
+          boxtext[e[0]].style.color = "#fff";
+          boxtext[e[1]].style.color = "#fff";
+          boxtext[e[2]].style.color = "#fff";
+          info.innerText = boxtext[e[0]].innerText + " Won !";
+          isgameover = true;
+          image.getElementsByTagName('img')[0].style.width = "150px";
+          document.querySelector('.line').style.width = "72%";
+          document.querySelector('.line').style.transform = `translate(${e[3]}vw, ${e[4]}vw) rotate(${e[5]}deg)`;
+          music.play();
+
+          Array.from(boxes).forEach(element =>{
+            element.classList.remove('hover');
+        })
+    }
+
+
+
+  })
+};
+
+
+Array.from(boxes).forEach(element => {
+    let boxtext = element.querySelector('.boxtext');
+    element.addEventListener('click',()=>{
+        if(!isgameover  && boxtext.innerText === ''){
+            boxtext.innerText = turn;
+            turn = changeTurn();
+            color();
+            checkWin();
+            if(!isgameover){
+            document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
+        }
+        }
+    })
+
+});
+
+function color(){
+Array.from(boxes).forEach(element => {
+    let boxtext = element.querySelector('.boxtext');
+    if(boxtext.innerText === "X"){
+        boxtext.style.color = "red";
+    }
+    if(boxtext.innerText === "O"){
+        boxtext.style.color = "yellow";
+    }
+})
+};
+
+reset.addEventListener('click',()=>{
+    Array.from(boxtext).forEach(element =>{
+        element.innerText = "";
+    });
+    turn = "X";
+    isgameover = false;
+    document.getElementsByClassName("info")[0].innerText ="Turn for " + turn;
+    document.querySelector('.image').getElementsByTagName('img')[0].style.width = "0px";
+    document.querySelector('.line').style.width = "0%";
+    background();
+});
+function background(){
+    let box = document.querySelectorAll('.tile');
+    Array.from(box).forEach(element =>{
+        element.classList.remove('background');
+    })
+};
diff --git a/style.css b/style.css
@@ -0,0 +1,144 @@
+*{
+    padding: 0;
+    margin: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    overflow: hidden;
+}
+
+.gamecontainer{
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #212845;
+    width: 100vw;
+    height: calc(100vh - 65px);
+}
+
+.navbar{
+    position: relative;
+    padding: 0 12px;
+    background-color:#181b2e;
+    height: 65px;
+    display: flex;
+    align-items: center;
+    font-size: 27px;
+    font-weight: bold;
+    color: rgb(255, 255, 255);
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+
+ .yellow{
+
+    color: rgb(0, 255, 72);
+}
+
+@media only screen and (max-width:850px){
+    .gamecontainer{
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+    }
+    .container{
+        width: fit-content;
+    }
+    .gameinfo{
+        margin-top: 20px;
+    }
+}
+@media only screen and (min-width:850px){
+    .gameinfo{
+        margin-left: 100px;
+    }
+}
+.container{
+    position: relative;
+    display: grid;
+    border: 2px solid #2167ec;
+    grid-template-columns: repeat(3, 12vw);
+    grid-template-rows: repeat(3, 12vw);
+    height: fit-content;
+    box-shadow: 0px 0px 20px rgb(0, 0, 0);
+    overflow: hidden;
+}
+ .tile{
+    background-color: #212845;
+    border: 2px solid #2167ec;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 10vw;
+    cursor: pointer;
+    /* -webkit-text-stroke: 2px black; */
+}
+
+.hover:hover{
+    background-color: rgb(141, 103, 141);
+
+}
+.boxtext{
+    font-weight: bold;
+    color: white;
+}
+.gameinfo{
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    font-size: 2.5vw;
+    color: white;
+}
+.controls{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+}
+#reset{
+    width: fit-content;
+    margin: 20px;
+    padding: 5px;
+    width: 100px;
+    background-color: rgb(255, 0, 0);
+    border-radius: 25px;
+    border: none;
+    font-size: 1.5rem;
+    font-weight: bold;
+    cursor: pointer;
+}
+.image{
+    display: flex;
+    align-items: center;
+    justify-content: center;                     
+}
+.image img{
+    width: 0;
+    transition: width 1s ease-in-out;
+}
+.line{
+    background-color: rgb(255, 0, 0);
+    width: 0%;
+    transition: width 0.5s ease-in-out;
+    position: absolute;
+    height: 0.2vw;
+    top: 49%;
+    left: 14%;
+    overflow:visible;
+}
+.background{
+    background: #26d074;
+}
+.gameinfo h1{
+    position: relative;
+}
+.gameinfo h1::after{
+    content: "";
+    position: absolute;
+     bottom: 0%;
+    left: 25%;
+    width: 50%;
+    height: 2px;
+    background-color: #2167ec;
+}
diff --git a/win.mp3 b/win.mp3