dineshkidd · October 22, 2024 15:54 · Oct 22, 2024
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>TicTacToe</h1>
+
+
+    <div id="board">
+        <div class="boardRow">
+            <div onclick="implementTurn(this)" id="1"></div>
+            <div onclick="implementTurn(this)" id="2"></div>
+            <div onclick="implementTurn(this)" id="3"></div>
+        </div>
+        <div class="boardRow">
+            <div onclick="implementTurn(this)" id="4"></div>
+            <div onclick="implementTurn(this)" id="5"></div>
+            <div onclick="implementTurn(this)" id="6"></div>
+        </div>
+        <div class="boardRow">
+            <div onclick="implementTurn(this)" id="7"></div>
+            <div onclick="implementTurn(this)" id="8"></div>
+            <div onclick="implementTurn(this)" id="9"></div>
+        </div>
+    </div>
+
+    <div id="displayTurn">Current Player : <div id="currentPlayer">X</div></div>
+
+    <button onclick="reset()">Reset</button>
+
+</body>
+<script src="script.js"></script>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,131 @@
+class TicTacToe {
+    constructor() {
+        this.boardState = [['', '', ''], ['', '', ''], ['', '', '']];
+        this.currentPlayer = "X";
+        this.winner = "NONE";
+    }
+    implementTurn(e) {
+        let [r, c] = this.getIndex(e);
+        if (this.boardState[r][c] !== '') {
+            return;
+        }
+        else {
+            this.changePlayer(e, r, c);
+            this.checkEndGame();
+        }
+    }
+    getIndex(e) {
+        return [parseInt((e.id - 1) / 3), parseInt((e.id - 1) % 3)];
+    }
+    changePlayer(e, r, c) {
+        this.boardState[r][c] = this.currentPlayer;
+        let currentBlock = document.getElementById(e.id);
+        currentBlock.innerText = this.currentPlayer;
+        if (this.currentPlayer === "X") {
+            currentBlock.style.backgroundColor = "#ed3f32";
+
+        } else {
+            currentBlock.style.backgroundColor = "#44d362";
+
+        }
+        if (this.checkEndGame()) {
+            this.showWinner();
+        }
+        let currentPlayerDisplay = document.getElementById("currentPlayer");
+        this.currentPlayer = this.currentPlayer === "X" ? "O" : "X";
+        currentPlayerDisplay.innerText = this.currentPlayer;
+        // console.log(this.boardState);
+
+
+
+    }
+    checkEndGame() {
+        const bs = this.boardState;
+        let result = true;
+        //row check
+        for (let i = 0; i < 3; i++) {
+            result = true;
+            for (let j = 1; j < 3; j++) {
+                if (bs[i][j - 1] != bs[i][j] || bs[i][j] === "")
+                    result = false;
+            }
+            if (result) {
+                this.winner = bs[i][0];
+                return true;
+            }
+        }
+        for (let j = 0; j < 3; j++) {
+            result = true;
+            for (let i = 1; i < 3; i++) {
+                if (bs[i - 1][j] != bs[i][j] || bs[i][j] === "")
+                    result = false;
+            }
+            if (result) {
+                this.winner = bs[0][j];
+                return true;
+            }
+        }
+        if (bs[0][0] == bs[1][1] && bs[1][1] == bs[2][2]) {
+            if (bs[1][1] != "") {
+                this.winner = bs[1][1];
+                return true;
+            }
+        }
+        if (bs[0][2] == bs[1][1] && bs[1][1] == bs[2][0]) {
+            if (bs[1][1] != "") {
+                this.winner = bs[1][1];
+                return true;
+            }
+        }
+        let draw = true;
+        for (let i = 0; i < 3; i++) {
+            for (let j = 0; j < 3; j++) {
+                if (bs[i][j] === "") {
+                    draw = false;
+                }
+            }
+        }
+        if (draw) {
+            this.winner = "DRAW";
+            return true;
+        }
+
+        return false;
+
+    }
+    showWinner() {
+        for (let i = 1; i < 10; i++) {
+            // document.getElementById(i).style.cursor="not-allowed";
+            document.getElementById(i).style.pointerEvents = "none";
+        }
+        if (this.winner != "DRAW")
+            alert(this.winner + " is the winner");
+        else {
+            alert("Match is tie");
+        }
+    }
+    reset() {
+        this.boardState = [['', '', ''], ['', '', ''], ['', '', '']];
+        this.winner = "NONE";
+        let currentPlayerDisplay = document.getElementById("currentPlayer");
+      this.currentPlayer = "X";
+        currentPlayerDisplay.innerText = this.currentPlayer;
+        for (let i = 1; i < 10; i++) {
+            document.getElementById(i).innerText = '';
+            document.getElementById(i).style.backgroundColor = "rgb(228, 225, 225)";
+            document.getElementById(i).style.cursor = "pointer";
+            document.getElementById(i).style.pointerEvents = "all";
+            this.currentPlayer = "X";
+        }
+    }
+}
+
+let currentGame = new TicTacToe();
+
+
+function implementTurn(e) {
+    currentGame.implementTurn(e);
+}
+function reset() {
+    currentGame.reset();
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,45 @@
+*{
+ box-sizing: border-box;
+}
+body{
+    margin:0;
+    font-family: "Montserrat";
+    text-align: center;
+}
+h1{
+    /* text-align: center; */
+    margin-top:50px;
+}
+#board{
+    margin-top:50px;
+
+}
+.boardRow{
+    display: flex;
+    justify-content: center;
+}
+.boardRow div{
+    background-color: rgb(228, 225, 225);
+    height: 50px;
+    width: 50px;
+    margin: 3px;
+    cursor:pointer;
+    pointer-events: all;
+    /* text-align: center; */
+    padding-top: 13px;
+    font-size: larger;
+}
+#displayTurn{
+    text-align: center;
+    margin-top:50px;
+}
+#currentPlayer{
+    display: inline;
+    /* text-align: center; */
+}
+button{
+    /* text-align: center; */
+    margin-top: 20px;
+    padding:8px 20px;
+}
+
diff --git a/tictactoe.markdown b/tictactoe.markdown
@@ -0,0 +1,7 @@
+tictactoe
+---------
+
+
+A [Pen](https://codepen.io/dineshc28/pen/MWpamNw) by [dineshkidd](https://codepen.io/dineshc28) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/license/pen/MWpamNw).