Quick summary
Retro Gunner is a top-down arcade shooter built in vanilla JavaScript on an 800×600 canvas. Six levels, three enemy types, health pickups, screen shake, and a save system — all drawn pixel-by-pixel with no image assets. A complete little game in a single file.
Who this template is for
A complete little game in a single file. It is 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 game” offerings 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 — six levels, three enemy types, pickups, screen shake and a save system — drawn pixel by pixel with no image assets.
- 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 & 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 & speed optimization
The game targets desktop first — keyboard and mouse are the primary controls — while staying light enough to load instantly anywhere.
- 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: no frameworks, no trackers, nothing 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 structured to turn that attention into a next step.
- Visitors play immediately — no signup, download or install stands between them and the first round
- The finished build is fully inspectable, which turns curious players into builders who want the prompt behind it
- The one-time prompt unlock offers a concrete, low-friction next step while the session is still hot
Other information about this template
A few notes on the build.
- It is keyboard and mouse on an 800×600 canvas, so it targets desktop play
- Enemy definitions live in one table — 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 — no sprites, no engine, no build step. A tight requestAnimationFrame loop handles movement, collisions, enemies, and particles.
Screenshots
Captured from the live build — the title screen and real play, level by level.
