generacion-archivos
Español

2D platformer in HTML5 with Cerewro: character, gravity, jump and collisions

Generate a complete 2D platformer with Cerewro: character with gravity and jump physics, static and moving platforms, enemies with basic AI, collectible coins and camera scroll.

Equipo Cerewro
plataformas 2d html5 canvas javascript gravedad salto sprites

2D platformer in HTML5 with Cerewro

2D platformers are more complex because they require gravity physics, precise jumping, a camera that follows the character and terrain collision detection. Cerewro can generate all these mechanics from a description.

Prompt for 2D platformer

Cerewro Chat
Create a complete 2D platformer in HTML5 Canvas (800x500):
- Character with physics: gravity, double jump, coyote time (100ms)
- Solid platforms with 32x32 tilemap
- Moving platforms (horizontal and vertical)
- Enemies walking edge-to-edge (kill by jumping on top)
- Collectible coins
- Checkpoint system
- Camera following player with smoothing
- 3 levels of progressive difficulty
- Controls: arrows/WASD + Z to jump, X to run
- Animated sprite from 64x64 spritesheet
- HUD: coins, time, lives
- Effects: dust on landing, flash on death

Gravity and jump with coyote time

Player physics
const GRAVITY = 1500, JUMP_FORCE = -600, COYOTE_MS = 100;

class Player {
  update(dt, keys) {
    this.vy += GRAVITY * dt;
    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;
  }
}

Smooth camera follow (lerp)

Exponential lerp
class Camera {
  follow(target, dt) {
    this.x += (target.x - this.width/2  - this.x) * (1 - Math.exp(-8*dt));
    this.y += (target.y - this.height/2 - this.y) * (1 - Math.exp(-8*dt));
  }
  apply(ctx) { ctx.translate(-Math.round(this.x), -Math.round(this.y)); }
}