我怎么能防止点击两次在同一瓷砖?

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的类，而不是布尔值。

在我下面的答案中，点击，首先我们检查是否有任何x是活动的，如果是，删除活动。然后将活动类添加到单击单元格内的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>