Neon Snake
Cyberpunk retro arcade of classic Snake with real-time global leaderboard and synthesized audio.
Modern Cyberpunk neon reimplementation of classic Snake, built purely with HTML5 Canvas and Vanilla JavaScript with zero framework dependencies. Features a procedural 8-bit chiptune audio synth running directly in browser memory via Web Audio API and real-time serverless high-score leaderboard synchronization backed by Supabase (PostgreSQL).
System Objectives
Recreate the retro arcade experience of classic Snake with a Cyberpunk aesthetic and neon visual effects on HTML5 Canvas.
Implement real-time global persistence for the high-score leaderboard without dedicated backend servers using Supabase PostgreSQL.
Design a procedural 8-bit audio synth engine running directly in browser memory via Web Audio API with zero external audio assets.
Demonstrate the power of pure frontend web development (Vanilla JS ES6+) achieving a smooth deterministic 60 FPS Game Loop.
Key Capabilities & Modules
60 FPS Game Loop: ultra-smooth HTML5 Canvas render loop featuring progressive velocity scaling and precision grid collisions.
Cyberpunk Neon Aesthetic: glowing particle trails, perimeter bloom effects, and dynamic glitch visual feedback on collision.
Real-Time Global Leaderboard: worldwide high-score rankings synchronized instantaneously through Supabase Realtime channels.
8-Bit Web Audio Synthesizer: procedural in-browser square-wave synthesis producing retro sound effects with zero audio file downloads.
Cross-Platform Controls: seamless support for keyboard (arrows / WASD) and touch-screen virtual D-pad on mobile devices.
Architecture & Design Specifications
Decoupled client-BaaS architecture: the client is a self-contained HTML5/Canvas game running at 60 FPS in browser memory. Upon game over, it dispatches an asynchronous REST/WebSocket call to Supabase to register high scores governed by Row Level Security (RLS) policies.
🔍 Click diagram to enlarge to fullscreen
Invariant Architectural Principles:
- Pure Frontend Philosophy: zero bloated frameworks, leveraging native 2D Canvas graphics primitives directly.
- Zero-Cost Serverless: cloud-backed global data persistence through managed Backend-as-a-Service (Supabase PostgreSQL).
- Efficient Procedural Audio: sound effects are synthesized at runtime by modulating oscillators and gain nodes in memory.
Technology Stack
FRONTEND
AUDIO
BACKEND
HOSTING
Reference Articles & Architecture Series
This application is fully documented in an engineering series published on the blog:
From Zero to Hero: Create a Cyberpunk Snake Game with Real-Time Ranking using Supabase and Vanilla JS
Remember classic Snake? We’ve brought it to the future with a Cyberpunk aesthetic and connected it to the cloud. In this ‘From …
Read full article →Evolutionary History & Versions (SemVer)
Formal record of releases, feature additions, and security patches:
Official Neon Snake release featuring real-time global leaderboard and procedural synth
- Full arcade Canvas game loop implementation at 60 FPS with progressive velocity acceleration.
- Supabase Realtime and PostgreSQL integration for global high-score leaderboard protected by RLS.
- In-browser 8-bit chiptune sound engine synthesized via Web Audio API.
- Virtual touch controls for mobile smartphones and responsive keyboard mapping.
- Frozen state as an arcade showcase and lightweight serverless architecture demonstrator.
Cloud persistence with Supabase and multiplayer high-score table
- SQL schema for snake_scores table and public RLS security policies.
- Reactive subscription to real-time score insertion events.
Initial Canvas 2D game loop and motion prototype
- Basic snake movement, food spawning, and boundary wall collision detection.