Merge pull request #153 from Kgpianghosh006/Avik/#144-issue

#144 issue: Update Tic-Tac-Toe

Tic Tac Toe/script.js

@@ -1,67 +1,77 @@
+const playerOne = 'X';
+const playerTwo = 'O';
+const lineColor = "#445069";
 
-var player = 1;
-var lineColor = "#445069";
+const canvas = document.getElementById('tic-tac-toe-board');
+const context = canvas.getContext('2d');
 
-var canvas = document.getElementById('tic-tac-toe-board');
-var context = canvas.getContext('2d');
-
-var canvasSize = 500;
-var sectionSize = canvasSize / 3;
+const canvasSize = 500;
+const sectionSize = canvasSize / 3;
 canvas.width = canvasSize;
 canvas.height = canvasSize;
 context.translate(0.5, 0.5);
 
-function getInitialBoard(defaultValue) {
-  var board = [];
-
-  for (var x = 0; x < 3; x++) {
-    board.push([]);
+let currentPlayer = playerOne;
+const board = getInitialBoard("");
 
-    for (var y = 0; y < 3; y++) {
-      board[x].push(defaultValue);
-    }
-  }
+let winningLine = null;
 
-  return board;
+function getInitialBoard(defaultValue) {
+  return Array.from({ length: 3 }, () => Array(3).fill(defaultValue));
 }
 
-var board = getInitialBoard("");
-
 function addPlayingPiece(mouse) {
-  var xCordinate;
-  var yCordinate;
+  const { x, y } = mouse;
 
-  for (var x = 0; x < 3; x++) {
-    for (var y = 0; y < 3; y++) {
-      xCordinate = x * sectionSize;
-      yCordinate = y * sectionSize;
+  for (let row = 0; row < 3; row++) {
+    for (let col = 0; col < 3; col++) {
+      const xCoordinate = row * sectionSize;
+      const yCoordinate = col * sectionSize;
 
       if (
-        mouse.x >= xCordinate && mouse.x <= xCordinate + sectionSize &&
-        mouse.y >= yCordinate && mouse.y <= yCordinate + sectionSize
+        x >= xCoordinate && x <= xCoordinate + sectionSize &&
+        y >= yCoordinate && y <= yCoordinate + sectionSize &&
+        board[row][col] === ""
       ) {
+        clearPlayingArea(xCoordinate, yCoordinate);
 
-        clearPlayingArea(xCordinate, yCordinate);
-
-        if (player === 1) {
-          drawX(xCordinate, yCordinate);
+        if (currentPlayer === playerOne) {
+          drawX(xCoordinate, yCoordinate);
+          board[row][col] = playerOne;
         } else {
-          drawO(xCordinate, yCordinate);
+          drawO(xCoordinate, yCoordinate);
+          board[row][col] = playerTwo;
+        }
+
+        currentPlayer = currentPlayer === playerOne ? playerTwo : playerOne;
+        const winner = checkForWinner();
+        if (winner) {
+          winningLine = getWinningLine();
+          setTimeout(() => {
+            alert(`Player ${winner} wins!`);
+            resetGame();
+          }, 100);
+        } else if (isBoardFull()) {
+          setTimeout(() => {
+            alert("It's a draw!");
+            resetGame();
+          }, 100);
         }
       }
     }
   }
 }
 
-function clearPlayingArea(xCordinate, yCordinate) {
+function clearPlayingArea(xCoordinate, yCoordinate) {
   context.fillStyle = "#fff";
   context.fillRect(
-    xCordinate,
-    yCordinate,
+    xCoordinate,
+    yCoordinate,
     sectionSize,
     sectionSize
   );
 }
+
 function drawO(xCordinate, yCordinate) {
   var halfSectionSize = (0.5 * sectionSize);
   var centerX = xCordinate + halfSectionSize;
@@ -93,27 +103,21 @@ function drawX(xCordinate, yCordinate) {
 }
 
 function drawLines(lineWidth, strokeStyle) {
-  var lineStart = 4;
-  var lineLenght = canvasSize - 5;
+  const lineStart = 4;
+  const lineLength = canvasSize - 5;
   context.lineWidth = lineWidth;
   context.lineCap = 'round';
   context.strokeStyle = strokeStyle;
   context.beginPath();
 
-  /*
-   * Horizontal lines 
-   */
-  for (var y = 1; y <= 2; y++) {
+  for (let y = 1; y <= 2; y++) {
     context.moveTo(lineStart, y * sectionSize);
-    context.lineTo(lineLenght, y * sectionSize);
+    context.lineTo(lineLength, y * sectionSize);
   }
 
-  /*
-   * Vertical lines 
-   */
-  for (var x = 1; x <= 2; x++) {
+  for (let x = 1; x <= 2; x++) {
     context.moveTo(x * sectionSize, lineStart);
-    context.lineTo(x * sectionSize, lineLenght);
+    context.lineTo(x * sectionSize, lineLength);
   }
 
   context.stroke();
@@ -122,22 +126,122 @@ function drawLines(lineWidth, strokeStyle) {
 drawLines(10, lineColor);
 
 function getCanvasMousePosition(event) {
-  var rect = canvas.getBoundingClientRect();
-
+  const rect = canvas.getBoundingClientRect();
   return {
     x: event.clientX - rect.left,
     y: event.clientY - rect.top
+  };
+}
+
+function checkForWinner() {
+  if (
+    (board[0][0] !== "" && board[0][0] === board[1][1] && board[1][1] === board[2][2]) ||
+    (board[0][2] !== "" && board[0][2] === board[1][1] && board[1][1] === board[2][0])
+  ) {
+    return board[1][1];
+  }
+  for (let i = 0; i < 3; i++) {
+    if (
+      (board[i][0] !== "" && board[i][0] === board[i][1] && board[i][1] === board[i][2])
+    ) {
+      return board[i][0];
+    }
+    if (
+      (board[0][i] !== "" && board[0][i] === board[1][i] && board[1][i] === board[2][i])
+    ) {
+      return board[0][i];
+    }
   }
+
+  return null;
 }
 
-canvas.addEventListener('mouseup', function (event) {
-  if (player === 1) {
-    player = 2;
+function getWinningLine() {
+  if (
+    (board[0][0] !== "" && board[0][0] === board[1][1] && board[1][1] === board[2][2])
+  ) {
+    return { type: "diagonal", index: 0 };
+  } else if (
+    (board[0][2] !== "" && board[0][2] === board[1][1] && board[1][1] === board[2][0])
+  ) {
+    return { type: "diagonal", index: 1 };
+  }
+  for (let i = 0; i < 3; i++) {
+    if (
+      (board[i][0] !== "" && board[i][0] === board[i][1] && board[i][1] === board[i][2])
+    ) {
+      return { type: "row", index: i };
+    }
+    else if (
+      (board[0][i] !== "" && board[0][i] === board[1][i] && board[1][i] === board[2][i])
+    ) {
+      return { type: "column", index: i };
+    }
+  }
+
+  return null;
+}
+
+function drawWinningLine() {
+  if (winningLine) {
+    context.strokeStyle = "#FF0000";
+    context.lineWidth = 8;
+
+    if (winningLine.type === "column") {
+      const y = (winningLine.index + 0.5) * sectionSize;
+      context.beginPath();
+      context.moveTo(0, y);
+      context.lineTo(canvasSize, y);
+      context.stroke();
+    } else if (winningLine.type === "row") {
+      const x = (winningLine.index + 0.5) * sectionSize;
+      context.beginPath();
+      context.moveTo(x, 0);
+      context.lineTo(x, canvasSize);
+      context.stroke();
+    } else if (winningLine.type === "diagonal") {
+      if (winningLine.index === 0) {
+        context.beginPath();
+        context.moveTo(0, 0);
+        context.lineTo(canvasSize, canvasSize);
+        context.stroke();
+      } else if (winningLine.index === 1) {
+        context.beginPath();
+        context.moveTo(0, canvasSize);
+        context.lineTo(canvasSize, 0);
+        context.stroke();
+      }
+    }
   } else {
-    player = 1;
+    console.error("No winning line detected!");
   }
+}
 
-  var canvasMousePosition = getCanvasMousePosition(event);
-  addPlayingPiece(canvasMousePosition);
+function isBoardFull() {
+  for (let row = 0; row < 3; row++) {
+    for (let col = 0; col < 3; col++) {
+      if (board[row][col] === "") {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+bu
+function resetGame() {
+  context.clearRect(0, 0, canvasSize, canvasSize);
+  currentPlayer = playerOne;
+  winningLine = null;
+  for (let i = 0; i < 3; i++) {
+    for (let j = 0; j < 3; j++) {
+      board[i][j] = "";
+    }
+  }
   drawLines(10, lineColor);
-});
+}
+
+canvas.addEventListener('mouseup', function (event) {
+  const canvasMousePosition = getCanvasMousePosition(event);
+  addPlayingPiece(canvasMousePosition);
+  drawWinningLine();
+});