I’m trying to make a tic-tac-toe game, but I don’t know how to implement a win system. What I mean is that I need to create a system that can detect when a player wins by filling three squares in a row. I’m not sure how to do that. Could someone please help me?
I’ve created a winConditions array where I’ve listed all the possible winning combination
playerOneInput = document.getElementById(`playerOne`)
playerTwoInput = document.getElementById(`playerTwo`)
const statusText = document.getElementById(`statusText`)
const startGameBtn = document.getElementById(`startGameBtn`)
let currentPlayer = ``
const winConditions = [
[1, 2, 3], // Top row
[4, 5, 6], // Middle row
[7, 8, 9], // Bottom row
[1, 4, 7], // Left column
[2, 5, 8], // Middle column
[3, 6, 9], // Right column
[1, 5, 9], // Main diagonal
[3, 5, 7] // Secondary diagonal
]
// Fazer a função para alterar os jogadores a cada turno
function switchPlayer() {
if (currentPlayer === playerOneInput.value) {
currentPlayer = playerTwoInput.value
} else {
currentPlayer = playerOneInput.value
}
statusText.textContent = `Turno de ${currentPlayer}`
}
function playerName() {
startGameBtn.addEventListener(`click`, () => {
if (playerOneInput.value && playerTwoInput.value) {
currentPlayer = playerOneInput.value
switchPlayer()
startGameBtn.disabled = true
} else {
alert(`Por favor, insira os nomes dos dois jogadores`)
}
})
}
function clickSquare() {
const cells = document.querySelectorAll(`.cell`)
cells.forEach(cell => {
cell.addEventListener(`click`, () => {
// Verifica se a célula já está marcada
if (cell.textContent === `` && currentPlayer) {
let marker
} if (currentPlayer === playerOneInput.value) {
marker = `O`
} else {
marker = `X`
}
const span = document.createElement(`span`)
span.textContent = marker
if (marker === `X`) {
span.style.color = `#FF0000`
} else {
span.style.color = `#0000FF`
}
cell.appendChild(span)
switchPlayer()
})
})
}
clickSquare()
playerName()
