防止重复点击：使用 CSS 类控制游戏棋子的显示和隐藏

本文将介绍一种简洁有效的解决方案，防止在基于 HTML 表格的游戏中重复点击同一单元格导致棋子消失的问题。通过使用 CSS 类来控制棋子的显示和隐藏，避免使用复杂的布尔逻辑，从而简化代码并提高可维护性。该方法适用于初学者，易于理解和实现，能够帮助开发者构建更稳定的游戏体验。

在开发基于 HTML 表格的游戏时，经常会遇到需要控制棋子在不同单元格之间移动的问题。一个常见的需求是防止用户重复点击同一个单元格，导致棋子意外消失。本文将介绍一种利用 CSS 类来控制棋子显示和隐藏的方法，避免使用复杂的布尔逻辑，从而简化代码并提高可维护性。

实现原理

核心思想是使用 CSS 的 display 属性和 JavaScript 的 classList API 来控制棋子的可见性。

1. 初始状态： 棋子（例如 "X"）默认隐藏，通过 CSS 设置 display: none;。
2. 点击事件： 当用户点击单元格时，JavaScript 函数会首先移除当前激活的棋子的 "active" 类，然后将 "active" 类添加到被点击单元格内的棋子上，使其显示。
3. 再次点击： 再次点击同一个单元格，会移除该单元格内棋子的 "active" 类，使其隐藏。

代码示例

以下是一个完整的代码示例，展示了如何使用这种方法：

立即学习“前端免费学习笔记（深入）”；

HTML:

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

在这个 HTML 结构中，每个单元格 <td> 包含一个 <div> 元素，该元素具有 icon 类，用于表示棋子。初始状态下，第一个单元格内的棋子具有 active 类，因此默认显示。

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

CSS:

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

这段 CSS 代码定义了单元格、表格和标题的样式。关键部分是 .icon 和 .active.icon 类的定义。.icon 类设置 display: none;，使棋子默认隐藏。.active.icon 类设置 display: block;，覆盖了 .icon 的设置，使具有 active 类的棋子显示。

JavaScript:

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

这段 JavaScript 代码定义了 deplacerPion 函数，该函数在点击单元格时被调用。

1. document.querySelector(".icon.active") 查找当前具有 active 类的棋子。
2. if (active) 检查是否找到了激活的棋子。如果找到了，则移除其 active 类，使其隐藏。
3. x.querySelector(".icon").classList.add("active") 将 active 类添加到被点击单元格内的棋子上，使其显示。

注意事项

• 确保每个单元格内的棋子都具有唯一的 icon 类。
• 可以根据需要自定义 CSS 样式，例如修改棋子的颜色、大小和边框。
• 该方法可以扩展到更复杂的游戏逻辑，例如限制棋子的移动范围或添加不同的棋子类型。

总结

通过使用 CSS 类来控制棋子的显示和隐藏，可以避免使用复杂的布尔逻辑，简化代码并提高可维护性。这种方法易于理解和实现，适用于初学者，能够帮助开发者构建更稳定的游戏体验。该方法的核心是利用 CSS 的 display 属性和 JavaScript 的 classList API，通过添加和移除 "active" 类来控制棋子的可见性。

以上就是防止重复点击：使用 CSS 类控制游戏棋子的显示和隐藏的详细内容，更多请关注php中文网其它相关文章！