Loading
All projects
Web · 2026
Puzzle Game
A playful jigsaw game for desktop and mobile: 15 campaign levels, rotating pieces, and free play with your own photos.
- Role
- Design & development
- Platform
- Web · desktop and mobile
puzzle-game.drisdev.io
Overview
The problem
The 2022 version was a single 430-line script: one image, a fixed 3×3 grid, no way to win, no score and no screens. Resizing the window reshuffled every piece.
The solution
I rebuilt it as a real game: a canvas engine in plain TypeScript that knows nothing about the UI, and Svelte 5 screens for a 15-level campaign, free play, stats and settings in English and Vietnamese. Progress stays in the browser.
Features
What it does
A campaign that climbs
15 levels from 3×3 to 8×8, 478 pieces in all; clearing a level unlocks the next one.
Rotating pieces
From level 9 every piece starts at a random quarter turn; tap to turn it, and it only snaps once it is upright.
Stars for speed and care
One to three stars from par time, moves and hints, plus best times and a stats screen.
Free play with your own photo
Pick a level image or upload a photo, then choose a grid up to 10×10; the photo never leaves the device.
Help when you need it
Three hints per game, a ghost image you can toggle, and an automatic pause when the tab is hidden.
Sound without audio files
Pickups, snaps, hints and the winning fanfare are synthesized with the Web Audio API.
How it works
How a puzzle is built
- 01
Cut
Each shared edge gets a tab or a blank of random size, and the neighbour gets the opposite, so pieces always interlock.
- 02
Draw
Every piece is rendered once into its own sprite with a baked shadow; a frame is one image per piece, drawn only when something changes.
- 03
Scatter
Pieces land in the free space around the board, stored in board units so resizing keeps your progress.
- 04
Snap
A dropped piece locks in place when it is upright and within a third of a piece of its slot.
Highlights
Engineering notes
An engine without a framework
About a thousand lines of plain TypeScript; piece outlines go through a small path interface, so shapes are unit-tested without a canvas.
Precise picking
The pointer is rotated into the piece's frame, checked against a bounding box, then tested against the real outline, so tabs and blanks pick exactly.
Fits any screen
The board takes a share of the screen by orientation, the canvas follows the device pixel ratio, and turning a phone re-spreads only the loose pieces.
Tested and accessible
138 Vitest cases; menus and dialogs work from the keyboard, touch targets are 44 px, and reduced motion turns off animations and confetti.
Under the hood
Stack & timeline
- Svelte 5
- TypeScript
- Vite
- Canvas 2D
- Web Audio
- Vitest
Polish
A playful restyle, a responsive board layout and confetti.
Game
Screens, English and Vietnamese, 15 levels, photo upload, hints, the ghost image, rotation and sound.
Rewrite
Engine ported to Vite, Svelte 5 and TypeScript, with a game session, star scoring and saved progress.
2022
A one-file prototype: a 3×3 grid, curved tabs and drag and drop.
Gallery
A closer look
puzzle-game.drisdev.io
puzzle-game.drisdev.io
puzzle-game.drisdev.io
puzzle-game.drisdev.io
