如何检查井字棋单元格是否已被占用？JS开发问题咨询

我正在学习JavaScript，开发了第一个井字棋游戏，落子时会给单元格分配专属类，但遇到问题：不知道怎么检查单元格是否已被占用，禁止重复分配类和替换已有元素。

当前核心实现代码（完整代码见问题描述）：

function init(e) {
     if(!step) stepPlayerOne(e.target); 
     else stepPlayerSecond(e.target);
     step = !step;
     player = player == '0' ? 'x' : '0';
     currentPlayer.innerHTML = player.toUpperCase();
     checkWin();
};

我尝试的错误检查逻辑：

function stepPlayerSecond(target) {
    if(target.innerHTML = playerSecond) {
        target.classList.add('playerSecond');
    }
    else {
        remove();
    }
    count++;
};

解决方案 #

要解决重复落子的问题，核心是在执行落子操作前，先判断当前单元格是否已经被占用，如果已占用则直接终止当前操作。

1. 修改init函数（最直接的方式）

在init函数的最开头添加占用检查逻辑，一旦检测到单元格已被占用，就直接返回，不执行后续落子代码：

function init(e) {
    // 检查单元格是否已被占用：包含playerOne或playerSecond类则表示已落子
    if (e.target.classList.contains('playerOne') || e.target.classList.contains('playerSecond')) {
        return;
    }

    // 原有的落子逻辑不变
    if(!step) stepPlayerOne(e.target); 
    else stepPlayerSecond(e.target);
    step = !step;
    player = player == '0' ? 'x' : '0';
    currentPlayer.innerHTML = player.toUpperCase();
    checkWin();
};

2. 可选：封装检查逻辑（提升代码可读性）

如果希望代码结构更清晰，可以把占用检查封装成独立函数：

// 封装检查函数：判断单元格是否已被占用
function isBlockTaken(target) {
    return target.classList.contains('playerOne') || target.classList.contains('playerSecond');
}

function init(e) {
    if (isBlockTaken(e.target)) {
        return;
    }

    // 原有的落子逻辑不变
    if(!step) stepPlayerOne(e.target); 
    else stepPlayerSecond(e.target);
    step = !step;
    player = player == '0' ? 'x' : '0';
    currentPlayer.innerHTML = player.toUpperCase();
    checkWin();
};

你的尝试代码存在的问题 #

你写的检查逻辑有三个关键错误：

1. 运算符错误：用了赋值运算符=而非比较运算符==/===，这会把playerSecond的值赋给target.innerHTML，而非判断两者是否相等；
2. 逻辑颠倒：应该判断单元格是否已被占用（即已有playerOne/playerSecond类），如果是就不执行落子，而不是判断等于playerSecond才添加类；
3. 无效语法：remove()没有指定操作对象，属于无效调用。

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