防止在同一游戏单元格中重复点击导致内容消失的解决方案

防止在同一游戏单元格中重复点击导致内容消失的解决方案

在开发基于网格的简单游戏中，经常会遇到用户重复点击同一单元格的问题。如果处理不当，这可能会导致意外的行为，例如单元格内容（例如代表玩家的“X”）消失。本文将介绍一种使用css类名切换来解决此问题的方案，避免使用复杂的布尔逻辑。

核心思想是：

1. 使用CSS控制显示/隐藏: 为单元格中的内容元素（例如包含”X”的div）定义两个CSS类：一个用于隐藏，一个用于显示。
2. 点击事件处理: 在单元格的点击事件处理函数中，首先移除所有已激活单元格的激活状态，然后将当前点击单元格的内容元素设置为激活状态。

具体实现步骤如下：

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类用于显示元素。

Tweeze

Tweeze.app是一个AI驱动的个性化新闻简报服务，定位为个人互联网AI阅读助手

37

查看详情

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类名切换，我们可以有效地控制单元格内容的显示与隐藏，避免用户重复点击导致内容消失的问题。这种方法简单易懂，易于实现，并且避免了复杂的布尔逻辑，非常适合初学者学习和使用。此外，这种方法也具有良好的扩展性，可以方便地添加更多的样式和功能。