JS实现棋盘游戏时如何防止重复点击同一格子删除棋子X

在校编程初学者开发网页小游戏时，已实现棋子“X”的基础移动功能，但存在异常：连续两次点击同一个格子时，棋子“X”会被异常删除。尝试过用布尔值做状态判断，但对布尔值使用逻辑不熟悉，需要实现同格子重复点击拦截，避免异常。
原有实现代码如下：

原有Javascript代码 #

var clique1fois = false;
var clique = null;
var aClique = false;

function deplacerPion(x) {
  if (aClique == true) {
    x.innerHTML = clique.innerHTML;
    clique.innerHTML = "";
    aClique = false;
    clique.style.border = "1px solid black";
    clique.style.height = "80px";
    clique.style.width = "80px";
  } else {
    x.style.border = "3px solid red";
    x.style.width = "76px";
    x.style.height = "76px";
    clique = x;
    aClique = true;
  }
}

原有CSS代码 #

td {
  height: 80px;
  width: 80px;
  text-align: center;
  font-size: 300%;
}

table {
  margin-left: auto;
  margin-right: auto;
}

#titre {
  text-align: center;
  font-size: 300%;
}

原有HTML代码 #

<div id="titre">Jeu de table</div>
<table border=1>
  <tr>
    <td onclick="deplacerPion(this)">X</td>
    <td onclick="deplacerPion(this)"></td>
  </tr>
</table>

原有逻辑没有校验第二次点击的格子和第一次选中的格子是否为同一个：第一次点击格子后，会将该格子标记为选中状态，第二次点击任意格子都会直接执行移动逻辑——把选中格子的内容赋值给当前点击格子，再清空选中格子的内容。如果两次点击的是同一个格子，就会出现“把格子内容赋值给自己后又清空自身内容”的问题，最终导致棋子“X”被异常删除。

在原有布尔状态判断的基础上，增加DOM节点相等校验，识别重复点击同个已选中格子的场景，拦截异常的移动清空操作即可。

修复后Javascript代码 #

var clique = null;
var aClique = false;

function deplacerPion(x) {
  if (aClique === true) {
    // 拦截：点击的是已选中的同一个格子，仅重置选中状态，不执行移动逻辑
    if (x === clique) {
      clique.style.border = "1px solid black";
      clique.style.height = "80px";
      clique.style.width = "80px";
      aClique = false;
      clique = null;
      return;
    }
    // 正常跨格子移动逻辑
    x.innerHTML = clique.innerHTML;
    clique.innerHTML = "";
    clique.style.border = "1px solid black";
    clique.style.height = "80px";
    clique.style.width = "80px";
    aClique = false;
    clique = null;
  } else {
    // 可选优化：点击空单元格不触发选中逻辑
    if (x.innerHTML.trim() === "") return;
    // 选中带棋子的格子，加高亮样式
    x.style.border = "3px solid red";
    x.style.width = "76px";
    x.style.height = "76px";
    clique = x;
    aClique = true;
  }
}

CSS和HTML部分不需要修改，复用原有代码即可。

逻辑说明 #

• 核心判断x === clique用于校验当前点击的格子和已选中的格子是否为同一个DOM节点，触发该场景时仅重置选中样式、清除选中状态，不执行清空原格子内容的操作，从根源避免棋子被误删
• 可选的空格子拦截逻辑，是为了避免点击无棋子的空单元格时错误触发选中高亮，交互逻辑更合理
• 布尔值aClique依然承担“当前是否有棋子处于选中待移动状态”的标记作用，和节点校验逻辑配合就能覆盖所有交互场景
• 修复代码中移除了原逻辑里声明但从未使用的冗余变量clique1fois，减少无效代码

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