A small surface.
Draw shapes, sprites, maps and text. Play sounds and music. Read keys, touches and gamepads. Own your game loop and every pixel of it.
THE PIXELJS ARCADE / 001
Hello, Pac-Man.
A little maze. A lot of second chances. Collect the pellets, dodge the ghosts, and make one more turn.
Play it. Then see how it works.- SCORE
- 0
- LIVES
- 3
- LEVEL
- 1
- PELLETS
- —
Loading the arcade…
READY · Choose a direction to play
SMALL WORLDS. MADE BY YOU.FIRST-CLASS JAVASCRIPTTYPESCRIPT INCLUDEDONE RUNTIME PACKAGE
A clear boundary.
C handles the framebuffer. The web host handles the browser. Engine instances have explicit lifetimes and resources have owners.
JavaScript belongs here.
Use plain JavaScript or TypeScript. The same ESM runtime and runtime validation serve both, with declarations included.
002 / MAKE IT YOURS
The game is just the beginning.
PixelJS is MIT licensed
and published on npm.
0.0.3 ON NPM
Open the hood.
Open the hood.
Make your next game.
Start from a small, playable starter in JavaScript or strict TypeScript, or add @pixeljs/core to your own project. The tutorial builds a first game step by step.
npm create @pixeljs@latest my-gamenpm install @pixeljs/core
MIT license. Published by GitHub Actions with npm provenance.
Read the tutorial API reference Open PixelJS Studio, the editor Source on GitHub Open standalone JS example
examples/javascript/game.jsREAL EXAMPLE FILE
Loading example source…This is the real runnable game source, loaded directly from its example file.
003 / A FEW GOOD BUILDING BLOCKS
Know what you can make.
A small, complete engine.
Tested features and open work stay distinct.
One engine, one explicit lifetime.
await createEngine({ canvas, width, height }) loads an instance. Use
start({ update, draw }) to begin the loop, pause() and
resume() to control it, and await dispose() to release it.
Keep drawing in the draw callback. Dispose makes the engine unavailable immediately; cleanup waits for an active callback to finish. Create a fresh instance to restart after disposal.
Pixels with a place to belong.
Pixels, lines, rectangles, circles, ellipses, triangles, flood fill and color remapping; sprites with flips, rotation and scaling; tilemaps; built-in and custom bitmap text; camera and clipping. Colors come from a palette of up to 256 colors, and every browser draws exactly the same pixels.
Load PNG images, maps, fonts, sounds and music one by one or from one asset manifest, all or nothing. Save screenshots as PNG and recordings as GIF. Raw heap offsets and internal handles stay private.
Read intent, once per tick.
input.isDown(code), wasPressed(code), and
wasReleased(code) use browser key codes such as
ArrowLeft and KeyA. Up to ten pointers and touches report
game-pixel coordinates, and standard gamepads report named buttons and sticks.
Read the input snapshot in update. Focus the canvas for keyboard play; blur and lifecycle changes reset input. The game host adds swipe and direction-button controls for this demo.
Small on purpose. Honest by default.
Version 0.0.3 connects a C17 raster core and synthesizer, a private WASM bridge, a typed ESM host, a browser editor and starters. It is a first release: tested in Chromium, Firefox and WebKit and in the Android emulator, not yet on physical phones.
↗IncludedGraphics · maps · text · audio · music · input · assets · editor
○Still openPhysical phones · iOS builds · Workers · saving
Browser compatibility, mobile performance, and memory safety require concrete tests on each target. A live demo alone does not establish those guarantees.
THERE'S ROOM FOR ONE MORE SMALL WORLD.