Arianna Copa: Pac-Man Clock
Pac-Man’s Clock is a project that reinterprets the function of a clock through the aesthetics and dynamics of the Pac-Man video game.
It’s not a traditional clock, but its nature is more playful and conceptual than descriptive.
The widget consists of a grid of 60 dots, each representing a second. Pac-Man moves along the grid, “eating” a dot every second, just like in the original game. Even his movements are identical, including the way he moves between the various grids. At the end of the path, he encounters a prize, which symbolizes the minute just passed.
For minutes 1 to 58, the prize is represented by a piece of fruit.
At the 59th minute, the prize becomes a ghost, representing the passage to the next hour.
Below the grid is a counter section, which allows for an alternative way to read the time:
The ghosts correspond to the hours,
while the fruits represent the elapsed minutes.
At each new hour, the minute counter resets, allowing Pac-Man to restart his journey and maintaining a clear and intuitive display for the user.
In addition, the project integrates a visual indicator of the computer’s battery status: the dots on the grid blink at a frequency proportional to the battery level; the lower the battery, the more intense the animation becomes. When the battery is at full capacity, the dots remain static, indicating a balanced state.
Desktop demo - simulation with full battery at 01:27
Desktop demo - simulation with 38% battery at 14:18
Desktop demo - simulation with 38% battery at 14:19
Desktop demo - simulation with full battery at 19:59
This screenshot shows the widget states at different times of day and with different battery percentages.
An interesting part of the code is the one that logically calculates the direction Pac-Man should follow and its movement. This code is interesting because:
It calculates the direction of movement by comparing the current position with the previous one
It determines whether the movement is more vertical or horizontal
It sets the appropriate rotation angle:
90° when moving downwards
-90° when moving upwards
0° when moving to the right
180° when moving to the left
if (prevRect && second !== 59) {
if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 5) {
rotationAngle = deltaY > 0 ? 90 : -90;
} else if (Math.abs(deltaX) > 5) {
rotationAngle = deltaX > 0 ? 0 : 180;
}
lastRotationAngle = rotationAngle;
} else if (second === 59) {
rotationAngle = lastRotationAngle;
}The rotation is then applied with this CSS transformation:
pacmanEl.style.transform = `translate(-50%, -50%) rotate(${rotationAngle}deg)`;