防止在同一游戏单元格中重复点击导致内容消失的解决方案
在开发基于网格的简单游戏中，经常会遇到用户重复点击同一单元格的问题。如果处理不当，这可能会导致意外的行为，例如单元格内容（例如代表玩家的“X”）消失。本文将介绍一种使用CSS类名切换来解决此问题的方案，避免使用复杂的布尔逻辑。
核心思想是：
- 使用CSS控制显示/隐藏: 为单元格中的内容元素（例如包含"X"的div）定义两个CSS类：一个用于隐藏，一个用于显示。
- 点击事件处理: 在单元格的点击事件处理函数中，首先移除所有已激活单元格的激活状态，然后将当前点击单元格的内容元素设置为激活状态。
具体实现步骤如下：
1. HTML结构调整：
将每个单元格的内容（例如"X"）包裹在一个div元素中，并赋予其初始类名icon。
<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>2. CSS样式定义：
定义icon类用于隐藏元素，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; /* 添加active类后显示 */
}3. JavaScript事件处理：
编写deplacerPion函数，在点击单元格时切换active类。
function deplacerPion(x) {
let active = document.querySelector(".icon.active"); // 查找当前激活的元素
if (active) {
active.classList.remove("active") // 移除当前激活元素的active类
}
x.querySelector(".icon").classList.add("active"); // 为当前点击的单元格的内容元素添加active类
}代码解释：
- document.querySelector(".icon.active")： 这行代码使用CSS选择器查找当前页面中同时具有icon和active类的元素。如果找到了，说明当前有一个单元格处于激活状态。
- active.classList.remove("active")： 这行代码从找到的激活元素中移除active类，从而隐藏该单元格的内容。
- x.querySelector(".icon").classList.add("active")： 这行代码首先使用querySelector(".icon")找到当前点击的单元格x内部的具有icon类的元素（即包含"X"的div），然后为其添加active类，从而显示该单元格的内容。
注意事项：
- 确保每个单元格的内容都被包裹在一个具有icon类的div中。
- 初始状态下，只有一个单元格的div应该同时具有icon和active类，表示游戏开始时该单元格已被选中。
总结：
通过使用CSS类名切换，我们可以有效地控制单元格内容的显示与隐藏，避免用户重复点击导致内容消失的问题。这种方法简单易懂，易于实现，并且避免了复杂的布尔逻辑，非常适合初学者学习和使用。此外，这种方法也具有良好的扩展性，可以方便地添加更多的样式和功能。
