Nokia Snake Game
Una recreación nostálgica del clásico juego Snake del Nokia 3310, construido con React y HTML5 Canvas. Juega directamente en tu navegador.
¿Recuerdas el Nokia 3310? El teléfono que podía sobrevivir a todo. Antes de los smartphones, antes de las pantallas táctiles, existía Snake.
Lo reconstruí desde cero. Mismas reglas simples. Mismo gameplay adictivo. Ahora en tu navegador.
Juega
El Original
Snake apareció por primera vez en los teléfonos Nokia en 1998. Las reglas eran simples: controla una línea creciente, come puntos, no golpees las paredes ni a ti mismo. Sin tutoriales. Sin compras en la aplicación. Solo gameplay puro.
La versión del Nokia 3310 se volvió legendaria. Se envió en más de 100 millones de dispositivos e introdujo a toda una generación a los juegos móviles. La pantalla LCD gris, los píxeles gruesos, el satisfactorio bip cuando comías un punto — esto definió los juegos portátiles durante años.
Construyendo la Recreación
Renderizado con Canvas
El juego usa HTML5 Canvas para control pixel-perfect. Cada frame:
- Limpia la pantalla con el fondo del tema (claro:
#fafafa, oscuro:#171717) - Dibuja una cuadrícula sutil para orientación visual
- Renderiza la serpiente como una serie de rectángulos rellenos
- Dibuja la comida como un pequeño círculo coloreado
La cabeza de la serpiente es ligeramente más grande que los segmentos del cuerpo, facilitando el seguimiento de tu dirección.
Arquitectura del Game Loop
El juego corre en un loop basado en setTimeout en lugar de requestAnimationFrame. Esto da control preciso sobre la velocidad — la serpiente se mueve a intervalos fijos, igual que el original.
Game Loop:
1. Procesa cambio de dirección en cola
2. Calcula nueva posición de la cabeza
3. Verifica colisiones (paredes, uno mismo)
4. Maneja colisión con comida → crecer + acelerar
5. Actualiza posiciones de la serpiente
6. Renderiza frame
7. Programa siguiente tick
La velocidad comienza en 150ms por movimiento y disminuye 5ms cada vez que comes, hasta un mínimo de 50ms. Esto crea la curva de dificultad gradual que hizo al original tan adictivo.
Controles
Desktop:
- Teclas de flecha o WASD para movimiento
- Espacio para pausar/reanudar
Móvil:
- Botones direccionales en pantalla
- Botones circulares en diseño D-pad amigables al tacto
El sistema de control previene giros de 180° (no puedes invertir la dirección inmediatamente), coincidiendo con el comportamiento del juego original.
Gestión de Estado
El juego usa React refs para estado crítico de rendimiento (posición de serpiente, dirección, comida) y React state para elementos de UI (puntuación, estado del juego). Este enfoque híbrido mantiene el game loop rápido mientras permite que React maneje re-renderizados para la pantalla de puntuación y overlays.
Las puntuaciones máximas persisten en localStorage, sobreviviendo a actualizaciones del navegador.
Decisiones de Diseño
Diseño Adaptable al Tema
El juego se adapta al esquema de colores de tu sistema con una paleta minimalista y moderna:
Modo claro:
- Fondo:
#fafafa(blanco apagado) - Serpiente:
#171717(casi negro) - Comida:
#3b82f6(azul)
Modo oscuro:
- Fondo:
#171717(casi negro) - Serpiente:
#fafafa(blanco apagado) - Comida:
#60a5fa(azul claro)
El marco del teléfono usa esquinas redondeadas y sombra para evocar el plástico de los teléfonos móviles clásicos.
Tamaño de la Cuadrícula
El Nokia 3310 original tenía una pantalla de 84×48 píxeles. Elegí una cuadrícula de 20×20 con celdas de 12px, que:
- Se ajusta bien en pantallas modernas
- Proporciona suficiente desafío sin ser frustrante
- Escala bien en dispositivos móviles
Sin Sonido
Intencionalmente dejé fuera los efectos de sonido. El original tenía bips simples, pero el audio puede ser intrusivo en sitios web. El feedback visual es suficientemente claro — ves la serpiente crecer cuando come.
Lo Que Aprendí
Canvas es poderoso. Para juegos con gráficos simples, Canvas proporciona todo lo que necesitas sin la complejidad de WebGL o motores de juegos.
Refs superan a state para game loops. React state dispara re-renderizados. En un game loop corriendo 10+ veces por segundo, eso es muy lento. Refs dan valores mutables sin el costo de renderizado.
Los controles móviles necesitan diseño cuidadoso. Los objetivos táctiles deben ser lo suficientemente grandes para acertar confiablemente. El diseño D-pad se siente natural porque coincide con los controles físicos de juegos.
Ideas Futuras
- Agregar características clásicas de Snake II (obstáculos, items bonus)
- Implementar multiplayer usando WebSockets
- Agregar efectos de sonido con toggle de silencio
- Crear diferentes presets de dificultad
- Agregar un leaderboard usando un servicio backend
Por ahora, disfruta este viaje en el tiempo. ¿Qué puntuación puedes lograr?
Outcomes
- •Diseño minimalista con soporte para modo claro y oscuro
- •Game loop suave con dificultad progresiva
- •Controles amigables para dispositivos móviles
- •Persistencia de puntuación máxima usando localStorage
- •Diseño responsivo que funciona en todos los tamaños de pantalla