Before you start
A coding agent, browser and basic comfort running a local development command.
Why this lesson exists
This lab adapts the “Build a Mobile Roguelike You Can Play Offline” project write-up into a practice build. The time is an estimated first session, not a promise to finish a production system. Use the public repository as a reference when available; the exercise can be built with original sample content.
Do the exercise
Define the practice version
Use an original grid and placeholder art. Implement move, wait, one enemy and an exit before procedural generation.
Build step 1
Create one room, one player, and one monster.
Build step 2
Represent the world as a grid before adding graphics.
Build step 3
Make movement and combat deterministic enough to test.
Build step 4
Add inventory and save data only after the core loop is fun.
Build step 5
Add touch buttons that call the same commands as the keyboard.
Build step 6
Add the PWA manifest and service worker last.
Run the experiment
Start a run, move twice, save, reload and confirm the same state. After the production app has cached successfully, disconnect and reopen the exact same origin.
A prompt to adapt
Replace the bracketed parts with your own practice details.
Work in a disposable practice project. Explain any setup requirements before changing files. Build one small step at a time and show how I can check it. I am building a grid-based browser roguelike in JavaScript. Design the smallest playable loop with one room, one enemy, one weapon, and one win condition. Separate game state from rendering. Give me a file map, state schema, and five automated tests. Do not add procedural generation yet. Review this input system. Keyboard, touch, and controller must all call the same game commands. Identify duplicated logic and propose a command-based interface with examples for move, wait, pick up, open inventory, and cast spell. My first-version boundary: Use an original grid and placeholder art. Implement move, wait, one enemy and an exit before procedural generation.
Run this experiment
Start a run, move twice, save, reload and confirm the same state. After the production app has cached successfully, disconnect and reopen the exact same origin.
Check your result
Use evidence from your output. A confident explanation from the AI is not enough.
- Movement and turn rules are deterministic.
- Reload restores the saved room and player state.
- Offline behavior is tested after a successful online load.
If it isn’t working
A service worker does not make an unvisited site available offline. Test the production build on the same host and record which assets were cached.
Optional. Progress stays in this browser.
Where this came from
Public project repository ↗. The practice lesson is an adaptation, not a verbatim transcript. About the sources.
Prepared September 2026. Tools and interfaces change; use current official setup instructions. Session lengths are estimates.