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.