Overview

Why play a game in a browser tab when you can play it in a tiny, flickering system overlay that was never meant for interactivity? This project is an exploration of UI subversion—the art of repurposing standard software elements for entirely unintended purposes. Inspired by "Snake in a Favicon" and "URL Address Bar Snake," I set out to conquer the final frontier of the Windows desktop: the Media Controls Overlay.

How It Works: The Canvas Pipeline

The game doesn't actually "exist" inside Windows. Instead, it lives on a hidden HTML5 canvas on a webpage. To get that image into the Windows Overlay, I utilized the MediaSession API. This API allows web developers to tell the OS what "song" is playing, who the "artist" is, and what the "album art" looks like.

By initiating a silent audio stream (a simple silent.mp3 file), I "wake up" the Windows Media Session. The game loop then takes the current state of the snake game, renders it to a 64x64 canvas, converts that canvas to a DataURL (Base64 PNG), and pushes it as the "Album Art" metadata. Windows sees this update and immediately refreshes the overlay with the new "frame" of the game.

Overcoming the Focus Paradox

The most significant technical roadblock was input handling. In any modern browser, a webpage cannot listen for keyboard events (like keydown for Arrow Keys) unless the tab is in active focus. This is a vital security feature, but for this project, it was a death sentence.

When a user presses Win+A to bring up the Windows 11 Media Overlay, the browser loses focus. The second the user clicks the browser to give the game focus, the overlay disappears.

The solution lay in the MediaSession Action Handlers. The OS allows specific hardware keys—the Media Keys—to communicate with a background application without shifting focus. By hijacking the previoustrack and nexttrack handlers, I was able to map physical keyboard buttons (and the on-screen overlay buttons) to the game's turning logic. This allowed for 100% background playability.

Technical Constraints & Solutions

  • The Flickering: Windows clears the previous album art before drawing the new one, causing a "flash" on every frame update. I implemented a Background Color Slider that allows users to match the game's background to their specific Windows theme (Light/Dark mode), which significantly reduces perceived flickering.
  • Variable Refresh Rates: Because metadata updates aren't as fast as a standard GPU-accelerated canvas, the game runs at a lower, more "retro" framerate to prevent the OS from lagging behind the game state.
  • UI as HUD: To maximize the 64x64 display, I moved the UI elements to the text metadata. The Current Score is displayed as the "Song Title," and the High Score is displayed as the "Artist Name."

The Future

This is a small step for Snake, but a giant leap for unnecessary desktop gaming. The project is fully open-source, and I hope it inspires others to look at boring UI elements as potential canvases. The code is modular enough that porting other simple titles is trivial.

Next Step: I'm officially retiring from Media Overlay development, but the challenge stands: Who is going to be the first to port DOOM to it?