Add files via upload

vansh1293 · Aug 4, 2024 · 1856698 · 1856698
1 parent 8c7b512
commit 1856698
Show file tree

Hide file tree

Showing 6 changed files with 563 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,34 @@
+<!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="image">
+      <img
+        src="https://cdn.pixabay.com/photo/2017/01/05/09/21/tic-tac-toe-1954446_640.jpg"
+        alt=""
+      />
+    </div>
+    <div class="main">
+      <div class="welcome">Welcome To Tic Tac Toe Game</div>
+    </div>
+    <div class="input">
+      <div>
+        <label for="name1">Enter First Player Name: </label>
+        <input type="text" id="name1" required />
+      </div>
+      <div>
+        <label for="name2">Enter Second Player Name: </label>
+        <input type="text" id="name2" required />
+      </div>
+    </div>
+    <div class="btn">
+      <button>START</button>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,20 @@
+let btn=document.querySelector(".btn");
+let input1=document.getElementById("name1");
+let input2=document.getElementById("name2");
+async function main()
+{
+const gameopen=((event)=>{
+    if(name1.value && name2.value)
+    {
+        localStorage.setItem("input1",input1.value);
+        localStorage.setItem("input2",input2.value);
+        window.location.replace("structure2.html");
+    }
+    else
+    {
+        alert("Please enter player's name");
+    }
+});
+btn.addEventListener("click",gameopen);
+}
+main();
diff --git a/script2.js b/script2.js
@@ -0,0 +1,154 @@
+let data = document.querySelector(".data");
+let chance = 1;
+let box = document.querySelectorAll(".box");
+let element = document.querySelectorAll(".element");
+let game_end = false;
+// we created a 2-D array.
+// these 2-D array elements are the position at which we wanna
+// check the innerText to get the winner.
+let windecider = [
+    [1, 2, 3],
+    [4, 5, 6],
+    [7, 8, 9],
+    [1, 4, 7],
+    [2, 5, 8],
+    [3, 6, 9],
+    [1, 5, 9],
+    [3, 5, 7]
+];
+const checkwin = ((ch) => {
+    if (ch % 2 === 1) {
+        for (let e of windecider) {
+            if (element[e[0] - 1].innerText === "X" && element[e[1] - 1].innerText === "X" && element[e[2] - 1].innerText === "X") {
+                console.log("x");
+                return 1;
+            }
+        }
+    }
+    else if (ch % 2 === 0) {
+        for (let e of windecider) {
+            if (element[e[0] - 1].innerText === "O" && element[e[1] - 1].innerText === "O" && element[e[2] - 1].innerText === "O") {
+                console.log("0");
+                return 1;
+            }
+        }
+    }
+    return 0;
+})
+const display_turn = ((x) => {
+    if (data.innerText) {
+        data.innerText = "";
+    }
+    if (x == 1) {
+        let s1 = localStorage.getItem("input1");
+        let t = `${s1}'s Turn`;
+        data.innerText = t;
+    }
+    else {
+        let s2 = localStorage.getItem("input2");
+        let t = `${s2}'s Turn`;
+        data.innerText = t;
+    }
+});
+const turn = (() => {
+    let v = Math.random();
+    if (v <= 0.5)
+        return 1;
+    else
+        return 2;
+});
+const display_winner = ((x) => {
+    if (data.innerText) {
+        data.innerText = "";
+    }
+    if (x == 1) {
+        let s1 = localStorage.getItem("input1");
+        let t = `${s1} Won`;
+        data.innerText = t;
+    }
+    else {
+        let s2 = localStorage.getItem("input2");
+        let t = `${s2} Won`;
+        data.innerText = t;
+    }
+    document.querySelector(".btn").style.visibility = "visible";
+});
+const handle_event = ((i) => {
+    if (game_end) {
+        return;
+    }
+    let xyz = element[i].getAttribute("xyz");
+    if (chance % 2 === 1 && xyz === "0") {
+        element[i].innerText = "X";
+        element[i].style.visibility = "visible";
+        v = checkwin(chance);
+        if (v === 1) {
+            game_end = true;
+            display_winner(t);
+            return;
+        }
+        if (chance === 9) {
+            data.innerText = "Draw";
+            document.querySelector(".btn").style.visibility = "visible";
+            return;
+        }
+        chance++;
+        element[i].setAttribute("xyz", "1");
+        if (t === 1) {
+            display_turn(2);
+            t = 2;
+        }
+        else {
+            display_turn(1);
+            t = 1;
+        }
+    }
+    else if (chance % 2 === 0 && xyz === "0") {
+        element[i].innerText = "O";
+        element[i].style.visibility = "visible";
+        let v = checkwin(chance);
+        if (v === 1) {
+            game_end = true;
+            display_winner(t);
+            return;
+        }
+        if (chance === 9) {
+            data.innerText = "Draw";
+            document.querySelector(".btn").style.visibility = "visible";
+            return;
+        }
+        chance++;
+        element[i].setAttribute("xyz", "1");
+        if (t === 1) {
+            display_turn(2);
+            t = 2;
+        }
+        else {
+            display_turn(1);
+            t = 1;
+        }
+    }
+})
+const setupEventListeners = (() => {
+    let v;
+    for (let i = 0; i < box.length; i++) {
+
+        box[i].addEventListener("click", () => {
+            handle_event(i);
+        });
+    }
+});
+const setupEventListeners2 = (() => {
+    let btn1 = document.querySelector(".restart");
+    let btn2 = document.querySelector(".end");
+    btn1.addEventListener("click", (() => {
+        location.reload();
+    }));
+    btn2.addEventListener("click", (() => {
+        window.location.replace("index.html");
+    }));
+});
+let t = turn();
+display_turn(t);
+setupEventListeners();
+setupEventListeners2();
diff --git a/structure2.html b/structure2.html
@@ -0,0 +1,64 @@
+<!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="style2.css" />
+  </head>
+  <body>
+    <div class="game">
+      <div class="grid">
+        <div class="box"><div class="element" xyz="0"></div></div>
+        <div class="box"><div class="element" xyz="0"></div></div>
+        <div class="box"><div class="element" xyz="0"></div></div>
+        <div class="box"><div class="element" xyz="0"></div></div>
+        <div class="box"><div class="element" xyz="0"></div></div>
+        <div class="box"><div class="element" xyz="0"></div></div>
+        <div class="box"><div class="element" xyz="0"></div></div>
+        <div class="box"><div class="element" xyz="0"></div></div>
+        <div class="box"><div class="element" xyz="0"></div></div>
+      </div>
+      <div class="right-side">
+        <div class="data"></div>
+        <div class="btn">
+          <button class="cssbuttons-io-button restart">
+            Restart
+            <div class="icon">
+              <svg
+                height="24"
+                width="24"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M0 0h24v24H0z" fill="none"></path>
+                <path
+                  d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
+                  fill="currentColor"
+                ></path>
+              </svg>
+            </div>
+          </button>
+          <button class="cssbuttons-io-button end">
+            End
+            <div class="icon">
+              <svg
+                height="24"
+                width="24"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M0 0h24v24H0z" fill="none"></path>
+                <path
+                  d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"
+                  fill="currentColor"
+                ></path>
+              </svg>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+    <script src="script2.js"></script>
+  </body>
+</html>