Merge pull request #4096 from Apurv7777/tic-tac-toe

Tic tac toe
kunjgit · Jun 7, 2024 · f4b8f24 · f4b8f24
2 parents e7d86a3 + 21bd816
commit f4b8f24
Show file tree

Hide file tree

Showing 11 changed files with 275 additions and 294 deletions.
diff --git a/Games/Tic_Tac_Toe/README.md b/Games/Tic_Tac_Toe/README.md
@@ -1,29 +1,32 @@
-# **Tic_Tac_Toe** 
-
----
-
-<br>
-
-## **Description 📃**
-- X and O have to play turn by turn.
-- whose ever turn it is ,it will be displayed on screen.
-<br>
-
-## **Functionalities 🎮**
-- There is sound on each and every turn.
-- The gif will appear if any one wins.
-- The game can also restart in between if required.
-<br>
-
-## **How to play? 🕹️**
-- X player always plays first.He can click on any 9 of the boxes.
-- Next is O's urn he can click in any 9 of the boxes.
-- If any 3 appear the same either X or O in row,column or digonally then he wins.
-
-<br>
-
-## **Screenshots 📸**
-
-![image](..//..//assets/images/Tic_Tac_Toe.png)
-
-<br>
+---
+
+# Tic Tac Toe Game
+
+Welcome to Tic Tac Toe Game!, a classic game of Tic Tac Toe brought to life with HTML, CSS, and JavaScript. This simple yet engaging web application allows users to enjoy the timeless game in a modern and interactive way.
+
+## Features:
+
+- **Responsive Design:** Play the game seamlessly on any device, thanks to the responsive design that adapts to various screen sizes.
+
+- **Intuitive Interface:** The user-friendly interface makes it easy for players to understand the game rules and navigate through the application effortlessly.
+
+- **CSS Animations:** Enjoy subtle and appealing animations that enhance the gaming experience, creating a visually pleasing atmosphere.
+
+- **Smart AI Opponent (Coming Soon):** Test your skills against a computer opponent with an intelligent AI. The AI adapts to your moves, providing a challenging single-player experience.
+
+## How to Play:
+
+1. Clone the repository to your local machine.
+2. Open the [Tic-Tac-Toe](https://oxoxgame.netlify.app/) in your preferred web browser.
+3. Start a new game and take turns with your opponent to place your X or O on the grid.
+4. The first player to get three in a row (horizontally, vertically, or diagonally) wins the game.
+
+## Technologies Used:
+
+- **HTML:** The structure of the game.
+- **CSS:** Styling and animations for a visually appealing experience.
+- **JavaScript:** Logic for gameplay, user interaction, and implementing the Tic Tac Toe rules.
+
+Feel free to report issues, or suggest improvements. Let the Tic Tac Toe battles begin!
+
+---
diff --git a/Games/Tic_Tac_Toe/confetti.gif b/Games/Tic_Tac_Toe/confetti.gif
diff --git a/Games/Tic_Tac_Toe/favicon.png b/Games/Tic_Tac_Toe/favicon.png
diff --git a/Games/Tic_Tac_Toe/sounds/gameover.mp3 → Games/Tic_Tac_Toe/gameover.mp3 b/Games/Tic_Tac_Toe/sounds/gameover.mp3 → Games/Tic_Tac_Toe/gameover.mp3
diff --git a/Games/Tic_Tac_Toe/index.html b/Games/Tic_Tac_Toe/index.html
@@ -1,48 +1,44 @@
-<!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>Tic Tac Toe</title>
-    <link rel="stylesheet" href="style.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
-  </head>
-  <body>
-    <nav>
-      <ul>
-        <li> <div style=" text-align:center;"><a href="https://kunjgit.github.io/GameZone/"><i style="color:white;" class="fas fa-home home-icon"></i></a></div></li>
-        <li>My Tic Tac Toe Game</li>
-      </ul>
-    </nav>
-    <div class="gameInfo">
-      <h1>Welcome to Simran's Tic Tac Toe Game</h1>
-    </div>
-
-    <div class="gameContainer">
-      <div class="container">
-        <div class="line"></div>
-        <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="gameInfo">
-        <div class="gaming">
-          <span class="info">Turn for X</span>
-        </div>
-        <button id="reset">Reset</button>
-        <div class="imgbox">
-          <img src="sounds/excited.gif" alt="" />
-        </div>
-      </div>
-    </div>
-
-    <script src="script.js"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
+    <title>Tic Tac Toe</title>
+</head>
+
+<body>
+    <div class="card">
+        <h1 class="heading">TIC TAC TOE</h1>
+        <div class="playerInfo">
+            <label for="p1">Player 1 :</label>
+            <input name="p1" class="p1" type="text" placeholder="Enter your name">
+            <label for="p2">Player 2 :</label>
+            <input name="p2" class="p2" type="text" placeholder="Enter your name">
+            <button id="start">Start</button>
+        </div>
+
+        <div class="gameContainer">
+            <img src="confetti.gif" alt="confetti" class="confetti">  
+            <h2 class="info"></h2>
+            <div class="container">
+                <div class="line"></div>
+                <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 br-0 bb-0"><span class="boxText"></span></div>
+            </div>
+            <button id="reset">Reset</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Games/Tic_Tac_Toe/sounds/music.mp3 → Games/Tic_Tac_Toe/music.mp3 b/Games/Tic_Tac_Toe/sounds/music.mp3 → Games/Tic_Tac_Toe/music.mp3
diff --git a/Games/Tic_Tac_Toe/script.js b/Games/Tic_Tac_Toe/script.js
@@ -1,100 +1,96 @@
-let music = new Audio("sounds/music.mp3");
-let audioTurn = new Audio("sounds/ting.mp3");
-let gameover = new Audio("sounds/gameover.mp3");
-let turn = "X";
-let isgameover = false;
+let gameoverAudio = new Audio("gameover.mp3")
+let turnAudio = new Audio("ting.mp3")
+let turn = 'X'
+let gameover = false;
+let music = new Audio("music.mp3")
+
+const info = document.querySelector('.info')
+const reset = document.querySelector('#reset')
+const start = document.querySelector('#start')
+const playerInfo = document.querySelector('.playerInfo')
+const gameContainer = document.querySelector('.gameContainer')
+const p1 = document.querySelector('.p1')
+const p2 = document.querySelector('.p2')
+const line = document.querySelector('.line')
+
+
+start.addEventListener('click', () => {
+    playerInfo.style.display = 'none';
+    gameContainer.style.display = 'flex';
+    info.innerText = 'Turn for ' + p1.value + ' (' + turn + ')';
+    music.play()
+})
 
-music.play();
 
-// Function to change the turn
 const changeTurn = () => {
-  return turn === "X" ? "0" : "X";
-};
+    return turn === 'X' ? 'O' : '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],
-  ];
-  let isDraw = true; // Flag to check if it's a draw
-
-  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";
-      music.pause();
-      gameover.play();
-      music.play();
-      isgameover = true;
-      document
-        .querySelector(".imgbox")
-        .getElementsByTagName("img")[0].style.width = "200px";
-      document.querySelector(
-        ".line"
-      ).style.transform = `translate(${e[3]}vw, ${e[4]}vw) rotate(${e[5]}deg)`;
-      document.querySelector(".line").style.width = "20vw";
-      isDraw = false;
-      document.querySelector(".imgbox").style.display = "block";
-    }
-  });
+    let boxText = document.querySelectorAll('.boxText')
+    let wins = [
+        [0, 1, 2, '24%', 0,0],
+        [3, 4, 5, '50%', 0,0],
+        [6, 7, 8, '75%', 0,0],
+        [0, 3, 6, '50%', '-34%','90'],
+        [1, 4, 7, '50%', 0,'90'],
+        [2, 5, 8, '50%', '33%','90'],
+        [0, 4, 8, '50%',0,'45'],
+        [2, 4, 6, '50%', 0,'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 !== '')) {
+            if (boxText[e[0]].innerText === 'X') {
+                info.innerText = p1.value + ' Wins !'
+            } else {
+                info.innerText = p2.value + ' Wins !'
+            }
+            document.querySelector('.confetti').style.visibility = 'visible';
+            line.style.visibility = 'visible'
+            line.style.top = e[3];
+            line.style.left = e[4];
+            line.style.transform = `rotate(${e[5]}deg)`;
+            music.pause()
+            music.currentTime = 0;
+            gameoverAudio.play()
+            gameover = true;
+        }
+    })
+}
 
