JS开发HTML井字棋游戏时AI bot随机放置圆圈棋子功能实现问题

首先列出你现有代码的问题点：

• Ai函数不需要传入多余参数，cell和CIRCLE_CLASS都是全局可直接访问的变量
• if(circleTurn = true)是赋值操作，不是相等判断，会强制把回合状态设为circle方
• placeMark方法要求传入DOM元素对象，你直接传入随机数字会报错
• 没有过滤已被占据的格子，随机到已落子的格子会触发无效操作
• 缺少落子后的胜负、平局判断，以及回合切换、悬浮样式更新逻辑
• 整体代码缺失公共的回合切换方法，需要补充
• CSS中使用了--cell-size和--mark-size自定义变量但未定义，棋子无法正常显示

修复步骤 #

1. 先在CSS开头补充变量定义：

:root {
    --cell-size: 100px;
    --mark-size: calc(var(--cell-size) * 0.9);
}

2. 在JS中补充公共回合切换函数：

function swapTurn() {
    circleTurn = !circleTurn
    setBoardHoverClass()
}

3. 替换原Ai函数：

function Ai() {
    // 筛选所有未被占据的空白格子
    const availableCells = [...cellElements].filter(cell => 
        !cell.classList.contains(X_CLASS) && !cell.classList.contains(CIRCLE_CLASS)
    )
    // 从空白格子里随机选一个
    const randomIndex = Math.floor(Math.random() * availableCells.length)
    const selectedCell = availableCells[randomIndex]
    // 落圆圈标记
    placeMark(selectedCell, CIRCLE_CLASS)
    // 移除该格子的点击事件，避免后续用户误点
    selectedCell.removeEventListener('click', handleClick)
    // 落子后判断胜负、平局
    if(checkWin(CIRCLE_CLASS)) {
        endGame(false)
        return
    }
    if(isDraw()) {
        endGame(true)
        return
    }
    // 切换回玩家回合
    swapTurn()
}

4. 调整原handleClick函数，补充回合切换逻辑：

function handleClick(e) {
    const cell = e.target
    const currentClass = circleTurn ? CIRCLE_CLASS : X_CLASS
    placeMark(cell, currentClass)
    if(checkWin(currentClass)) {
        endGame(false)
        return
    } else if (isDraw()) {
        endGame(true)
        return
    }
    // 玩家落子完成，切换到AI回合
    swapTurn()
    // 触发AI落子
    Ai()
}

修改完成后AI会自动从空白格子随机选点落子，所有胜负、平局、回合切换逻辑都可以正常运行。

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