⚡ HTML5 Game Engine

spark.js

A lightweight, playful HTML5 game engine.
No build tools. No npm. No bundler. Just JavaScript.

Canvas 2D WebGL Box2D Physics Gamepad + Rumble Touch & Virtual Controls Web Audio Particle System HTML / CSS UI Zero Dependencies*
What's inside

Everything you need to ship a browser game

A focused set of systems covering the full game-dev loop — rendering, input, audio, physics — without pulling in the whole internet.

🎨
2D & WebGL Rendering
Primitives, sprites, sprite sheets, and frame animations through a renderer abstraction that supports both Canvas 2D and WebGL backends.
🔄
Game Loop
Fixed-update / variable-draw main loop. Extend Game, implement Start(), Update(deltaTime), Draw() — and go.
🎮
Unified Input
One API for keyboard, mouse, gamepad, and touch. Abstract Actions & Axes bind to any device. On-screen virtual joysticks and buttons for mobile. Full rumble / haptic feedback support.
📱
Mobile Support
Auto-detects touch screens and injects the viewport, scroll-prevention, and touch events. The primary finger mirrors Input.mouse so all existing code works on mobile without changes.
🔊
Audio Manager
Thin Web Audio wrapper for loading, playing, and managing sound effects and music, with optional analyser visualisation.
🖥️
HTML / CSS UI
Build menus and HUDs with real HTML elements via the HTMLMenu system — no proprietary widget toolkit.
⚛️
Box2D Physics
Optional Box2D integration with ready-made GameObject subclasses for physics bodies, sprites, and animated objects.
Particle System
Configurable emitter with per-particle control over velocity, direction, opacity, scale, and rotation. Smoke, rain, fire — anything.
🏊
Object Pooling
Built-in recycling pool for bullets, particles, and any high-frequency object — no GC spikes mid-game.
🛠️
Math & Utilities
Vector math, collision helpers, color utilities, camera, parallax layers, tilemap, Mode 7 pseudo-3D, debug overlay, and more.
See it in action

Demos & Example Games

Every demo runs live in your browser. All source code is in the repo.

🕹️ Games
🧱BrokeOut 🐟Floppy Derp 🎯Twin Stick Shooter 🎯Twin Stick Shooter 2 🟦Basic Tetris 🟦Complex Tetris 🐍Snake 💎Columns 🫧Puzzle Bobble 👾PacmonWIP 💣Super PangWIP
⚙️ Engine Systems
🎨Canvas 2D Renderer 🎨WebGL Renderer Particle System 🔊Audio System 🔵Colliders 🏊Object Pooling 📐Canvas Resizing 🌅ParallaxWIP 🗺️TilesetWIP 🏎️Mode 7 📐Line Intersection
🎮 Input & Gamepad
⌨️Basic Input 🖱️Mouse Input ⌨️Actions & Axes 📱Touch & Virtual Controls 🎮Gamepad Tester 📳Rumble Tester
🖥️ UI & Physics
📋HTML Menu 📋Menu + Game UI ⚛️Box2D Basic 🏀Box2D Basket 🦘Box2D PlatformerWIP
Get started

Running in 5 minutes

No CLI. No config files. No package.json. Copy files, open a browser, make a game.

1
Clone or download
Copy the src/engine/ folder into your project.
2
Create your HTML
Add <canvas id="myCanvas"> and include the engine scripts in order.
3
Extend Game
Create a class extending Game and implement Start(), Update(deltaTime), and Draw().
4
Call Init()
Pass your class to Init(MyGame) inside window.onload and the engine loop starts.
// my-game.js
class MyGame extends Game {
    constructor(renderer) {
        super(renderer);
        this.Configure({
            screenWidth:  640,
            screenHeight: 480,
        });
    }

    Start() {
        super.Start();
        // load game objects, register input…
    }

    Update(deltaTime) {
        super.Update(deltaTime);
        // move, check collisions…
    }

    Draw() {
        this.renderer.DrawFillRectangle(
            0, 0,
            this.screenWidth,
            this.screenHeight,
            Color.black
        );
        super.Draw();
    }
}

window.onload = () => Init(MyGame);