Add files via upload

chaurasia28 · Jul 31, 2024 · 7591ed6 · 7591ed6
commit 7591ed6
Show file tree

Hide file tree

Showing 7 changed files with 197 additions and 0 deletions.
diff --git a/Tic Tak Toe/Congrats.wav b/Tic Tak Toe/Congrats.wav
diff --git a/Tic Tak Toe/Cross.wav b/Tic Tak Toe/Cross.wav
diff --git a/Tic Tak Toe/GameOver.wav b/Tic Tak Toe/GameOver.wav
diff --git a/Tic Tak Toe/Zero.wav b/Tic Tak Toe/Zero.wav
diff --git a/Tic Tak Toe/app.js b/Tic Tak Toe/app.js
@@ -0,0 +1,98 @@
+let boxes = document.querySelectorAll(".box");
+let resetBtn = document.querySelector("#reset-btn");
+let newGameBtn=document.querySelector("#new-btn");
+let msgContainer=document.querySelector(".msg-container");
+let msg=document.querySelector("#msg");
+let turnO = true; //playerX,playerO
+let cnt=0;
+let clickSound = new Audio('Zero.wav');
+let clickSound2 = new Audio('Cross.wav');
+let congrats = new Audio('Congrats.wav');
+let GameOver = new Audio('GameOver.wav');
+const winPatterns = [
+  [0, 1, 2],
+  [0, 3, 6],
+  [0, 4, 8],
+  [1, 4, 7],
+  [2, 5, 8],
+  [2, 4, 6],
+  [3, 4, 5],
+  [6, 7, 8],
+];
+
+//Oturn-O,Xturn-X,and all button should be enable
+const resetGame = ()=>{
+    turnO=true;
+    cnt=0;
+    enableBoxes();
+    msgContainer.classList.add("hide");
+}
+const gameDraw= ()=>{
+  GameOver.play();
+  msg.innerText=`Game was a Draw.`;
+  msgContainer.classList.remove("hide");
+  disableBoxes();
+}
+//Here we want for each box some event should performed so apply addeventlistener to all box.
+boxes.forEach((eachBox) => {
+  eachBox.addEventListener("click", () => {
+    //console.log("Box was clicked");
+    if (turnO === true) {
+      clickSound.play();
+      eachBox.innerText = "O";
+      turnO = false;
+    } else {
+      clickSound2.play();
+      eachBox.innerText = "X";
+      turnO = true;
+    }
+    eachBox.disabled=true;//To prevent from changing x-O or O-X
+    cnt++;
+    let isWinner=checkWinner();
+    if(cnt === 9 && !isWinner){
+      gameDraw();
+    }
+  });
+});
+const disableBoxes= ()=>{
+  for(let eachbox of boxes){
+    eachbox.disabled=true;
+  }
+}
+const enableBoxes= ()=>{
+  for(let eachbox of boxes){
+    eachbox.disabled=false;
+    eachbox.innerText="";
+  }
+}
+const showWinner = (winner)=>{
+         congrats.play();
+         msg.innerText=`Congratulations,Winner is ${winner}`;
+         msgContainer.classList.remove("hide");
+         disableBoxes();
+}
+const checkWinner= ()=>{
+   for(let pattern of winPatterns){
+         //console.log(pattern);
+         //console.log(pattern[0],pattern[1],pattern[2]);
+         let post1Val=boxes[pattern[0]].innerText;
+         let post2Val=boxes[pattern[1]].innerText;
+         let post3Val=boxes[pattern[2]].innerText;
+         if(post1Val!='' && post2Val!='' && post3Val!='')
+         {
+             if(post1Val === post2Val && post2Val === post3Val)
+             {
+                   cnt++;
+                  // console.log("Winner",post1Val);
+                  showWinner(post1Val);
+                  return true;
+             }
+
+         }
+   }
+}
+
+newGameBtn.addEventListener("click",resetGame);
+resetBtn.addEventListener("click",resetGame);
+
+
diff --git a/Tic Tak Toe/index.html b/Tic Tak Toe/index.html
@@ -0,0 +1,33 @@
+<!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>
+    <div class="msg-container hide">
+        <p id="msg">Winner</p>
+       <button id="new-btn">New Game</button>
+    </div>
+    <main>
+        <p>Tic Tac Toe</p>
+        <div class="container">
+         <div class="game">
+            <button class="box"></button>
+            <button class="box"></button>
+            <button class="box"></button>
+            <button class="box"></button>
+            <button class="box"></button>
+            <button class="box"></button>
+            <button class="box"></button>
+            <button class="box"></button>
+            <button class="box"></button>
+         </div>
+        </div>
+        <button id="reset-btn">Reset Game</button>
+    </main>
+    <script src="app.js"></script>
+ </body>
+</html>
diff --git a/Tic Tak Toe/style.css b/Tic Tak Toe/style.css
@@ -0,0 +1,66 @@
+*{
+    margin:0;
+    padding:0;
+    /* box-sizing: border-box; */
+}
+p{
+    font-size: 60px;
+    font-weight: bold;
+}
+body{
+     background-image: linear-gradient( 135deg, #92FFC0 10%, #002661 100%);
+     background-repeat: no-repeat;
+     background-size: cover;
+     text-align: center; 
+}
+.container{
+    height: 70vh;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    height: 830px;
+
+}
+.game{
+    height:60vmin;  /* 1% viewport smaller dimension */
+    width:60vmin;
+    display:flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap:1.5vmin;   
+}
+
+.box{
+    height:18vmin;
+    width:18vmin;
+    border-radius: 1rem;
+    border:none;
+    box-shadow:0 0 1rem rgba(0,0,0,0.3);
+    font-size:8vmin;
+    color:#b0413e;
+    background-color: #ffffc7;   
+}
+#reset-btn ,#new-btn{
+    padding:1rem;
+    font-size: 1.25rem;
+    background-color: #191913;
+    color:#fff;
+    border-radius: 1rem;
+    border:none;
+}
+#msg{
+    color:#ffffc7;
+    font-size: 8vmin;
+}
+.msg-container{
+    height:100vmin;
+    display:flex;
+    justify-items: ceneter;
+    align-items: center;
+    flex-direction: column;
+    gap:4rem;
+}
+.hide{
+    display:none;
+}