如何在JavaScript中实现井字棋（Tic-Tac-Toe）获胜检测函数

你已经定义了所有获胜组合的winConditions数组，接下来只需要补充棋盘状态跟踪和获胜/平局检测逻辑即可完成功能，以下是具体实现步骤和修改后的完整代码：

核心思路 #

1. 维护一个board数组记录每个格子的标记（X/O），对应winConditions里的1-9编号
2. 每次玩家落子后，更新board并检查是否满足获胜条件
3. 同时判断是否所有格子都被填满（平局）

修改后的完整代码 #

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], // 顶行
    [4, 5, 6], // 中行
    [7, 8, 9], // 底行
    [1, 4, 7], // 左列
    [2, 5, 8], // 中列
    [3, 6, 9], // 右列
    [1, 5, 9], // 主对角线
    [3, 5, 7] // 副对角线
]
// 初始化棋盘状态，索引1-9对应格子编号，初始为空
let board = Array(10).fill('');

// 切换玩家回合
function switchPlayer() {
    currentPlayer = currentPlayer === playerOneInput.value 
        ? playerTwoInput.value 
        : playerOneInput.value;
    statusText.textContent = `${currentPlayer}的回合`
}

// 检测当前标记是否获胜
function checkWin(marker) {
    for (let [a, b, c] of winConditions) {
        if (board[a] === marker && board[b] === marker && board[c] === marker) {
            return true;
        }
    }
    return false;
}

// 检测是否平局
function checkDraw() {
    return board.slice(1).every(cell => cell !== '');
}

function playerName() {
    startGameBtn.addEventListener(`click`, () => {
        if (playerOneInput.value && playerTwoInput.value) {
            currentPlayer = playerOneInput.value
            statusText.textContent = `${currentPlayer}的回合`
            startGameBtn.disabled = true
        } else {
            alert(`请输入两位玩家的名字`)
        }
    })
}

function clickSquare() {
    const cells = document.querySelectorAll(`.cell`)

    cells.forEach((cell, index) => {
        cell.addEventListener(`click`, () => {
            if (cell.textContent === `` && currentPlayer) {
                const marker = currentPlayer === playerOneInput.value ? `O` : `X`;
                const span = document.createElement(`span`)
                span.textContent = marker
                span.style.color = marker === `X` ? `#FF0000` : `#0000FF`
                
                cell.appendChild(span)
                // 更新棋盘状态：index+1对应格子编号1-9
                board[index + 1] = marker;

                // 检查获胜
                if (checkWin(marker)) {
                    statusText.textContent = `${currentPlayer}获胜！`;
                    // 禁用所有格子点击，结束游戏
                    cells.forEach(c => c.style.pointerEvents = 'none');
                    return;
                }

                // 检查平局
                if (checkDraw()) {
                    statusText.textContent = `平局！`;
                    return;
                }

                // 切换玩家
                switchPlayer()
            }
        })
    })
}

clickSquare()
playerName()

关键说明 #

• 棋盘状态数组：board数组索引1-9对应井字棋的9个格子，落子后立即更新对应位置的标记
• 获胜检测：遍历winConditions中的每一组组合，判断三个位置是否都是当前玩家的标记
• 平局检测：检查board中1-9的位置是否全部被填充，没有空值
• 游戏结束处理：获胜或平局后，禁用所有格子的点击事件，防止后续操作

内容的提问来源于stack exchange，提问作者danilo