View Project
Source Code

A recreation of Nintendo's Game & Watch Ball in pure HTML, CSS, and JavaScript

Game & Watches work by toggling segments on an LCD screen to simulate movement. This effect was replicated by toggling layers on an SVG file containing all of the segments of the original Game & Watch display

Game & Watch Ball

Just like the original, a set of 7-segment displays is used for scoring, and when the game is not in use, as a clock. Unlike the original, the clock cannot be manually set, but the system's time is used instead.

Timings are not exact to the original unit, but the clockspeed algorithm used is roughly similar, based on comparing timings between the recreation and footage of the original game.

User input is enabled through the arrow keys or clicking on the left/right sides of the display, allowing for both desktop and mobile use. Just like the original game, the time button toggles sound effects while the game is in use, but resets to the initial clock state when a game has been lost.