13 sept 2026 · games, kids, claude code, canvas

A video game from paper drawings

Level 1, as delivered. The blue notes are mine, dictated by the designer.

My son wanted to make a video game. He did the sensible thing and drew it: a gym with a punching bag, a wall you smash for coins, a shop that sells boxing gloves, a boss in the corner, and a gate that only opens at level 20. Then a second sheet with the main character walking, punching, kicking, doing a somersault, and lying dead. He explained each drawing to me, I wrote the explanation next to it in blue, and I photographed the pages.

I gave the photos to Claude Code and asked two things: can you turn this into a game, and are you any good at generating images? The answer to the second was no. That turned out to be the useful answer. If the model cannot draw, the drawings are the art, and the game ends up looking like his instead of like everyone else’s.

Pencil sprite sheet: somersault, dead, kicking the bag, punching the bag, three walking frames — The sprite sheet. “He walks with jumps.”

Paper to pixels

Each figure on a page gets a crop box. Inside the box, the paper colour is taken as the median of the border pixels, and every pixel’s distance from that colour becomes its opacity, so the pencil stays and the paper goes. Anything blue is masked out, because blue is my handwriting. The strokes are then pushed away from the paper colour by a factor of 2.6, which is what turns faint pencil into something that reads on a screen. The script is 62 lines of Python and produces 32 sprites.

What broke: his drawings overlap. On the level 2 page the three bosses’ arms cross each other, so a crop of one boss carried a piece of the next. Each crop now takes a list of rectangles to erase, and the boxer still lost part of an arm. The fix on paper is cheaper than the fix in code: leave space between the figures.

The cut-out sprites on a paper-coloured background — What the script hands to the game. Nothing here was drawn by a computer.

The game

It is a canvas, plain ES modules and no build step: 999 lines of JavaScript, served by whatever serves files. Top-down view, arrow keys walk, space punches. The rules are the ones on the page, as numbers. The bag gives 5 XP a hit, the gold bag gives 20 and costs 100 coins. The wall pays coins when it breaks and comes back stronger. The boss is fought in an arena with your health bar top-left and his bottom-right, which is where he drew them. Landing hits fills a meter, and a full meter is a super attack with a shockwave, also from a drawing.

Every number lives in one 115-line file, so “the boss is too hard” is a one-line change and a level is a list of where things stand, what they pay and what you cannot walk through. The sound effects are synthesised with the Web Audio API, so there are no audio files either; a punch is a burst of filtered noise over a sine sweep from 150 to 60 Hz.

Playable here. Arrow keys, space, X, Z; S, D and U in the arena. On a phone the buttons appear.

Screenshot of level 1: the drawn gym with a level, kracht and coin counter drawn by hand — Level 1. The “level”, “kracht” and coin labels are his handwriting, cut from the same page.

Screenshot of the arena: two drawn figures in a ring, health bars in opposite corners — The arena, laid out as sketched.

Playtesting by an expert

He played it that evening and by the next morning was level 16. Three things came back. The first boss went down in six punches once you owned gloves; his health was doubled. Nothing was for sale after the first hour, so the shop got a potion that unlocks at level 15. And the wall was taking far too long. It grew 35% stronger every time it broke, which felt right at wall 3 and is 40,000 hit points at wall 25, against a character hitting for 80. It grows in a straight line now.

Then he drew level 2. Three shops instead of one, three bosses paying 300, 900 and 5000 coins that come back stronger every time you beat them, two bags worth 40 and 80 XP, and a note that punching the first bag 100 times earns a new attack. Adding it meant the level 1 code had to become data, which it should have been from the start. Level 3 will be a copy of a block in the config file plus new photographs.

Pencil drawing of level 2: a gate, three shops, three bosses, two punching bags and a wall, annotated — Level 2, as delivered. Things get, in his words, a bit more serious.

Screenshot of level 2 with the three bosses and three shops — Level 2 in the game. The counter above the bag is the 100 punches to the new attack.

On the phone

A phone has no arrow keys. It got a joystick on the left and nine buttons on the right, which press the same virtual keys the keyboard does, so the game does not know the difference. The first version had nine labelled buttons that shrank the game to a third of the screen; they are single letters now, 46 pixels wide, at a quarter opacity over the game. One bug from this: the joystick held the arrow keys down but never pressed them, so the shop menu would not move. Menus listen for a press.

It is installable as a web app, with a manifest, a service worker for offline play and an icon that is his standing character in a red ring. iOS ignores the request for landscape, so he turns the phone himself.

The game on a phone in landscape, with a translucent joystick and letter buttons over it — On a phone. The controls sit over the bottom corners.

What it took

Two days, mostly evenings. He drew, explained and tested; I annotated, described and judged; Claude Code wrote the code and cut the sprites, checked its own work in a headless browser, and was wrong about difficulty every time until he played. The code is at github.com/hacktisch/boxolino. The two parts worth taking are the sprite script, which turns a photo of a page into transparent sprites, and the config file, which is the whole game as numbers. If your kid draws a game: photograph the pages flat, in daylight, and with space between the figures.