如何防止在同一块瓷砖中单击两次？

Question

我正在制作一个游戏，我试图找出如何防止我的X被删除时，在同一瓷砖点击两次，现在我可以移动我的"X“，但如果我点击两次，它会被删除。我试过布尔，但对他们我很糟糕。有什么方法可以用布尔或其他方法来完成吗？我是学校的初学者。

​

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;
  }
}

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%;
}

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

​

Answer 1

您可以简单地添加/删除显示/隐藏X的类，而不是布尔值。

在下面的回答中，单击，我们首先检查是否有任何Xs是活动的，如果是的话，删除活动。然后将活动类添加到单击单元格内的X中。

​

function deplacerPion(x) {
  let active = document.querySelector(".icon.active");
  if (active) {
    active.classList.remove("active")
  }
  x.querySelector(".icon").classList.add("active");
}

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%;
}

.icon {
  display: none;
}

.active.icon {
  border: 1px solid #000;
  height: 80px;
  width: 80px;
  display: block;
}

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

​