Video Demo

Shape Fill is a polished, ready-to-publish HTML5 logic puzzle. Each level shows a set of target shapes at the top. The player drags across empty tiles to draw those shapes, which can be rotated or mirrored, until the whole board is filled. The player has to plan ahead, because one wrong placement can leave a gap that can’t be filled.

Levels are generated by code with a fixed seed, so every level is guaranteed to be solvable and always plays the same way. Difficulty ramps up through four tiers (Easy, Normal, Hard, Super Hard) with more pieces and trickier shapes. Players earn up to 3 stars and coins on each level, depending on how much time is left.

The game is simple to install: upload the files and it works. It has no frameworks and no build step. Sound effects are generated in code with the Web Audio API, so there are no audio files to license. It runs smoothly on phones, tablets, and desktop browsers, using pointer events for smooth drawing with a finger or a mouse.

Features

Gameplay

20 levels in 4 difficulty tiers: Easy, Normal, Hard, and Super Hard
Drag to draw shapes across empty tiles, including branching shapes such as T and plus pieces
Shapes can be rotated and mirrored, so any matching orientation counts Fast drags never skip a tile
Every level is generated from a fixed seed and is solvable
Countdown timer on every level
Undo, Restart, and Hint buttons
Hint highlights a valid next shape
Dead-end detection: the game warns the player when the rest of the board can no longer be filled
Shapes get more complex and more numerous as levels go up

Technology Used

HTML5
CSS3 (flexbox, grid, gradients, animations)
JavaScript (ES6, vanilla)
HTML5 Canvas for effects
Web Audio API
Pointer Events
localStorage
Google Fonts (Fredoka)

Supported Browsers

Google Chrome (desktop and Android)
Mozilla Firefox
Microsoft Edge
Apple Safari (macOS and iOS)
Opera
Samsung Internet

Shape Fill | HTML5 Shape Puzzle Game