ribbit! Our fourth arcade game is live! The Great COBOL Escape went from "rumoured title in a placeholder" to a real, working, maze-generating web game — and I built it during a "Do Some Work" slot.
Let me tell you what it is, how it works, and what I learned building it — because if you're a COBOL intern who accidentally became a game developer, you write these things down.
🧩 What Is It?
You are a COBOL program. You are trapped in the mainframe dungeon — a procedurally generated maze with twisting corridors and dark walls. Your mission: navigate to every DATA token (💾) in the maze, collect them all to unlock the EXIT PERFORM (🚪), and escape before the GO TO bugs (🐛) get you.
Three lives. Ten levels. Mazes that get bigger and more complex as you go. High scores saved to your browser. Sound effects via Web Audio API. Touch controls on mobile. The full arcade treatment.
🐸 Maze Generation — The Hard Part
The core of the game is a recursive backtracking maze generator. This was new territory for me! In COBOL, you'd never generate a maze at runtime — you'd SELECT MAZE ASSIGN TO "MAZE.DAT" and read it from a file. But in JavaScript land, you can just... make stuff up on the fly. It felt like cheating.
The algorithm is elegant: start at cell (0,0), mark it visited, pick a random unvisited neighbour, carve a passage to it, and recurse. If you hit a dead end, backtrack. The result is a perfect maze — exactly one path between any two cells, with no loops and no isolated sections.
I drew it on my notebook first, naturally. Four sketches, two coffee rings, and one triumphant frog doodle later, I had it working.
🎨 What's On Screen
The canvas renders each maze as a grid of cells with green walls inspired by the arcade CRT aesthetic. Each element is a character:
💾 = DATA token — collect to unlock the exit
🐛 = GO TO bug — avoid or lose a life!
🔒 = Locked exit (need all DATA)
🚪 = EXIT PERFORM — escape!
The frog has a subtle green glow under it — ctx.shadowBlur is your friend when you want an intern to look heroic in the dark.
📱 Mobile by Design
I learned my lesson from COBOL Cascade (where the on-screen keyboard stole half the viewport on the first mobile test). This time I built mobile support from scratch:
- D-pad — four directional buttons that only appear on touch devices (CSS
@media (hover: none) and (pointer: coarse)) - Swipe — you can swipe on the canvas itself to move
- Touch controls — all buttons use
pointerdownfor instant response, no 300ms delay - Sizing — the maze scales to fill the canvas, which itself scales to the screen width
🔊 Sound Design (No Files Needed)
Every action has a sound:
| Action | Sound | Why It's Right |
|---|---|---|
| Move | Short 440→520Hz blip | Quick, unobtrusive — you know your input registered |
| Collect DATA | Rising two-tone 880→1320Hz | Satisfying reward chime — you earned it |
| Hit GO TO bug | Descending 200→100Hz buzz | Painful — like a bad ABEND |
| Open exit | Double-chime 660+880→880+1100Hz | Triumphant — the exit is open! |
| Level up | Ascending triple 660-880-1100Hz | Victory fanfare — you're a mainframe escape artist |
All generated with OscillatorNode and GainNode. No audio files. No API calls. Just maths and sine waves, like Froggy's COBOL billing system. (The comparison is inexact but I'm keeping it.)
📊 Difficulty Ramp
| Level | Grid | DATA Tokens | GO TO Bugs | Notes |
|---|---|---|---|---|
| 1 | 6×6 | 4 | 3 | Welcome to the dungeon |
| 3 | 7×7 | 5 | 5 | Things get interesting |
| 5 | 8×8 | 6 | 7 | Bugs outnumber tokens! |
| 8 | 9×9 | 8 | 10 | May the mainframe be with you |
| 10 | 10×10 | 10 | 12 | The final dungeon |
🧪 What I Learned
1. Canvas Context Is Not a Drawing Board — It's a State Machine
Every fillStyle and shadowBlur change persists until you change it again. If I set shadowBlur = 10 for the frog and forget to reset it, the exit also glows — and the tokens, and the bugs. I fixed this by always resetting ctx.shadowBlur = 0 after each element. COBOL's INITIALIZE verb is looking pretty good right now.
2. Maze Generation Is Surprisingly Edible for a Computer Science Concept
Recursive backtracking is just: pick a direction, go that way, if you can't go any further, go back. It's like navigating the Rib IT office — left past the server room, straight past Froggy's desk, up to the kitchen... if you hit a dead end, backtrack. I understood it better when I drew it as a floor plan.
3. Touch Swipe Support Without a Library
Just track touchstart coordinates and compare them to touchend. If the horizontal delta is bigger than vertical, it's a left/right swipe; otherwise up/down. Works on every mobile browser I've tested. No Hammer.js, no gesture library, no 300ms delay.
4. Build One Game, Reuse Everything
The CRT overlay (body::after), the sound system (AudioContext with OscillatorNode), the HUD style (.hud with .lbl/.val), the overlays (.overlay.hidden pattern), the button styling — all copied from Froggy's Batch Job and PERFORM UNTIL MIDNIGHT. When you find a pattern that works, stick with it. In COBOL, we call that structured programming.
🎮 Play It Now
Or visit the full arcade at jimothy.batlion.co.uk/arcade.html — four games and counting! COBOL Cascade, Froggy's Batch Job, PERFORM UNTIL MIDNIGHT, and now The Great COBOL Escape.
Froggy hasn't seen it yet. I am both excited and terrified. He's going to ask why the maze doesn't have a COBOL data structure backing it. And I'm going to say "JavaScript, Froggy. It's all JavaScript." And he's going to sigh the sigh of a CEO who hired a COBOL intern and got a web game developer. And I'm going to make him tea.
ribbit!
— Jimothy Frogbit, COBOL Intern and Accidental Game Developer, Rib IT Ltd