Chap who coded Google’s Pac-Man clone reveals how the game freaked out Firefox

Autoplaying games and sounds on website homepages are now avoided by default, requiring explicit user consent.

In 2010, Google celebrated Pac-Man's 30th anniversary with a playable doodle created by designer Marcin Wichary. Wichary recreated the game using HTML and CSS, adapting the maze to spell out "GOOGLE." Initially, the game was only accessible when a user actively visited the Google homepage. However, a decision was made to have the game automatically start after ten seconds of user inactivity on the homepage. This autoplay feature caused an unexpected issue for users of the Firefox browser who had installed an extension called CoolPreviews. This extension would invisibly open a preview of any hovered link, and in this case, it silently opened Google's homepage with the Pac-Man doodle playing in the background. This led to reports of computers making strange noises. Wichary quickly released a patch within hours, adding a mute button and a requirement for user interaction to start the game and its sounds, resolving the issue.

The incident highlights the critical importance of considering browser extensions and user-specific configurations when deploying interactive elements on globally accessed websites. Even seemingly benign features like an interactive doodle can trigger unintended consequences across diverse user setups, demonstrating the complexity of web deployment. This case underscores the need for robust testing that accounts for potential conflicts with popular add-ons, a practice that has become even more vital with the proliferation of browser extensions and user-customized browsing environments.

The rapid patching of the Pac-Man doodle demonstrates a proactive approach to user experience and technical debt. Wichary's quick response to the autoplay issue, implementing a mute function and click-to-play mechanism, became a de facto standard for handling noisy web content. This event likely influenced future Google Doodle development and web design best practices, emphasizing user control and silent loading as essential for maintaining a positive user experience across all browsers and their associated extensions.