89 lines
1.9 KiB
JavaScript
89 lines
1.9 KiB
JavaScript
const X_CLASS = "x"
|
|
const O_CLASS = "o"
|
|
|
|
const WINNING_PATTERN = [
|
|
[0, 1, 2],
|
|
[3, 4, 5],
|
|
[6, 7, 8],
|
|
[0, 3, 6],
|
|
[1, 4, 7],
|
|
[2, 5, 8],
|
|
[0, 4, 8],
|
|
[2, 4, 6]
|
|
]
|
|
|
|
const cellElements = document.querySelectorAll("[data-cell]")
|
|
const board = document.getElementById("board")
|
|
const winnerMessage = document.querySelector("[data-message]")
|
|
const winner = document.getElementById("winner")
|
|
const restartButton = document.getElementById("restart")
|
|
|
|
let oTurn = false;
|
|
|
|
restartButton.addEventListener("click", gameStart)
|
|
|
|
function gameStart() {
|
|
function clickHandler(event) {
|
|
console.log(full())
|
|
const currentClass = oTurn ? O_CLASS : X_CLASS
|
|
event.target.classList.add(currentClass) // add O or X to the grid
|
|
|
|
if (checkWin(currentClass)) {
|
|
gameOver(false)
|
|
} else if (full()) {
|
|
gameOver(true)
|
|
}
|
|
oTurn = !oTurn // change tern
|
|
updateHover()
|
|
}
|
|
|
|
winner.classList.remove("show")
|
|
cellElements.forEach(cell => {
|
|
cell.classList.remove("o")
|
|
cell.classList.remove("x")
|
|
})
|
|
|
|
cellElements.forEach(cell => {
|
|
cell.addEventListener("click", clickHandler, {once: true})
|
|
})
|
|
|
|
updateHover()
|
|
}
|
|
|
|
function gameOver(draw) {
|
|
if (draw) {
|
|
// show draw message
|
|
}
|
|
else {
|
|
winnerMessage.innerText = `${oTurn ? "O" : "X"} won!!`
|
|
}
|
|
winner.classList.add("show")
|
|
}
|
|
|
|
function updateHover() {
|
|
board.classList.remove(X_CLASS)
|
|
board.classList.remove(O_CLASS)
|
|
|
|
if (oTurn) {
|
|
board.classList.add(O_CLASS)
|
|
}
|
|
else {
|
|
board.classList.add(X_CLASS)
|
|
}
|
|
}
|
|
|
|
function checkWin(currentClass) {
|
|
return WINNING_PATTERN.some(combination => {
|
|
return combination.every(index => {
|
|
return cellElements[index].classList.contains(currentClass)
|
|
})
|
|
})
|
|
}
|
|
|
|
function full() {
|
|
//todo: add when the game is a draw
|
|
return false
|
|
}
|
|
|
|
|
|
gameStart()
|