Add files via upload

karthikbilaspur · May 15, 2024 · 12ef7b5 · 12ef7b5
1 parent eeb1825
commit 12ef7b5
Show file tree

Hide file tree

Showing 3 changed files with 166 additions and 0 deletions.
diff --git a/Javascript/Tic-Tac-Toe/index.html b/Javascript/Tic-Tac-Toe/index.html
@@ -0,0 +1,27 @@
+<!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>
+    <h1>Tic Tac Toe</h1>
+    <div class="board">
+      <div class="square" id="square0"></div>
+      <div class="square" id="square1"></div>
+      <div class="square" id="square2"></div>
+      <div class="square" id="square3"></div>
+      <div class="square" id="square4"></div>
+      <div class="square" id="square5"></div>
+      <div class="square" id="square6"></div>
+      <div class="square" id="square7"></div>
+      <div class="square" id="square8"></div>
+    </div>
+    <p class="message"></p>
+    <button class="restart-button">Restart Button</button>
+
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/Javascript/Tic-Tac-Toe/main.js b/Javascript/Tic-Tac-Toe/main.js
@@ -0,0 +1,87 @@
+const board = document.querySelector(".board");
+const squares = document.querySelectorAll(".square");
+const message = document.querySelector(".message");
+const restartBtn = document.querySelector(".restart-button");
+const players = ["X", "O"];
+
+let currentPlayer = players[0];
+
+message.textContent = `X's turn`;
+
+const winningPatterns = [
+  [0, 1, 2],
+  [3, 4, 5],
+  [6, 7, 8],
+  [0, 3, 6],
+  [1, 4, 7],
+  [2, 5, 8],
+  [0, 4, 8],
+  [2, 4, 6],
+];
+
+for (let i = 0; i < squares.length; i++) {
+  squares[i].addEventListener("click", () => {
+    if (squares[i].textContent !== "" || checkWinner(currentPlayer)) {
+      return;
+    }
+
+    squares[i].textContent = currentPlayer;
+
+    if (checkWinner(currentPlayer)) {
+      message.textContent = `Game Over. ${currentPlayer} wins the game ! Please restart`;
+      return;
+    }
+
+    if (checkTieResult()) {
+      message.textContent = `Game tied ! Please restart`;
+      return;
+    }
+
+    currentPlayer = currentPlayer === players[0] ? players[1] : players[0];
+
+    if (currentPlayer === players[0]) {
+      message.textContent = `X's Turn`;
+    } else {
+      message.textContent = `O's Turn`;
+    }
+  });
+}
+
+function checkWinner(currentPlayer) {
+  for (let i = 0; i < winningPatterns.length; i++) {
+    const [a, b, c] = winningPatterns[i];
+
+    if (
+      squares[a].textContent === currentPlayer &&
+      squares[b].textContent === currentPlayer &&
+      squares[c].textContent === currentPlayer
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function checkTieResult() {
+  for (let i = 0; i < squares.length; i++) {
+    if (squares[i].textContent === "") {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function restartGame() {
+  for (let i = 0; i < squares.length; i++) {
+    squares[i].textContent = "";
+  }
+
+  message.textContent = `X's turn`;
+  currentPlayer = players[0];
+}
+
+restartBtn.addEventListener("click", () => {
+  restartGame();
+});
diff --git a/Javascript/Tic-Tac-Toe/style.css b/Javascript/Tic-Tac-Toe/style.css
@@ -0,0 +1,52 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+h1{
+    text-align: center;
+}
+
+.board{
+    margin-left: auto;
+    margin-right: auto;
+    width: 450px;
+    height: 450px;
+    display: grid;
+    grid-template-columns: repeat(3,1fr);
+    gap: 5px;
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+.square{
+   width: 145px;
+   height: 145px;
+   border: 1px solid rgb(111, 12, 165); 
+   background-color: #f5f5f5;
+   font-size: 40px;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   cursor: pointer;
+}
+
+.restart-button {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 12px 20px;
+    border: 2px solid #000;
+    background-color: yellow;
+    font-weight: bold;
+    font-size: 18px;
+    cursor: pointer;
+}
+
+.message {
+    text-align: center;
+    margin-bottom: 30px;
+    font-size: 40px;
+    font-weight: bolder;
+}