我们已经了解了 复选框黑客，以及它如何用于在 CSS 中构建 完整的状态机。 今天，我们将把这种思路更进一步，构建一个简单的打地鼠游戏，玩家需要快速反应才能获胜……完全不使用 JavaScript。
这在没有计时器或间隔概念的语言中可能看起来有点愚蠢，但秘密在于 CSS 确实有——它只是封装在一个名为 CSS 动画的小功能中。
看一看这个双击处理程序。 请注意，CSS 不知道什么是点击，更不用说双击了
它是如何工作的？ 以下是重要元素的记录，重新着色并减速
当您第一次点击按钮时，它会将双击元素移动到光标下方，但它还会导致遮罩元素开始向上移动以覆盖它。
- 如果第二次点击在第一次点击后足够快（如记录左侧），它将发生在双击（蓝色）元素上。
- 否则（如记录右侧），它将发生在遮罩（黄色）元素上，这具有单击元素的效果。
（有关深入说明，请查看我在纯 CSS 双击处理程序上的文章 此处。）
这里有两个想法在起作用
- 动画可用于根据设定的模式管理状态。（我在这里松散地使用“状态”一词。）
- 通过更改元素的位置，我们可以更改用户是否可以执行操作。
这就是我们需要的全部！
现在，我们不是让目标滚动到视图中，而是可以使用 animation-timing-function: step-end 让它弹出和消失，就像地鼠在地洞里一样
我尝试了几种不同的方法来将地鼠移开，并更改其绝对位置——这里是 left——似乎效果最好。 使用平移会很方便，但不幸的是，Firefox 认为光标在错误的元素上，因为在 Gecko 布局引擎中更改 transform 不会触发重新布局。（通常，这对性能来说是一件好事，但对我们的小演示来说并不那么好！）
通过一些样式，我们可以让它看起来更像一个游戏元素
这里的“地鼠”基本上是一个重新设计的 CSS 标签，它触发复选框黑客。 洞也是如此。 当地鼠的动画将其移到洞上时，在该区域点击会触发地鼠的单选按钮； 当地鼠不在时，点击会触发洞的单选按钮。
下一步是将几个洞并排放置，让地鼠在其中弹跳，每个地鼠都有不同的负 animation-delay。 通过状态机读取哪些地鼠被击中以及哪些洞被塌陷，它就变成了一个有趣的小游戏。
我使用了 简短的 Python 脚本 来生成状态机选择器和地鼠关键帧。 否则，手工编码会变得有点难以处理。 这主要是因为 CSS 也 没有随机数的概念，这使我们别无选择，只能对“随机”地鼠行为进行硬编码。
我们已经有了：一个完整的基于反应的游戏，完全用 HTML 和 CSS 实现。
太棒了，我差点把屏幕弄坏了。
你能向我们展示如何只用 CSS 制作一个 2D 平台游戏吗？
我担心这个演示的可访问性，特别是复选框黑客。 当屏幕阅读器宣布技巧中使用的标签时，屏幕阅读器只会通知用户这是一个标签。 结合真正的复选框具有
display:none;的事实，这样复选框就不会被宣布，用户也无法“激活”标签，用户无法选中复选框以玩游戏。 因此，这款游戏对于屏幕阅读器用户来说完全无法使用。我希望你在写这篇博文时，你的意图只是向所有观看此页面的人说明用纯 CSS 构建打地鼠游戏是可能的，而不是建议前端开发人员这是构建游戏的最佳方法。