A Pen by dineshkidd on CodePen.
Created
October 22, 2024 15:54
-
-
Save dineshkidd/0fd14e1a2d99aa2751a6354f5690e100 to your computer and use it in GitHub Desktop.
tictactoe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| 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; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment