Source: Dev.to

7 CODER WORDS

7 CODER WORDS is a word‑puzzle game for anyone interested in computer science. You receive seven clues and must guess the hidden word for each clue by arranging shuffled word tiles.

---

Inspiration

I’ve been playing the mobile game “7 Little Words” for years and love it. I wanted a remake that only uses words from the computer‑science and programming realms.

---

Target Platform

• Web‑based (works on both mobile and desktop browsers).
• No app‑store installation, sign‑up, or other ceremony—just open the site and start playing.
• Implemented as a Progressive Web App (PWA) so it works offline.
  • The service worker caches all assets and checks for updates automatically on iOS and Android.
  • Users can add it to their home screen for a native‑app feel.
• No external library dependencies.

---

Graphics

• Rendered entirely with Canvas 2D (no DOM, minimal CSS).
• Coordinates are expressed as fractions of the canvas size, making the game resolution‑independent and adaptable to any display.

---

The Agent and Me

I built a prototype with a test JSON model containing clues, answers, and answer tiles. After the proof of concept, I used Claude Code to finish the game.

• Claude helped with boilerplate, pixel‑position calculations, and other tedious tasks.
• The AI occasionally over‑engineered or mis‑named fields, so I edited the output manually.
• Using Claude felt like collaborating with a co‑worker: I set the direction, Claude generated code, and I refined it.

---

The Puzzles

Are the puzzles AI‑generated? Sort of—but not entirely.

1. I wrote Claude skills to extract data and structure a puzzle model file.
2. Early results produced overly long or overly simple words and inaccurate clues, and token usage was high.
3. I then had Claude generate Python scripts that:
   • Create JSON models,
   • Maintain an index, and
   • Prepare puzzle structures.
4. After generating ~50 puzzles, I reviewed and edited each one manually, adding many words from my own CS knowledge.

---

Bundling

• All code and puzzle data are bundled into a single 45 KB JavaScript file for a one‑time load.
• To obscure the puzzles from casual scraping, I encoded them with a simple ROT cipher—mostly for fun.
• Audio assets are stored in a single MPEG‑4 sprite file.
  • I first converted each sound to WAV, then concatenated them with FFmpeg to create the sprite.

---

Testing

• Claude wrote unit tests to verify:
  • Correct tile count per puzzle,
  • Proper clue sizing, and
  • Accurate indexing.
• I added an end‑to‑end Playwright test that clicks through the UI and plays the entire game.
  • After several iterations, the test uncovered an overlap issue with long clues and answers.

---

Cheating

Players can trivially cheat by looking up clues online or using an LLM. That’s not the point of the game, though—the fun lies in solving the puzzles yourself.

It's a test against yourself, not against others. A clue you can't crack can often be cracked through the tiles alone.

## Conclusion

Building this little PWA game was a lot of fun. I'm a big proponent of web apps and I believe most mobile apps can actually be web apps instead. It's a bit sad that Apple chose not to fully support PWAs and I hope they soon decide otherwise. If you'd like to try the game, go to [7coderwords.kenamick.com](https://7coderwords.kenamick.com/) and let me know what you think at [@7coderwords@mastodon.social](https://mastodon.social/@7coderwords).

Tapping on the puzzle number shows its unique 4‑character code. One can navigate to any puzzle by entering this code in the **Go to puzzle** settings option. There is also another way to do that hidden in the game title, but more on that on the game's Mastodon page later on.

Thanks for reading. ❤️