@@ -0,0 +1,87 @@ | ||
const statusDisplay = document.querySelector('.game--status'); | ||
|
||
let gameActive = true; | ||
let currentPlayer = "X"; | ||
let gameState = ["", "", "", "", "", "", "", "", ""]; | ||
andyfry01
|
||
|
||
const winningMessage = () => `Player ${currentPlayer} has won!`; | ||
andyfry01
|
||
const drawMessage = () => `Game ended in a draw!`; | ||
const currentPlayerTurn = () => `It's ${currentPlayer}'s turn`; | ||
|
||
statusDisplay.innerHTML = currentPlayerTurn(); | ||
|
||
const winningConditions = [ | ||
[0, 1, 2], | ||
[3, 4, 5], | ||
[6, 7, 8], | ||
[0, 3, 6], | ||
[1, 4, 7], | ||
[2, 5, 8], | ||
[0, 4, 8], | ||
[2, 4, 6] | ||
]; | ||
Comment on lines
+13
to
+22
andyfry01
|
||
|
||
function handleCellPlayed(clickedCell, clickedCellIndex) { | ||
gameState[clickedCellIndex] = currentPlayer; | ||
clickedCell.innerHTML = currentPlayer; | ||
} | ||
|
||
function handlePlayerChange() { | ||
currentPlayer = currentPlayer === "X" ? "O" : "X"; | ||
statusDisplay.innerHTML = currentPlayerTurn(); | ||
} | ||
|
||
function handleResultValidation() { | ||
let roundWon = false; | ||
for (let i = 0; i <= 7; i++) { | ||
const winCondition = winningConditions[i]; | ||
let a = gameState[winCondition[0]]; | ||
let b = gameState[winCondition[1]]; | ||
let c = gameState[winCondition[2]]; | ||
if (a === '' || b === '' || c === '') { | ||
continue; | ||
} | ||
if (a === b && b === c) { | ||
roundWon = true; | ||
break | ||
} | ||
} | ||
|
||
if (roundWon) { | ||
statusDisplay.innerHTML = winningMessage(); | ||
gameActive = false; | ||
return; | ||
} | ||
|
||
let roundDraw = !gameState.includes(""); | ||
if (roundDraw) { | ||
statusDisplay.innerHTML = drawMessage(); | ||
gameActive = false; | ||
return; | ||
} | ||
|
||
handlePlayerChange(); | ||
} | ||
Comment on lines
+34
to
+64
andyfry01
|
||
|
||
function handleCellClick(clickedCellEvent) { | ||
const clickedCell = clickedCellEvent.target; | ||
const clickedCellIndex = parseInt(clickedCell.getAttribute('data-cell-index')); | ||
andyfry01
|
||
|
||
if (gameState[clickedCellIndex] !== "" || !gameActive) { | ||
return; | ||
} | ||
|
||
handleCellPlayed(clickedCell, clickedCellIndex); | ||
handleResultValidation(); | ||
} | ||
|
||
function handleRestartGame() { | ||
gameActive = true; | ||
currentPlayer = "X"; | ||
gameState = ["", "", "", "", "", "", "", "", ""]; | ||
statusDisplay.innerHTML = currentPlayerTurn(); | ||
document.querySelectorAll('.cell').forEach(cell => cell.innerHTML = ""); | ||
} | ||
|
||
document.querySelectorAll('.cell').forEach(cell => cell.addEventListener('click', handleCellClick)); | ||
document.querySelector('.game--restart').addEventListener('click', handleRestartGame); | ||
Comment on lines
+83
to
+87
andyfry01
|
Instead of a "flat" list of empty strings representing coordinates on the board, why not use some formatting to shape them to look like the board itself?
A couple of strategic newlines and tabs will really aid comprehension: