Source Code

<div class="game-card">
  <div class="game-header">
    <div class="game-title">
      <span class="game-icon">🚀</span>
      <h2>Space Blaster</h2>
    </div>
    <div class="stat-badges">
      <span class="badge">Wave <b id="wave">1</b></span>
      <span class="badge">Best <b id="best-score">0</b></span>
    </div>
  </div>

  <div class="canvas-wrap">
    <canvas id="game-canvas" width="360" height="440"></canvas>
    <div class="hud">
      <span id="hud-score">0</span>
      <span class="lives" id="hud-lives">❤️❤️❤️</span>
    </div>
    <div class="overlay" id="start-overlay">
      <div class="overlay-card">
        <p class="overlay-title">Space Blaster</p>
        <p class="overlay-sub">Move with the D-pad, hold FIRE to shoot. Clear each wave — they hit back.</p>
        <button class="btn btn-primary" id="btn-start">Launch</button>
      </div>
    </div>
    <div class="overlay hidden" id="gameover-overlay">
      <div class="overlay-card">
        <p class="overlay-title" id="over-title">Game Over</p>
        <p class="overlay-sub" id="final-score">Score 0</p>
        <p class="overlay-best" id="best-msg"></p>
        <button class="btn btn-primary" id="btn-retry">Play again</button>
      </div>
    </div>
  </div>

  <div class="controls">
    <div class="dpad">
      <button class="ctrl-btn" id="btn-left" aria-label="Move left">◀</button>
      <button class="ctrl-btn" id="btn-right" aria-label="Move right">▶</button>
    </div>
    <button class="fire-btn" id="btn-fire" aria-label="Fire">FIRE</button>
  </div>

  <p class="hint-text">Keyboard: ← → to move, Space to fire</p>
</div>

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Space Blaster Arcade Game — Free HTML CSS JS Snippet

Space Blaster Arcade Game · Games · Plain HTML, CSS & JS · Live preview

TagsCanvasLocal StorageTouch GesturesKeyboard NavigationGames

What's included

Features

On-screen D-pad and FIRE button using Pointer Events with press-and-hold, plus keyboard fallback — both drive the same input state
requestAnimationFrame loop with delta-time scaling for frame-rate-independent ship and bullet motion
Timestamp-based fire cooldown so holding FIRE yields an even shot cadence on any refresh rate
Space-Invaders-style formation movement: block drift with edge-triggered reversal and step-down
Two independent bullet systems (player up, enemies down) with AABB collision each frame
Wave progression that scales enemy count and per-enemy hit points, with wave-scaled scoring
Particle burst effects on hits and destruction, plus a lives economy and Game Over state
Persisted high score via localStorage with defensive try/catch guards

About this UI Snippet

Space Blaster — A Canvas Space Shooter Built Around On-Screen Touch Controls

Screenshot of the Space Blaster Arcade Game snippet rendered live

A fixed-shooter arcade game is one of the most complete small demonstrations of real-time game programming: it needs a continuous render loop, two independent bullet systems, formation movement, per-frame collision detection between many objects, a lives/score economy, and — the focus of this snippet — a control scheme that works equally well with a keyboard and a thumb on glass. This snippet builds the whole thing on a single HTML5 <canvas> with requestAnimationFrame, and drives movement through an on-screen D-pad plus a FIRE button so it is playable on a phone with no keyboard at all.

One input state, two input devices

The core idea that keeps mobile and desktop controls from fighting each other is that nothing moves the ship directly inside an event handler. Instead every handler only flips booleans in a single keys object — keys.left, keys.right, keys.fire — and the game reads those booleans once per frame inside update(). Keyboard keydown/keyup listeners set them; the on-screen buttons set the same flags through a small hold() helper wired to Pointer Events (pointerdown to press, pointerup/pointercancel/pointerleave to release). Because both paths write to the identical state, holding the D-pad feels exactly like holding an arrow key, and the ship never gets "stuck on" if a finger slides off the button, because pointerleave releases it.

Frame-independent movement and a fire cooldown

The loop computes dt (seconds since the previous frame, clamped to 50ms) and scales all motion by it, so the ship and bullets travel at the same real-world speed on a 60Hz or a 120Hz display. Firing is rate-limited with a FIRE_COOLDOWN timestamp check rather than a per-frame flag, so holding FIRE produces an even stream of shots regardless of frame rate instead of a solid wall of bullets on fast displays.

Formation movement and two bullet systems

Enemies are generated per wave in a grid by buildWave(n), which scales column count, row count and per-enemy hit points with the wave number. The formation drifts sideways as a block, and the instant any enemy touches a screen edge the whole grid reverses direction and steps down — the classic Space-Invaders march, implemented by detecting the edge hit in one pass and applying the reversal to every enemy in the next. Player bullets move up, enemy bullets move down, and each is tested against the opposing set every frame with an axis-aligned bounding box check in hit().

Score, lives, particles and a persisted best

Destroying an enemy adds particles via burst(), awards wave-scaled points, and decrements that enemy's hit points (tougher enemies on later waves take multiple shots). Taking a hit — or letting the formation reach the ship's line — costs a life; at zero lives endGame() stops the loop and compares the run's score against the value stored in localStorage under space-blaster-best, showing a "New high score!" message when it is beaten.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Paste this snippet's HTML, CSS and JS into an AI assistant like Claude and ask it to explain how the shared keys input state lets the on-screen D-pad, the FIRE button and the keyboard all drive the same ship without conflicting, and how the FIRE_COOLDOWN keeps the shot rate frame-rate-independent. It is a strong base to extend: ask for power-ups that widen the shot or add a shield, a boss enemy with a health bar at the end of every fifth wave, screen-shake on player hits, or an object pool for bullets and particles to cut garbage collection during long runs. You could also ask it to port the loop into a React component with useRef/useEffect for the animation-frame lifecycle, or to add a second fire button for a special weapon. Treat it as a working prototype to question and rebuild.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a mobile-friendly canvas space-shooter arcade game in plain HTML, CSS and JavaScript — no frameworks.