-  // Check for a draw
-  if (isDraw) {
-    let filledBoxes = Array.from(boxtext).every(
-      (element) => element.innerText !== ""
-    );
-    if (filledBoxes) {
-      document.querySelector(".info").innerText = "It's a Draw!";
-      music.pause();
-      gameover.play();
-      music.play();
-      isgameover = true;
-    }
-  }
-};
+let boxes = document.querySelectorAll('.box')
+Array.from(boxes).forEach((e) => {
+    let boxText = e.querySelector('.boxText')
+    e.addEventListener("click", () => {
+        if (boxText.innerText === '') {
+            boxText.innerText = turn
+            turnAudio.play();
+            turn = changeTurn();
+            checkWin();
+            if (!gameover) {
+                if (turn === 'X') {
+                    info.innerText = 'Turn for ' + p1.value + ' (' + turn + ')';
+                } else {
+                    info.innerText = 'Turn for ' + p2.value + ' (' + turn + ')';
 
-// Game Logic
-music.play();
-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;
-      }
-    }
-  });
-});
+                }
+            }
+        }
+    })
 
-// Add onclick listener to reset button
-reset.addEventListener("click", () => {
+})
 
-  document.querySelector(".imgbox").style.display = "none";
+reset.addEventListener('click', () => {
+    let boxText = document.querySelectorAll('.boxText')
+    Array.from(boxText).forEach(e => {
+        e.innerText = ''
+        turn = 'X'
+        info.innerText = 'Turn for ' + p1.value + ' (' + turn + ')';
+        document.querySelector('.confetti').style.visibility = 'hidden';
+        line.style.transform = '';
+        line.style.visibility = 'hidden'
+        gameover = false;
+        music.play()
 
-  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;
-});
+    })
+})
diff --git a/Games/Tic_Tac_Toe/sounds/excited.gif b/Games/Tic_Tac_Toe/sounds/excited.gif