Play Snake Directly in Your Browser’s Address Bar with Under 400 Lines of JavaScript

Overview

URL Snake is a JavaScript implementation of the classic Snake game that renders its graphics directly in the browser’s address bar using Unicode Braille characters. The game occupies a virtual screen of 40 × 4 cells, each cell represented by a single Braille character (U+2800 – U+28FF), which encodes an 8‑bit pattern.

Demo and Source

Live demo: http://demian.ferrei.ro/snake

Source code: https://github.com/epidemian/snake

Implementation Details

The script builds a one‑dimensional array grid of length GRID_WIDTH * 4. Each frame is generated by converting the grid into a string of Braille characters ( gridString()) and writing it to location.hash. The animation loop is driven by requestAnimationFrame and updates at a speed that increases with the snake’s length ( tickTime()).

Because some browsers escape the empty Braille character ( \u2800) as whitespace, the code detects the behaviour ( detectBrowserUrlWhitespaceEscaping()) and substitutes a non‑whitespace glyph (e.g., U+0ADF or U+27CB) that has a similar visual width.

Keyboard handling maps arrow keys, WASD and hjkl to direction vectors ( UP, DOWN, LEFT, RIGHT) and queues moves to avoid multiple direction changes within a single tick.

'use strict';
var GRID_WIDTH = 40;
var SNAKE_CELL = 1;
var FOOD_CELL = 2;
var UP = {x: 0, y: -1};
var DOWN = {x: 0, y: 1};
var LEFT = {x: -1, y: 0};
var RIGHT = {x: 1, y: 0};
var INITIAL_SNAKE_LENGTH = 4;
var BRAILLE_SPACE = '\u2800';
var grid;
var snake;
var currentDirection;
var moveQueue;
var hasMoved;
var gamePaused = false;
var urlRevealed = false;
var whitespaceReplacementChar;

function main() {
  detectBrowserUrlWhitespaceEscaping();
  cleanUrl();
  setupEventHandlers();
  drawMaxScore();
  initUrlRevealed();
  startGame();
  var lastFrameTime = Date.now();
  window.requestAnimationFrame(function frameHandler() {
    var now = Date.now();
    if (!gamePaused && now - lastFrameTime >= tickTime()) {
      updateWorld();
      drawWorld();
      lastFrameTime = now;
    }
    window.requestAnimationFrame(frameHandler);
  });
}

/* ... remaining functions omitted for brevity ... */

Controls and Gameplay

Players control the snake with the arrow keys, WASD or hjkl. Each food item (a single Braille dot) increases the snake’s length and the game speed. The visible play area is four rows high; moving the snake vertically requires rapid reactions to avoid wall or self collisions.

Side Effects

Each frame updates the URL hash, which creates a new entry in the browser’s history. A short session can generate hundreds of “URL Snake” entries. Chrome users can batch‑delete them; other browsers may require manual clearing.

Conclusion

URL Snake demonstrates that visual output can be produced in locations not intended for graphics by exploiting Unicode Braille encoding and the address‑bar URL. The project is open‑source and invites contributions via its GitHub repository.