Quick summary
Retro Gunner is a top-down arcade shooter built in vanilla JavaScript on an 800×600 canvas. It has six levels, three enemy types, health pickups, screen shake, and a save system, all drawn pixel by pixel with no image assets. It’s a complete little game in a single file.
Who this template is for
A complete little game in a single file. It’s for people who want to see how all the pieces of an arcade shooter fit together without an engine in the way.
- Developers learning how levels, enemy types, pickups, and persistence fit together in a small codebase
- Studios who want a compact playable that demonstrates finished game systems rather than a prototype
- Anyone who needs a fast, zero-dependency arcade shooter that runs anywhere instantly
What problem this template solves
Most “browser games” on offer are either heavy engine exports or toy demos that fall apart the moment you look under the hood. This build is neither.
- Engine exports ship megabytes of runtime before the first frame ever draws
- Toy demos skip the hard parts: real collision, game states, difficulty curves, and persistence
- Builders who want to learn from a finished game almost never get to see the instructions that produced it
What you get with this template
You get a complete top-down arcade shooter, drawn pixel by pixel with no image assets. It has six levels, three enemy types, pickups, screen shake, and a save system.
- Six levels with a spawn manager that paces enemies over time and enforces an on-screen cap
- Three enemy types with distinct behaviour, plus health pickups that drop from kills
- A save system that keeps your level, health, and score between sessions
Page sections overview
| Section | Purpose |
|---|---|
| Zero-asset pixel rendering | Draw every sprite with rectangles at a fixed pixel scale |
| Level and spawn manager | Pace enemy spawns across six levels with an on-screen cap |
| Three enemy behaviours | Give each enemy type a distinct movement and threat profile |
| Health pickup economy | Drop restoring pickups from kills to create risk-reward positioning |
| Persistent save system | Keep level, health, and score across sessions in local storage |
| Game feel layer | Add screen shake and particles so hits register physically |
Design and branding system
The look is a CRT cabinet: hard primaries, chunky three-times pixels, and effects that read as light on a tube rather than modern post-processing.
- A hard-primary palette with no intermediate tones, so every sprite separates cleanly against the floor
- A fixed three-times pixel scale with image smoothing disabled permanently, keeping every edge square
- Particles and screen shake standing in for lighting and impact, the way cabinet-era games handled feedback
Mobile and speed optimization
The game targets desktop first, with keyboard and mouse as the primary controls. It stays light enough to load instantly anywhere.
- There’s no engine runtime and no asset downloads, so the whole game arrives in a handful of requests
- A capped frame delta keeps the simulation stable even when the browser tab stutters or loses focus
- The page stays lean, with no frameworks or trackers between the visitor and the game loop
How this template helps you convert
A playable game holds attention longer than any showreel. The page around it is built to turn that attention into a next step.
- Visitors play right away, with no signup, download, or install before the first round
- The finished build is fully inspectable, which turns curious players into builders who want the prompt behind it
- Paying once for the prompt is a small, concrete next step while the session is still hot
Other information about this template
A few notes on the build.
- It’s keyboard and mouse on an 800×600 canvas, so it targets desktop play
- Enemy definitions live in one table, so adding a type means adding an entry and a draw function
- Save data is a single local-storage key, so clearing site data resets progress
- The whole game is plain files with no build step, so it can be edited and reloaded directly
How it works
Everything is drawn with fillRect at a 3× pixel scale, with no sprites, no engine, and no build step. A tight requestAnimationFrame loop handles movement, collisions, enemies, and particles.
Screenshots
Captured from the live build: the title screen, then gameplay, level by level.
