Last active
December 8, 2018 23:07
-
-
Save jeesunikim/803a89d88600629fedaeb6977fc38364 to your computer and use it in GitHub Desktop.
Tic Tac Toe
This file contains 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
// In Action: https://codepen.io/jeesunikim/pen/wxOObg | |
const HUMAN_01 = "X"; | |
const HUMAN_02 = "O"; | |
const TIE = "TIE"; | |
class Board { | |
constructor(originalBoard) { | |
this.board = new Array(originalBoard.length); | |
this.winner; | |
this.onReset = this.onReset.bind(this); | |
this.init(); | |
} | |
init() { | |
this.onReset(); | |
} | |
onSelect(currentPlayer, index) { | |
this.board[index] = currentPlayer; | |
if (this.isWinning(this.board, currentPlayer)) { | |
this.winner = currentPlayer; | |
} else if (this.availableSpots(this.board).length === 0) { | |
this.winner = TIE; | |
} | |
} | |
onReset() { | |
for (var i = 0; i < this.board.length; i++) { | |
this.board[i] = "isEmpty"; | |
} | |
this.winner = false; | |
} | |
availableSpots(board) { | |
let emptyIndexes = []; | |
for (var i = 0; i < board.length; i++) { | |
if (board[i] === "isEmpty") { | |
emptyIndexes.push(i); | |
} | |
} | |
return emptyIndexes; | |
} | |
isWinning(currentBoard, player) { | |
if ( | |
(currentBoard[0] == player && | |
currentBoard[1] == player && | |
currentBoard[2] == player) || | |
(currentBoard[0] == player && | |
currentBoard[4] == player && | |
currentBoard[8] == player) || | |
(currentBoard[0] == player && | |
currentBoard[3] == player && | |
currentBoard[6] == player) || | |
(currentBoard[1] == player && | |
currentBoard[4] == player && | |
currentBoard[7] == player) || | |
(currentBoard[2] == player && | |
currentBoard[5] == player && | |
currentBoard[8] == player) || | |
(currentBoard[3] == player && | |
currentBoard[4] == player && | |
currentBoard[5] == player) || | |
(currentBoard[6] == player && | |
currentBoard[7] == player && | |
currentBoard[8] == player) || | |
(currentBoard[2] == player && | |
currentBoard[4] == player && | |
currentBoard[6] == player) | |
) { | |
return true; | |
} else { | |
return false; | |
} | |
} | |
} | |
class TicTacToe { | |
constructor() { | |
const board = document.querySelector(".board"); | |
this.currentPlayer = HUMAN_01; | |
this.gameOver = false; | |
this.newBoard; | |
this.originalDomBoard = board.querySelectorAll("li"); | |
this.resetBtn = document.querySelector(".js-reset"); | |
this.winnerText = document.querySelector(".js-winner"); | |
this.onGridSelect = this.onGridSelect.bind(this); | |
this.onReset = this.onReset.bind(this); | |
this.init(); | |
} | |
init() { | |
this.newBoard = new Board(this.originalDomBoard); | |
this.originalDomBoard.forEach((grid, index) => { | |
grid.addEventListener("click", () => { | |
this.onGridSelect(grid, index); | |
}); | |
}); | |
this.resetBtn.addEventListener("click", this.onReset); | |
} | |
onReset() { | |
this.originalDomBoard.forEach(eachGrid => { | |
eachGrid.innerHTML = ""; | |
}); | |
this.gameOver = false; | |
this.removeMessage(); | |
this.newBoard.onReset(); | |
} | |
onChangePlayer() { | |
this.currentPlayer = this.currentPlayer === HUMAN_01 ? HUMAN_02 : HUMAN_01; | |
} | |
onGridSelect(selectedGrid, selectedIndex) { | |
if (this.newBoard.board[selectedIndex] !== "isEmpty") { | |
return; | |
} | |
if (!this.gameOver) { | |
this.originalDomBoard[selectedIndex].innerHTML = this.currentPlayer; | |
this.newBoard.onSelect(this.currentPlayer, selectedIndex); | |
this.onChangePlayer(); | |
if (this.newBoard.winner) { | |
this.gameOver = true; | |
this.displayMessage(this.newBoard.winner); | |
} | |
} else { | |
return; | |
} | |
} | |
removeMessage() { | |
this.winnerText.innerHTML = ""; | |
} | |
displayMessage(result) { | |
if (result === TIE) { | |
this.winnerText.innerHTML = `${this.newBoard.winner}`; | |
} else { | |
this.winnerText.innerHTML = `The Winner is ${this.newBoard.winner}`; | |
} | |
} | |
} | |
const GAME = new TicTacToe(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment