Juego de plataformas 2D en HTML5 con Cerewro
Los juegos de plataformas 2D son más complejos que los shooters o puzzles porque requieren física de gravedad, salto preciso, cámara que sigue al personaje y detección de colisiones con el terreno. Cerewro puede generar toda esta mecánica desde una descripción.
Prompt para plataformas 2D completo
Cerewro Chat
Crea un juego de plataformas 2D completo en HTML5 Canvas (800x500):
- Personaje con física: gravedad, salto doble, coyote time (100ms)
- Plataformas sólidas con tilemap 32x32px
- Plataformas móviles (horizontal y vertical)
- Enemigos que caminan de borde a borde (matar saltando encima)
- Monedas coleccionables
- Puntos de checkpoint
- Cámara que sigue al jugador con suavizado
- 3 niveles de dificultad progresiva
- Controles: flechas/WASD + Z para saltar, X para correr
- Sprite animado (idle, run, jump, die) desde spritesheet 64x64
- HUD: monedas, tiempo, vidas
- Efectos: polvo al aterrizar, flash al morir
Sistema de física básico
Gravedad y salto con coyote time
const GRAVITY = 1500; // px/s²
const JUMP_FORCE = -600; // px/s (negativo = arriba)
const COYOTE_MS = 100; // ms después de caminar por el borde
class Player {
constructor(x, y) {
this.x = x; this.y = y;
this.vx = 0; this.vy = 0;
this.onGround = false;
this.lastOnGround = 0; // timestamp del último frame en suelo
this.jumpsLeft = 2; // doble salto
}
update(dt, keys) {
// Movimiento horizontal
if (keys['ArrowLeft']) this.vx = -200;
else if (keys['ArrowRight']) this.vx = 200;
else this.vx *= 0.8; // fricción
// Gravedad
this.vy += GRAVITY * dt;
// Salto: normal, coyote time o doble salto
const coyote = performance.now() - this.lastOnGround < COYOTE_MS;
if (keys['jump'] && (this.onGround || coyote || this.jumpsLeft > 0)) {
this.vy = JUMP_FORCE;
this.jumpsLeft--;
keys['jump'] = false;
}
this.x += this.vx * dt;
this.y += this.vy * dt;
}
}
Cámara con suavizado (lerp)
Camera follow con interpolación
class Camera {
constructor(canvas) {
this.x = 0; this.y = 0;
this.width = canvas.width; this.height = canvas.height;
}
follow(target, dt) {
const targetX = target.x - this.width / 2;
const targetY = target.y - this.height / 2;
// Lerp: suavizado exponencial
this.x += (targetX - this.x) * (1 - Math.exp(-8 * dt));
this.y += (targetY - this.y) * (1 - Math.exp(-8 * dt));
}
apply(ctx) { ctx.translate(-Math.round(this.x), -Math.round(this.y)); }
}
Tiled Map Editor: Para niveles complejos, usa Tiled (gratuito) para diseñar los mapas y exporta en JSON. Phaser 3 los carga nativamente. Si usas Canvas puro, pide a Cerewro que genere un loader de tilemaps JSON.