Mi Juego Arcade

HTML5 Canvas permite crear videojuegos directamente en el navegador sin plugins ni frameworks, usando solo JavaScript. Con Cerewro puedes generar un videojuego arcade completo desde una descripción en lenguaje natural: bucle de juego, física, colisiones, puntuación y niveles.

Estructura base de un juego HTML5

Esqueleto de juego HTML5 Canvas




  
  Mi Juego Arcade

Prompts para generar juegos completos

Prompt: Shooter espacial tipo Space Invaders

Crea un videojuego arcade completo en HTML5 Canvas + JavaScript puro:
- Nave espacial controlada por flechas del teclado o WASD
- Disparar con barra espaciadora (máximo 3 balas simultáneas)
- Oleadas de 30 enemigos con movimiento en zigzag
- Detección de colisiones bala-enemigo y enemigo-nave
- Explosiones con partículas
- Puntuación: +10 por enemigo, +50 por oleada completa
- 3 vidas con respawn
- Nivel aumenta cada oleada (mayor velocidad)
- Pantalla de inicio, juego, pausa y game over
- Fondo estrellado con parallax
- Todo en un solo archivo HTML sin dependencias externas

Conceptos clave del game loop

Concepto	Descripción	Código
requestAnimationFrame	Bucle de 60 FPS sincronizado con el monitor	`requestAnimationFrame(gameLoop)`
Delta time	Tiempo entre frames para movimiento independiente de FPS	`const dt = (ts - lastTs) / 1000`
Colisión AABB	Detección rectangular simple	`a.x < b.x+b.w && a.x+a.w > b.x`
Sprite sheet	Imagen con todos los fotogramas de animación	`ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh)`
Partículas	Array de objetos con posición, velocidad y vida	`particles.filter(p => p.life > 0)`
Teclado	Registrar teclas presionadas	`keys = {}; onkeydown = e => keys[e.code]=true`

Detección de colisiones

Colisión rectangular (AABB)

function collides(a, b) {
  return a.x < b.x + b.width  &&
         a.x + a.width > b.x  &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;
}

function collideCircles(a, b) {
  const dx = a.x - b.x, dy = a.y - b.y;
  return Math.hypot(dx, dy) < a.radius + b.radius;
}

Sistema de partículas para explosiones

Explosión en 10 líneas

const particles = [];

function explode(x, y, color = '#ff6600') {
  for (let i = 0; i < 20; i++) {
    const angle = Math.random() * Math.PI * 2;
    const speed = 50 + Math.random() * 150;
    particles.push({
      x, y,
      vx: Math.cos(angle) * speed,
      vy: Math.sin(angle) * speed,
      life: 1.0,        // 0-1
      color
    });
  }
}

function updateParticles(dt) {
  particles.forEach(p => {
    p.x += p.vx * dt;
    p.y += p.vy * dt;
    p.life -= dt * 2;
  });
  particles.splice(0, particles.length, ...particles.filter(p => p.life > 0));
}