A Mole That Never Needed JavaScript

The checkbox hack has powered everything from simple toggles to complete state machines in pure CSS. That same trick, paired with CSS animations, can take us somewhere unexpected: a playable Whack-A-Mole game with no JavaScript at all. It sounds impossible for a language without timers or loops, but CSS animations quietly provide the timing mechanism.

Timing Is Just an Animation

The foundation is a pure-CSS double-click handler. CSS has no concept of a click, much less a double-click, but animations can fake the timing. The mechanism works like this: the first click moves a "double-click" element beneath the cursor while a masking element starts sliding up to cover it. A second click lands on the double-click element if it arrives quickly; otherwise, it hits the masking element, which behaves like a single-click.

Two ideas make this possible:

  • Animations can drive state changes on a schedule.
  • Changing an element's position can change whether a user's action targets it or another element.

Pop-Up Moles With step-end

For the mole itself, the target doesn't need to scroll smoothly. Using animation-timing-function: step-end makes the mole pop in and out of view, like it's emerging from a hole.

Positioning the mole with left proved more reliable than a CSS translation. Changing transform in Firefox doesn't trigger a re-layout, which leaves the browser thinking the cursor is still over the old element — a problem for a game that depends on precise click targets.

Holes, Moles, and Radio Inputs

Visually, both the mole and the hole are restyled labels. Each triggers its own radio input via the checkbox hack. When the mole's animation carries it over the hole, clicking that region activates the mole's radio; when the mole is hidden, the same click hits the hole's radio instead.

Multiple holes are chained together, with moles bouncing between them on staggered negative animation-delay values. The state machine tracks which moles were hit and which holes were collapsed, turning the pattern into a game.

Why Scripting Helps

Two things make hand-coding this unwieldy. CSS has no random number support, so the mole's unpredictable behavior must be hardcoded. And the state machine selectors are numerous. Short Python scripts were used to generate both the keyframes and the selectors, which keeps the final CSS manageable at the cost of a small build step.

The result stands: a reaction-based game built entirely from HTML and CSS, with animations doing the work JavaScript would normally own.