HTML5 Canvas

Build a vertically scrolling shooter

A scrolling shooter combines a moving world with a player that stays inside the visible playfield. Treat the camera offset separately from object coordinates so enemy movement and collisions do not depend on how the background is drawn.

Use a repeating background tile at least as tall as the viewport and draw it twice to cover the wrap point. With shorter tiles, repeat the draw until the viewport is covered. Spawn enemies from a schedule expressed in simulation time, then update bullets, enemies and the player before resolving collisions.

Start with one enemy pattern and a clear restart state. Cap the number of simultaneous bullets, remove objects beyond the playfield and give the player a short invulnerability period after a hit. The playfield should communicate danger without depending only on color.

Try the idea

scroll = (scroll + speed * dt) % background.height;
ctx.drawImage(background, 0, scroll - background.height);
ctx.drawImage(background, 0, scroll);