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.

BUILT WITH PIXELJSC17 + WASMJS + TS

Play it. Then see how it works.

PIXELJS / PAC-MAN LOADING

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 small surface.

Draw pixels, rectangles, and sprites. Read input. Own your game loop. Start with the pieces that make a game feel like yours.

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.

The 0.0.1 candidate is a local preview.
The package has not been published to npm.

M1 CANDIDATE

Open the hood.
Make your next game.

Explore the @pixeljs/core candidate and the source running this arcade. An installable archive will follow once its distribution license is confirmed.

Archive download pending license confirmation. The candidate is not published to npm.

Open standalone JS example Download TypeScript source

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 focused first milestone.
Implemented features and future work stay distinct.

01 / LIFECYCLE

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.

02 / GRAPHICS

Pixels with a place to belong.

The preview includes clear, pixel, rect, sprite, setCamera, setClip, and resetClip. Colors use the engine's original 16-color palette.

Create indexed images with createImage({ width, height, pixels, transparentIndex }) while the engine is idle. Keep the returned image object for sprite drawing and call release(image) when it is no longer needed. Raw heap offsets and internal handles stay private.

03 / INPUT

Read intent, once per tick.

input.isDown(code), wasPressed(code), and wasReleased(code) use browser key codes such as ArrowLeft and KeyA. Pointer coordinates are in game pixels.

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.

04 / PREVIEW BOUNDARIES

Small on purpose. Honest by default.

This M1 candidate connects a C17 raster core, a private WASM bridge, a typed ESM host, and a playable sample. It is an early development preview, not a promise of production stability or broad device certification.

↗Current surfacePrimitives · sprites · input · lifecycle

○Future milestonesAudio · maps · editor · Workers

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.

What will yours look like?

Make your first move