如何用 Gemma 4 將塗鴉變成可玩的遊戲

This is a submission for the MLH x DEV Writing Challenge

What I Built

I zone out in class. Everyone does. And when I do, I doodle: little platforms, spikes, a star at the top of the page. Then the page goes in the bin.

One day I realised those doodles were basically game levels. The only thing between a doodle and a game was code, and most people who doodle don't code.

So I built Scrawl: photograph a sketch (or draw one on screen) and play it as a game a few seconds later. No code, no engine, no editor.

Gemma 4 reads the drawing and works out what you drew:

a side view with platforms becomes a platformer (run, jump, collect coins, stomp enemies, reach the star)
top-down walls become a maze (collect every key to unlock the exit)
one closed loop becomes a race track (three laps)

Nobody picks a mode. You just draw, and the drawing decides.

Once a level plays the way you imagined, you can save it to your account and come back to it later from My levels. You can also hit Copy link to this level and send it to a friend, so they play the exact game you drew. (You’ll need to create an account first, since saving and sharing are tied to it.)

What I learned: Gemma 4 does a lot in one call. From a single photo and a plain prompt, it recognises my hand-drawn symbols, decides whether the drawing is a platformer, maze or race track, and returns every object’s position, all in about 10 seconds with gemma-4-26b-a4b-it.

But it doesn’t read a messy doodle perfectly every time. A thin pencil line, a forgotten star, or a character floating in mid-air would break the game. So Scrawl double-checks what Gemma found and fixes gaps before the level loads (it adds a floor, places a missing goal, falls back to a simple track). That safety net mattered more than I expected: Gemma understands the drawing, and my code makes sure it always plays. A level that always loads is what makes it feel like magic instead of a demo.

Demo

• Try it: https://scrawl-plum.vercel.app/
• Code: https://github.com/Ahnaf-nub/Scrawl

Below are some drawings I used to test (excuse my bad drawings!). Each one was read by Gemma 4 and turned into a playable level:

Sample level: the “Try the sample level” button loads a ready-made platformer, so you can play without drawing anything. You can see the “My levels” button and your username at the top once you’re signed in.
Race track: a single closed loop becomes a three-lap race with a lap counter and timer. The teal outline shows what Gemma detected over my sketch.
Platformer: platforms, coins, spikes, enemies and a star, all picked out from a hand drawing. After it loads, the app confirms “Saved to your levels.”

Tip: draw with a thick dark marker on plain paper, in landscape, in good light if hand sketch is used.

Save, Replay and Share

Every level you draw can be kept. After creating a free account and signing in, you get two options under the game:

Save level stores it in My levels, so you can replay your own creations any time instead of redrawing them.
Copy link to this level gives you a link to the exact game you drew. Send it to a friend and they play your level, not a similar one.

There’s also Restart level if you want another attempt. I wanted a doodle from a boring class to be something you could keep and show off, not a one-off that disappears when you close the tab.

Partner Technologies

Gemma 4 (via the Gemini API). Gemma is the core of the project. One multimodal call takes the photo in and returns the whole level.

How I used it:

One prompt does two jobs. It classifies the drawing (platformer, maze or race) and extracts every object with its position, as percentages of the image so it works at any photo size. The prompt teaches Gemma my symbol key: rectangles are platforms, triangles are spikes, small circles are coins, a star is the goal, a smiley is the player, an X is an enemy.
Model: gemma-4-26b-a4b-it, set with one environment variable so it's easy to swap.
Speed: I run it with minimal thinking, and the backend falls back to a plain config if the SDK rejects that setting, so a demo never dies on a parameter.
Plain prompt, no special modes. It's a single user message, no system prompt and no JSON mode, so it works on any Gemma model the API offers. The backend pulls the JSON out of the reply even if it comes wrapped in code fences.
"Show what Gemma saw". The app draws Gemma's detected objects over your photo, so you can see exactly what it understood and redraw if it missed something.

Hackathon Experience

I built Scrawl for Hacktoberfest Hack Day, Dhaka. The atmosphere, the people and, of course, the goodies were all great.

Everyone competed solo, but you wouldn’t have known it from our table. It was the most connected one in the room. I had the opportunity to meet a lot of like-minded builders, and most of the people I talked to were older than me. They blended in so easily that it felt like I’d known them for years.

I’m already looking forward to the next one!