I've developed a Tic-Tac-Toe game but now I'm trying to figure out how to add colors to the winning squares or draw a line. The CSS for creating the square or line is simple, but I'm unsure about selecting only the winning squares when my winning combinations are structured like this:
const winningCombos = [[0,1,2], [3,4,5], [6,7,8], [0,3,6], [1,4,7], [2,5,8], [0,4,8], [2,4,6]]
Players' moves are stored in an array to check the combinations later. For instance, if one player takes 5 moves to win, we might need only 3 winning squares.
xChoices = [0,1,3,6] // where 0,3,6 are winners and I want to highlight them with color or draw a line
This is how I validate the combinations:
function checkForXWinner(){
return winningCombos.some(combo =>{
return combo.every(e =>{
return xChoices.includes(e)
})
})
}
function checkForOWinner(){
return winningCombos.some(combo =>{
return combo.every(e =>{
return oChoices.includes(e)
})
})
}
You can find the code on jsfiddle by clicking the link below. Cheers!