whack-a-mole：CSS版本

本文探讨了仅使用CSS创建whack-a摩尔游戏，这似乎是不可能的，因为CSS缺乏内置计时器或间隔功能。关键在于利用CSS动画来管理游戏状态并模拟时机。

基金会是纯CSS双击处理程序（在原件中链接的单独文章中详细介绍）。该处理程序巧妙地使用动画和元素定位来区分单点和双击。双击会触发特定的操作，而单击单击会触发其他操作。这种机制对于管理游戏的互动至关重要。

有两个核心原则在起作用：

1. 通过动画进行状态管理： CSS动画用于在游戏状态之间定义和过渡。
2. 交互性的位置控制：更改元素位置确定哪些元素响应用户点击。

animation-timing-function: step-end来创建痣的“弹出”和“弹出”效果。使用left （而不是transform ）定位痣可以避免Firefox中的布局问题。

“摩尔”和“孔”是与复选框黑客互动的风格的CSS标签，形成了游戏的交互式元素。当摩尔在一个孔上时，单击时，会触发摩尔的无线电输入；否则，它会触发孔的输入。

实施了多个孔和痣，每个孔都有独特的动画延迟，从而创造了游戏的动态痣运动。 Python脚本用于生成状态计算机的CSS选择器和密钥帧，从而简化了其他复杂的手工编码过程。由于CSS缺乏随机数生成能力，“随机”摩尔行为是硬编码的。

结果是一个完全由HTML和CSS构建的基于功能齐全的游戏，展示了CSS动画为游戏开发的令人惊讶的功能。

以上是whack-a-mole：CSS版本的详细内容。更多信息请关注PHP中文网其他相关文章！