GreenGap
Educational ecological succession game teaching environmental concepts through mechanics
The Problem
Most educational games bore players with facts. GreenGap teaches ecological succession (how landscapes recover from disruption) by embedding lessons in game mechanics rather than exposition. Players must understand ecological concepts to progress—knowledge becomes prerequisite for winning.
My Approach
- → Mechanics-first design: rules embody ecological concepts, not illustrations
- → Progressive difficulty through mechanical gating (unlock abilities = understand concepts)
- → Fastifyend FastAPI microservice for game state and progression
- → Vanilla JavaScript + HTML5 Canvas frontend (no framework overhead)
- → SQLite tracks player progress and learning metrics
- → Three difficulty tiers (Story, Hard, Impossible)
Key Highlights
- Game design focused on teaching through mechanics, not exposition
- Progressive unlocking system teaches concepts in proper order
- Full-stack simplicity: ~500 lines Python, ~800 lines JS
- Educational value: Used in environmental science curricula
- Deployable to free tiers (Render backend, Netlify frontend)
How It Works
GreenGap is my answer to a specific question: Can you teach serious environmental science concepts through a game without boring the player?
The answer is yes—if you embed the concepts in the rules.
The Game
You’re a land manager restoring a forest. You have budget, seasons, and limited actions. To succeed, you must:
- Understand plant succession (pioneer species → climax ecosystem)
- Plan long-term (this decision matters 20 seasons ahead)
- Adapt when randomness disrupts your strategy (droughts, pests)
Win by reaching a thriving ecosystem. Lose by running out of budget or time.
Mechanics = Teaching
Instead of explaining succession, the game demonstrates it:
- Pioneer species grow fast, stabilize soil, then die out (realistic)
- Late-successional species grow slow, but provide permanent value (realistic)
- Biodiversity reduces risk (diverse ecosystems handle disruption better)
Players learn these principles not by reading them, but by experiencing them fail when ignored.
Design Decisions
Why Vanilla JS? Simplicity. No framework overhead, direct canvas access, <150KB total app size.
Why FastAPI backend? Even simple games benefit from centralized state management. Prevents cheating (can’t fake progress), enables cross-platform sync.
Why three difficulty tiers?
- Story: Generous budget, predictable randomness. Teaches mechanics.
- Hard: Realistic budget constraints. Real environmental complexity.
- Impossible: Random events can destroy your plan entirely. Teaches humility.
Educational Integration
Teachers use GreenGap in classrooms because it:
- Visualizes abstract concepts (succession timelines)
- Provides replayability (each run is different)
- Scales difficulty (from “understand the rules” to “master strategy”)
- Generates data on student understanding (which mechanics do they grasp?)
Tech Stack Simplicity
Backend: 500 lines of FastAPI. No complex routing, one SQLite table. Handles game state, scoring, progression.
Frontend: 800 lines of vanilla JS. No React bundle, no npm complexity. Just canvas rendering and turn logic.
Result: Game loads in 2 seconds. No framework compilation, no build pipeline drama.
This is intentional. Educational games compete for classroom time. Slow, bloated apps lose.
Why I Built This
Most game dev is either:
- Massive (AAA scope, 100+ person teams)
- Trivial (match-3 games, infinite clickers)
GreenGap sits in the middle: ambitious game design, focused scope, educational mission. It proves you can ship a meaningful game with minimal technical debt.
Lessons Learned
Mechanics are more powerful than exposition. A single game rule can teach what 10 pages of text cannot.
Educational games aren’t “games for learning”—they’re games first, where the learning is a side effect of playing well.
Simplicity in tech enables ambition in design. Vanilla JS forced me to think clearly about what the game needed versus what I wanted.