Inspiration
We wanted a system to help educate people just starting out in computer science and/or computer science engineering. Our aim was to create a fun way to practice circuits or reading simple syntax in python using minigames and temple run-esque game.
What it does
Logical Steam is an endless run down a river. You pilot a steampunk paddle steamer through bends, dodge crates, rocks, waves and whirlpools, and stay ahead of a kraken chasing you. When the engine faults, a timed repair opens. You fix it by wiring signal boxes so the steamboat leaves its dock exactly when the order says, or by picking what a short Python snippet prints.
- Three difficulties: Easy, medium, or hard. There are changes to speed, obstacles, the kraken's pace, how often faults happen and how hard the circuits are.
- A day/night cycle, a bow lamp that lights the river at night, and sound effects made entirely in code.
- A practice mode with all 11 circuits and no timer.
- A top-5 leaderboard per difficulty. Finished runs can be recorded on the Solana devnet with a Phantom wallet, and the leaderboard is read back from the chain.
How we built it
It's plain HTML, CSS and JavaScript with no framework and no build step. The river, boat, obstacles and kraken are all drawn on a 2D canvas, and every sound is made with the Web Audio API from tones and filtered noise. The circuit checker is a small logic module with its own tests, and a second test runs every coding question against real Python output. For Solana, each run is a single devnet transaction: a 0-lamport transfer that tags the leaderboard address, plus a Memo with the difficulty, distance and name. The leaderboard is built by reading those transactions back. Before writing code we agreed on a design direction (Victorian brass, "an old scientific instrument, not a sooty factory") and held every screen to it.
Challenges we ran into
- Finding the theme. The game started as a steel mill puzzle, became a steam railway, and ended up as a river run. Each reskin meant redrawing almost every asset.
- Solana in the browser.
SystemProgram.transferdepends on Node'sBuffer, which browsers don't have, so we build the transfer instruction by hand. - Game feel. Early on, bends could pull you harder than you could steer. The boat also needed to scrape and slow at the bank instead of leaving the water, and we cut obstacles by 20% after playtesting.
- Layout bugs. A generic CSS rule collapsed the in-game HUD, and the mirror's maths broke on pages with no width.
Accomplishments that we're proud of
- It teaches a real CS idea inside a game people want to keep playing.
- Every visual and every sound is made in code, with no image or audio files.
- An on-chain leaderboard that reads its scores back from Solana, not from our own server.
- It respects reduced-motion settings and keeps text contrast readable on every panel.
- Every Python question is checked against real Python, so the answer key can't be wrong.
What we learned
- How Solana transactions, memos and devnet RPC work, and how to read data back from the chain.
- How far a 2D canvas can go: lighting, a day/night cycle and a chase camera with no 3D engine.
- Deciding the design rules early saved us from arguing over every screen later.
- Playtesting beat guessing every time we tuned the difficulty.
What's next for Logical Steam
- More gate types (NAND, NOR) and longer multi-stage circuits.
- More coding questions, and possibly other languages.
- Teacher mode: a class code and a shared leaderboard for a classroom.
- Moving the leaderboard from devnet to mainnet, or to a small Solana program.
- Mobile touch controls and a phone-first layout.
Built With
- claude
- css
- html
- javascript
- solana
Log in or sign up for Devpost to join the conversation.