Requirements:
- A player ship near the bottom of a canvas that moves left/right. Provide BOTH an on-screen D-pad (◀ ▶) and a FIRE button for touch, AND keyboard controls (arrow keys + Space). Both input methods must drive the same shared input-state object read once per frame — do not move the ship directly inside event handlers.
- Use Pointer Events for the on-screen buttons with press-and-hold, and release the input on pointerup, pointercancel AND pointerleave so the ship never gets stuck moving when a finger slides off a button.
- Use requestAnimationFrame and scale all motion by delta-time so speed is consistent across refresh rates. Rate-limit firing with a timestamp-based cooldown so holding FIRE gives an even shot cadence regardless of frame rate.
- Enemies spawn in a grid formation per wave; the formation drifts sideways and reverses direction and steps down whenever it touches a screen edge. Enemies fire back at random.
- Player bullets travel up, enemy bullets travel down; use axis-aligned bounding box collision every frame. Destroying an enemy awards points and spawns a small particle burst; later waves have more enemies with more hit points.
- Track score and three lives with a HUD; losing all lives shows a Game Over overlay with a Play Again button. Persist the best score in localStorage with defensive try/catch.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

  1. 1
    Launch the gameTap "Launch" to call startGame(), which runs resetState() to build wave 1, reset score and the three lives, and start the requestAnimationFrame loop.
  2. 2
    Move with the D-padPress and hold the ◀ / ▶ buttons (or the Left/Right arrow keys) to move your ship. The handlers only set keys.left / keys.right, which update() reads once per frame — held input moves the ship smoothly, and pointerleave releases it if your finger slides off.
  3. 3
    Hold FIRE to shootHold the FIRE button (or Space) to shoot upward. A FIRE_COOLDOWN timestamp check spaces the shots evenly no matter how fast the display refreshes, so holding produces a steady stream rather than a solid beam.
  4. 4
    Clear each waveEnemies drift as a formation and reverse direction, stepping downward, whenever the block touches a screen edge. Later-wave enemies have more hit points and need multiple shots — destroying them awards wave-scaled points shown in the HUD.
  5. 5
    Avoid enemy fireEnemies fire back at random; a bullet that hits your ship, or a formation that reaches your line, costs one of your three lives (shown top-right). Lose all three and the run ends.
  6. 6
    Beat your high scoreYour best score persists in localStorage under space-blaster-best and shows in the header. Tune difficulty via buildWave() (grid size and hit points) and the enemy fire probability in update().

Real-world uses

Common Use Cases

Mobile-first game control pattern for touch UIs
The D-pad + action-button layout wired through Pointer Events with pointerleave release is a reusable template for any browser game or interactive demo that must play well on a phone without a keyboard.
Instantly playable arcade demo for a games portal
A self-contained shooter with no assets to download starts immediately, making it a strong embeddable demo for a games site, blog, or app landing page — no tutorial or sign-up required.
Engaging empty-state or 404 distraction
With no network dependency it works as an interactive filler on an error page or slow-loading screen, in the same spirit as the Dodge the Falling Blocks Game.
Teaching real-time collision and formation AI
The two-bullet-system AABB checks and edge-triggered formation march are a compact reference for the collision and movement patterns behind classic 2D shooters, before any physics engine is involved.
Starting point for a richer shmup
The wave builder, particle system and unified input generalise well: add power-ups, shields, boss enemies, or sprite art without touching the dt-scaled loop or the collision core.
Canvas + HUD + overlay layout reference
The layered structure of a full-bleed canvas, an absolutely positioned HUD, and start/game-over overlays is directly reusable for any canvas experience that needs status readouts and modal states.
Related: Typing Speed Test (WPM Counter)
See the Typing Speed Test (WPM Counter) for a related games pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Neither input moves the ship directly. Keyboard handlers and the on-screen button handlers both only toggle booleans in a shared keys object (keys.left, keys.right, keys.fire), and update() reads those booleans once per frame. Because there is a single source of truth for input state, a held button behaves identically to a held key, and there is no separate touch code path to keep in sync.

The hold() helper binds pointerup, pointercancel and pointerleave in addition to pointerdown. If your finger releases or slides off the edge of the button, pointerleave or pointercancel fires and clears the corresponding flag, so the ship stops even when pointerup would otherwise be missed.

Holding FIRE sets keys.fire = true, which is read every frame. Without throttling, a 120Hz display would fire twice as many bullets as a 60Hz one. The FIRE_COOLDOWN timestamp check (fire only if enough real milliseconds have passed since the last shot) makes the shot cadence consistent in real time across any frame rate.

Each frame every living enemy is moved sideways in the current direction, and if any of them crosses the left or right margin a hitEdge flag is set. After that pass, if the flag is set, the direction is reversed for the whole block and every enemy steps down a fixed amount — reproducing the classic marching-formation behaviour with one detection pass and one reaction pass.

Yes. The best score is written to localStorage under the key space-blaster-best and read back on load, so it persists across reloads and browser restarts on the same browser and origin. It resets only if site data is cleared or the game is played in a different browser, device, or a private window.