Code Village

Inspiration# 🏘️ Code Village

A 2D pixel RPG built with the Maki framework — fix a broken village by solving coding puzzles, one NPC at a time.

---

What inspired me

I've always believed that the best way to learn something is to feel it — not just read about it. When I discovered the Maki framework and saw how naturally it supports scenes, tilemaps, and NPC dialogue, I asked myself: what if every coding concept had a face, a personality, and a problem you had to solve to help them?

That's how Code Village was born. Instead of a tutorial with bullet points, I wanted a world where loops are farmers planting infinite carrots, variables are shopkeepers who forgot their own prices, and a missing semicolon is the Mayor's deep, shameful secret.

---

What I built

Code Village is a top-down 2D pixel RPG where the player explores a broken village and restores it by solving four coding logic puzzles — one per building. Each zone teaches a different foundational concept:

Zone	NPC	Bug	Concept
The Library	Zara	Chapters out of order	Sequences
The Farm	Farmer Bob	Infinite carrot loop	Loops
The Market	Shopkeeper Meg	Reused variable names	Variables
The School	Teacher Rex	Missing else block	Conditions

After all four zones are fixed, the player reaches the Mayor's House for a final twist: the entire village crashed because of a ; — a single missing semicolon on line 47 of the Mayor's code. He has been Mayor for 20 years.

---

How I built it

The entire game is built with the Maki framework — a beginner-friendly JavaScript game library built on top of Phaser 3. Here's the technical stack:

• Maki — scenes, tilemaps, player movement, NPC collision
• Phaser 3 (via Maki) — physics, camera, tweens, registry for global state
• Vite — local dev server and bundler
• WebAudio API — programmatic sound effects (no audio files needed)
• Vanilla JS — puzzle logic, dialogue system, UI manager

I built a reusable UIManager class that handles dialogue boxes with typewriter effects, puzzle panels with answer validation, proximity indicators, and scene transitions with fade. Every building is its own Maki scene, and progress is tracked via Phaser's built-in registry.

---

Challenges I faced

The dialogue system was harder than expected. Getting the typewriter effect to pause correctly between lines — and only trigger the next line on SPACE press, not accidentally skip two lines — required careful state management with a simple enum (TYPING, WAITING, DONE).

The matching puzzle in the Market scene (drag variable names to items) was the most complex UI I've built. I simplified it to click-to-select instead of drag-and-drop to keep it keyboard-accessible and easier to implement under the deadline.

Scene transitions in Maki required passing state correctly between scenes. I used this.registry (Phaser's global store) to persist which buildings were fixed across scene restarts — this was a key learning.

---

What I learned

• How to structure a multi-scene Maki game with shared state
• How to build reusable UI components inside Phaser (no DOM)
• That building something educational forces you to truly understand the concept — I had to make sure every puzzle was correct, clear, and fun
• That Farmer Bob's infinite carrot loop is genuinely the funniest thing I have ever coded

---

The twist (mild spoiler)

After fixing the whole village, the Mayor confesses: the entire crash was caused by a missing semicolon in his own code. The credits end with: // TODO: fix the semicolon on line 47

---

How to run it

npm install
maki dev

Open http://localhost:5173

Controls: Arrow keys to move · SPACE to talk · ENTER to enter buildings · R to restart

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for Code Village

Built With

• css3
• github
• html5
• javascript
• maki
• phaser-3
• tiled-map-editor
• vite
• web-audio-api