Ideación con IA

Partimos de prompt engineering para definir mecánicas (endless runner), interacción (salto, pausa, reinicio), y estética (look neón minimal).

• Definimos variables de diseño (colores, glow, rejilla).
• Elegimos <canvas> para rendimiento y control de dibujo.
• Concretamos el loop: update → draw → requestAnimationFrame.

Implementación front

JavaScript vanilla con físicas simples y detección AABB. Responsive por aspect-ratio y escalado DPR.

• Input: teclado (Espacio/↑/P/R) + táctil
• Físicas: gravedad, salto, cooldown
• Dificultad: velocidad progresiva
• Render: jugador, obstáculos, partículas, rejilla
• Estado: ready | playing | paused | gameover

Leaderboard con WordPress

Plugin mínimo que expone dos endpoints REST:

POST /wp-json/neonrunner/v1/score  { name, score }
GET  /wp-json/neonrunner/v1/top?limit=10

• Tabla wp_neonrunner_scores (name, score, user_id, ip, created_at).
• Rate limit por IP para evitar spam.
• Render del ranking con fetch() en un widget separado.

Embeber en Elementor

Separar Juego y Leaderboard en dos widgets HTML:

• Juego: canvas + overlay + botón Guardar puntaje.
• Leaderboard: bloque independiente con “Actualizar”.
• Auto-refresh: evento custom neonrunner:scoreSaved.

Seguridad & performance

• Validación en servidor y límites razonables de score.
• Opción de nonce de WP o HMAC servidor para endurecer POST.
• Canvas optimizado: clamp de dt, pooling simple de partículas.
• CSS scoped para no interferir con Elementor.

Roadmap

• Sprites y SFX (Web Audio) + mute toggle.
• Skins/temas y selector de dificultad.
• Leaderboard por día/semana/mes.
• Log-in opcional para perfiles y avatares.