Neon Snake
Arcade Cyberpunk retro del clásico Snake con ranking global en tiempo real y audio sintetizado.
Reinvención moderna del clásico juego Snake de estética Cyberpunk y neón, construida íntegramente con HTML5 Canvas y JavaScript Vanilla sin librerías pesadas. Dispone de un motor de audio chiptune de 8 bits generado procedimentalmente en el navegador mediante la Web Audio API y persistencia serverless de puntuaciones en tiempo real respaldada por Supabase (PostgreSQL).
Objetivos del Sistema
Recrear la experiencia arcade retro del clásico Snake con una estética Cyberpunk y efectos visuales de neón en HTML5 Canvas.
Implementar persistencia global en tiempo real para la tabla de récords (leaderboard) sin servidores backend dedicados usando Supabase PostgreSQL.
Diseñar un motor de audio 8-bit sintetizado procedimentalmente en el navegador mediante la Web Audio API con cero ficheros de audio externos.
Demostrar la potencia del desarrollo web frontend puro (Vanilla JS ES6+) logrando un Game Loop determinista y fluido a 60 FPS.
Capacidades Principales
Game Loop a 60 FPS: bucle de renderizado ultrafluido en HTML5 Canvas con aceleración progresiva y colisiones en rejilla.
Estética Neón Cyberpunk: estelas de partículas luminosas, efectos de glow perimetral y feedback visual tipo glitch en colisiones.
Ranking Global en Tiempo Real: tabla de récords mundial sincronizada instantáneamente a través de canales Supabase Realtime.
Sintetizador Web Audio 8-Bit: síntesis procedimental en el navegador de ondas cuadradas y efectos de sonido retro sin descargas de audio.
Controles Multiplataforma: soporte fluido de teclado (cursores / WASD) y botones virtuales táctiles adaptados a pantallas móviles.
Arquitectura y Especificaciones de Diseño
Arquitectura desacoplada cliente-BaaS: el cliente es un juego monobloque HTML5/Canvas que corre a 60 FPS en el navegador. Al finalizar la partida, despacha una llamada REST/WebSocket asíncrona a Supabase para validar y registrar la puntuación con políticas de seguridad a nivel de fila (RLS).
🔍 Haz clic en el diagrama para ampliar a pantalla completa
Principios Arquitectónicos Invariantes:
- Pureza Frontend: cero frameworks de renderizado, aprovechando directamente las primitivas gráficas del Canvas 2D.
- Serverless de Coste Cero: persistencia global de datos respaldada en la nube mediante Backend-as-a-Service (PostgreSQL de Supabase).
- Audio Procedural Eficiente: los sonidos se crean en tiempo de ejecución modulando osciladores y nodos de ganancia en memoria.
Stack Tecnológico
FRONTEND
AUDIO
BACKEND
HOSTING
Artículos de Referencia & Documentación de Construcción
Esta aplicación está respaldada por una serie técnica publicada paso a paso en el blog:
De Cero a Héroe: Crea un Snake Game Cyberpunk con Ranking en Tiempo Real usando Supabase y JS Vanilla
¿Recuerdas el clásico Snake? Lo hemos traído al futuro con estética Cyberpunk y lo hemos conectado a la nube. En este tutorial ‘De …
Leer artículo completo →Historial Evolutivo & Versiones (SemVer)
Registro formal de entregas, características y revisiones de seguridad:
Lanzamiento oficial de Neon Snake con ranking global en tiempo real y audio procedural
- Implementación completa de mecánicas arcade en Canvas a 60 FPS con aceleración progresiva.
- Integración de Supabase Realtime y PostgreSQL para tabla de récords mundial protegida por RLS.
- Motor de efectos de sonido chiptune 8-bit sintetizado en el cliente mediante Web Audio API.
- Controles táctiles virtuales para dispositivos móviles y teclado responsivo.
- Estado congelado como pieza de arcade y demostrador de arquitectura serverless ligera.
Persistencia en la nube con Supabase y ranking multijugador
- Esquema SQL de tabla snake_scores y políticas de seguridad públicas RLS.
- Suscripción reactiva a eventos de inserción de puntuaciones en tiempo real.
Prototipo inicial del bucle de juego y Canvas 2D
- Movimiento básico de serpiente, generación de comida y detección de colisiones de pared.