本文旨在解决在游戏开发中，如何防止用户重复点击同一游戏格导致元素意外消失的问题。通过使用CSS类和JavaScript事件监听，我们提供了一种简洁有效的方法，避免使用复杂的布尔逻辑，实现点击格子的切换和状态管理。本文将详细介绍实现步骤，并提供完整的代码示例，帮助开发者轻松解决这一常见问题。
在游戏开发中，特别是涉及到棋盘类或网格类游戏时，经常会遇到用户点击同一格子的元素后，该元素反而消失的情况。这通常是由于重复触发了点击事件，导致状态错误切换。本文将介绍一种使用CSS类来管理元素状态的方法，避免使用复杂的布尔变量，从而更简洁地解决这个问题。
核心思路：使用CSS类控制元素的显示和隐藏
我们的核心思路是使用CSS类来控制元素的显示与隐藏，而不是直接操作元素的innerHTML。具体来说，我们将使用一个名为 active 的CSS类来标记当前激活的格子，通过JavaScript来添加或移除这个类，从而控制格子上元素的显示状态。
立即学习“Java免费学习笔记（深入）”；
实现步骤：
-
HTML结构调整：
首先，我们需要调整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>注意：初始状态下，我们给第一个格子的 div 元素添加了 active 类，使其默认显示。
-
CSS样式定义：
接下来，我们需要定义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 和 icon 类时，显示 */ }关键点在于 .icon 默认 display: none;，而 .active.icon 设置 display: block;，只有同时拥有这两个类的元素才会被显示。
-
JavaScript事件处理：
最后，我们需要编写JavaScript代码，处理格子的点击事件。
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") 获取当前拥有 active 类的元素。如果存在，则移除其 active 类，使其隐藏。然后，给当前点击的格子的 div 元素添加 active 类，使其显示。
完整代码示例：
将上述HTML、CSS和JavaScript代码整合在一起，就是一个完整的可运行示例。
<!DOCTYPE html>
<html>
<head>
<title>防止重复点击示例</title>
<style>
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;
}
</style>
</head>
<body>
<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>
<script>
function deplacerPion(x) {
let active = document.querySelector(".icon.active");
if (active) {
active.classList.remove("active");
}
x.querySelector(".icon").classList.add("active");
}
</script>
</body>
</html>注意事项：
- 确保CSS样式正确加载，否则可能导致元素无法显示。
- document.querySelector 方法返回的是第一个匹配的元素，如果你的页面上有多个棋盘，需要更精确的选择器。
- 可以根据实际需求修改CSS样式，例如改变激活状态的边框颜色、背景颜色等。
总结：
通过使用CSS类来控制元素的显示和隐藏，我们可以避免使用复杂的布尔逻辑，更简洁地解决重复点击导致元素消失的问题。这种方法不仅代码更易于理解和维护，而且性能也更好。在游戏开发中，合理利用CSS类可以简化代码，提高开发效率。这种方法也适用于其他需要状态切换的场景，例如按钮的激活状态、菜单的展开与收起等。
