generacion-archivos Featured

Create HTML5 Canvas arcade games with Cerewro: from idea to game in minutes

Generate complete HTML5 arcade games with Cerewro: game loop, collision detection, scores, lives, levels and sound effects. No external libraries, pure HTML5 Canvas and JavaScript.

21 de July de 2026

Equipo Cerewro

html5 canvas videojuego javascript game arcade

Create HTML5 Canvas arcade games with Cerewro

HTML5 Canvas lets you create games directly in the browser without plugins or frameworks, using only JavaScript. With Cerewro you can generate a complete arcade game from a natural language description: game loop, physics, collisions, scoring and levels.

Game loop skeleton

HTML5 Canvas game skeleton

const canvas = document.getElementById('gameCanvas');
const ctx    = canvas.getContext('2d');
let score = 0, lives = 3, gameOver = false, lastTime = 0;

function gameLoop(timestamp) {
  const dt = (timestamp - lastTime) / 1000;
  lastTime = timestamp;
  if (!gameOver) { update(dt); render(); requestAnimationFrame(gameLoop); }
}
requestAnimationFrame(gameLoop);

Prompt to generate a complete Space Invaders

Cerewro Chat

Create a complete Space Invaders arcade game in HTML5 Canvas + pure JavaScript:
- Spaceship controlled by arrow keys or WASD
- Fire with spacebar (max 3 simultaneous bullets)
- Waves of 30 enemies with zigzag movement
- Bullet-enemy and enemy-ship collision detection
- Particle explosions
- Score: +10 per enemy, +50 per full wave
- 3 lives with respawn
- Level increases each wave (higher speed)
- Start, game, pause and game over screens
- Parallax starfield background
- Single HTML file, no external dependencies

Key game concepts

Concept	Description	Code
requestAnimationFrame	60 FPS loop synced with monitor	`requestAnimationFrame(gameLoop)`
Delta time	Frame-rate independent movement	`const dt = (ts - lastTs) / 1000`
AABB collision	Simple rectangular detection	`a.x < b.x+b.w && a.x+a.w > b.x`
Particles	Array of objects with position, velocity, life	`particles.filter(p => p.life > 0)`
Keyboard	Track pressed keys	`keys = {}; onkeydown = e => keys[e.code]=true`

Particle explosion system

Explosion in 10 lines

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, 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));
}

No libraries = maximum control: Games generated by Cerewro in pure HTML5 Canvas don't need any external library. They are single HTML files you can open in any browser, send by email or host anywhere.