Recreating Donkey Kong with Pure CSS

In 2016 a developer set out to blend two long‑standing ambitions: generating photorealistic images with CSS and building an interactive game without JavaScript. The outcome, HTML Kong, is a faithful reproduction of the Game & Watch Donkey Kong title—an iconic 1980s handheld that sold over a million units—using only HTML, CSS, SVG, and a touch of icon‑font magic.

The Casing

The first hurdle was to emulate the game’s distinctive clamshell casing. The author began with a series of <div> elements, layering border and box-shadow to craft the colored edges. Circular knobs and the LCD screen were achieved with border-radius. When simple borders couldn’t capture the subtle shading, multiple linear-gradient layers were stacked on the background property—a trial‑and‑error process that, surprisingly, yielded the most convincing results.

Game Screen Backgrounds

For the static backgrounds, SVG proved ideal. The developer sketched each component as a monochrome bitmap in Microsoft Paint, then used an online converter to translate the pixels into SVG paths. After manually coloring and combining the fragments, CSS filters added depth. Initially two separate SVG files were used—one per screen—but Chrome’s support for SVG stacking allowed a single merged file, simplifying the DOM.

The LCD Elements

Replicating the LCD display’s single‑color, pixelated look required a custom icon font. Each sprite (Mario, Donkey Kong, barrels, ladders) became a glyph. The glyphs were again sketched in Paint, converted to SVG, and bundled with IcoMoon into a WOFF font. By rendering the sprites as text and applying text-shadow, the classic LCD glow was recreated without any images.

Mario’s Movement

Movement logic relied on a clever use of radio inputs. Each possible Mario position was tied to a radio button, and the selected button controlled a <div> that displayed the character via the :checked pseudo‑class and the general sibling selector. Clicking a label targeting a different radio button moved Mario, while the same mechanism positioned the movement controls.

Barrel Rolling

Barrels were animated with CSS keyframes. A finite set of keyframes defined the rolling motion, and each barrel’s <div> received a different animation-delay to stagger the movement. For the top screen, where barrels could take multiple paths, four additional keyframe sets were created. The animation looped endlessly, keeping the logic simple and the performance low.

Collision Detection

Detecting a hit required a mechanical‑style key: a stack of invisible <div> elements whose teeth moved down the screen in sync with the barrels. When a tooth aligned with a barrel, it pushed a content block to the right, revealing a “hit” sprite of Mario and disabling the movement labels. The key’s vertical position was tied to Mario’s current location via the same radio‑button logic, ensuring collision timing matched the player’s movement.

Timelines & Jumping

To model the game’s branching timelines—where jumping a barrel delays a collision—the author added extra radio button states. Each timeline had its own collision key and set of keyframes, allowing the player to jump or climb and shift into a new timeline. Labels beneath the “JUMP” button or the ladder controls triggered these state changes.

Wire Detachment & State Persistence

The final level mechanic—detaching a wire to free Donkey Kong—required persistent state across moves. The trick was to use the animation-fill-mode: forwards property. An animation that hid a wire ran when the final jump was made, and because the fill mode kept the resulting styles, the wire remained hidden even after the radio button state changed.

Browser Support Evolution

When the project first launched in early 2013, only Firefox offered a playable experience. Chrome still demanded vendor prefixes for animation properties, and Edge was largely unsupported. Over the following years, browser vendors caught up: unprefixed CSS animations became stable, SVG stacking was implemented, and the required CSS selectors and pseudo‑classes were fully supported. Today, a recent version of Chrome or Edge will run the game smoothly, though Firefox remains the most reliable for full functionality.

Play & Legacy

The game can be tried at kong.詹姆斯.com, where you choose between two identical modes and hit START. For those craving the original feel, a Flash version exists in the Pica Pic retro collection.

Source: https://www.xn--8ws00zhy3a.com/blog/2016/07/html-kong#f16.1