Green Panic, a 2.5D isometric arcade roguelite utilizing a GameBoy-inspired palette with procedural generation.
Home / Green Panic 🕹️Isometric Ghost-Hunting Chaos
In a nutshell...
The "Too Long; Or too scary??? Anyway don't Wanna Read" version... 🔮
Green Panic is an isometric, GameBoy-inspired arcade game where no two runs are ever the same. You play as a nimble hero trapped in a procedurally generated maze, hunted by relentless ghosts. The catch? The game actively tries to mess with you by throwing random ‘Chaos Events’ like sudden speed boosts or raining bombs.
It uses a strict four-color green palette to deliver maximum nostalgia while leveraging modern HTML5 Canvas and JavaScript for buttery smooth 2.5D rendering. It is a fusion of retro aesthetics and modern roguelike mechanics, designed to test your reflexes and strategic thinking.
About
Thinking about building something similar?
These estimates will give you a clear picture of the technical scope, development timeline, and investment required to turn the idea into an awesome reality.
Big results start with clear information and smart decisions.
Total Value
A standout value you can’t miss:
Value: ~ $740 to $1.500 USD
Details
Minimum
Value: $740
Value: $740
Maximum
Value: $1.500
Value: $1.500
A brilliantly estimated time:
Duration: ~ 4 to 1 Week
Details
Minimum
Hours: 30
Days: 4
Hours: 30
Days: 4
Maximum
Hours: 50
Days: 6
Weeks: 1
Hours: 50
Days: 6
Weeks: 1
Concept
A fantastic value for you:
Value: ~ $70 to $140 USD
Details
Minimum
Value: $70
Value: $70
Maximum
Value: $140
Value: $140
A brilliantly estimated time:
Duration: ~ 0 to 1 Day
Details
Minimum
Hours: 3
Hours: 3
Maximum
Hours: 5
Hours: 5
Design
A fantastic value for you:
Value: ~ $140 to $290 USD
Details
Minimum
Value: $140
Value: $140
Maximum
Value: $290
Value: $290
A swift and smooth schedule:
Duration: ~ 1 Day
Details
Hours: 8
Days: 1
Days: 1
Coding
An awesome value:
Value: ~ $250 to $500 USD
Details
Minimum
Value: $250
Value: $250
Maximum
Value: $500
Value: $500
A rapid delivery time:
Duration: ~ 1 to 3 Days
Details
Minimum
Hours: 9
Days: 1
Hours: 9
Days: 1
Maximum
Hours: 20
Days: 3
Hours: 20
Days: 3
Testing
A standout value you can’t miss:
Value: ~ $160 to $320 USD
Details
Minimum
Value: $160
Value: $160
Maximum
Value: $320
Value: $320
A masterfully crafted timeline:
Duration: ~ 1 Day
Details
Hours: 9
Days: 1
Days: 1
Polishing
An amazing value at this price:
Value: ~ $110 to $220 USD
Details
Minimum
Value: $110
Value: $110
Maximum
Value: $220
Value: $220
An unbeatable turnaround:
Duration: ~ 1 Day
Details
Hours: 6
Don’t let the numbers scare you, let’s talk!
The Juicy Details!
All treats, no tricks, just the sweet facts! 🍭
Step into a world where everything is just a little bit greener and a whole lot more dangerous! Green Panic takes the classic arcade maze chase and flips it on its axis literally. Built from the ground up for the browser, this project is a love letter to the golden era of handheld gaming, injected with the relentless tension of modern procedural design.
As a lover of sci-fi, anime, and a pro at game overs since the 90s, I wanted to build something that captures the magic of late-night gaming sessions under the covers with a flashlight. No bloat, no heavy downloads, just pure code and pure adrenaline. Ready to outsmart the AI and survive the chaos? Let’s dive in!
a
Instructions
- W, A, S, D: Navigate the isometric grid.
- Spacebar: Dash to escape tight corners or outrun faster enemies!
- Watch the UI: Keep an eye on the top left for your Score and current Chaos Event.
- Survive: Don’t let the ghosts touch you, and avoid the bombs when chaos strikes!
Inspiration
The visual language is a direct tribute to the era of Nintendo’s first major portable console. I wanted to capture that exact feeling of staring at a non-backlit screen, where the contrast between #0f380f and #9bbc0f was your entire universe. The aesthetic is intentionally raw and pixelated, honoring the hardware of the past.
Mechanically, the introduction of ‘Chaos Events’ was inspired by modern chaotic multiplayer games and the rising trend of livestream integrations where viewers can mess with the player. I wanted a single-player game to feel like there was an unseen trickster pulling the strings, keeping the player constantly on their toes.
“The Nintendo way of adapting technology is not to look for the state of the art but to utilize mature technology that can be mass-produced cheaply.”
Gunpei Yokoi (Creator of the Game Boy)
Project Overview
<p>Imagine if the classic yellow dot-muncher got trapped inside a radioactive, shifting matrix. That is Green Panic. The goal is simple: survive, score points, and don’t get caught. But the isometric perspective adds a fresh layer of spatial awareness, making every corner turn a thrilling gamble. The ghosts are not just wandering aimlessly; they are actively hunting you, forcing you to use your dash ability and quick thinking to stay alive.</p> <p>What makes this truly special is the unpredictability. The ‘Chaos Events’ ensure that you can never just memorize a pattern. One second you are methodically clearing the board, and the next, you are dodging a literal minefield while running at double speed. It keeps the gameplay spicy and highly addictive!</p> <p>The inspiration hit me while reminiscing about the beautiful constraints of early hardware. I wanted to see how much tension and excitement I could squeeze out of just four shades of green and a web browser. It is proof that you do not need realistic 3D graphics to create a visceral, heart-pounding digital experience.</p>
Theory
<p>The concept of the maze chase is as old as video games themselves. It gained massive global popularity thanks to <a href=”https://en.wikipedia.org/wiki/Toru_Iwatani”>Toru Iwatani</a>, the visionary creator of the original arcade classic. His brilliant idea of appealing to a broader audience through universally recognizable shapes and intuitive gameplay laid the foundation for decades of game design.</p> <p>However, Green Panic does not just look to the arcades. It heavily draws from the <a href=”https://en.wikipedia.org/wiki/Game_Boy”>Game Boy</a> era. The hardware constraints of the late 80s forced developers to focus entirely on gameplay loop and readable silhouettes over flashy graphics. The iconic pea-green screen became a symbol of portable escapism.</p> <p>To bring this into the modern era, I integrated elements from the <a href=”https://en.wikipedia.org/wiki/Roguelike”>Roguelike</a> genre. By utilizing procedural generation for the mazes and unpredictable events, the game borrows from a lineage of games that prioritize replayability and mastery over static memorization. This creates a bridge between the repetitive perfection of the 80s arcades and the dynamic challenge of 2020s indie gaming.</p>
The Game-Plan!
Plotting a safe course through the scary maze! 🧭
Challenges
- Isometric Depth Sorting: Drawing a 2.5D world requires rendering entities in the exact correct order (back to front) so players don’t visually clip through walls.
- Procedural Maze Logic: Generating a maze randomly is easy, but generating a maze that is actually fun, solvable, and has no dead-end traps requires complex pathfinding algorithms.
- AI Pathfinding: Making ghosts smart enough to chase the player on an isometric grid without getting stuck on corners
Solutions
- Implemented a strict Z-index sorting algorithm based on the grid’s Y and X coordinates before every render frame to ensure perfect visual depth.
- Used a customized recursive backtracker algorithm to carve out the maze, combined with a validation pass to ensure open loops for fluid movement.
- Equipped the enemy AI with a localized A-star search variant, allowing them to calculate the shortest path to the player dynamically.
Impact
This project serves as a fantastic benchmark for what can be achieved with pure vanilla JavaScript and the Canvas API. For developers, it provides a clean, dependency-free example of isometric rendering and game loop management.
For players, it offers a quick, accessible burst of entertainment that requires zero installation, proving the web remains an incredible platform for instant gaming experiences.
Scope
Green Panic is strictly an endless arcade survival game. It includes dynamic levels, smart enemies, and a robust rendering engine. It intentionally excludes complex level editors, multiplayer networking, or external assets like image files, keeping the entire codebase lightweight and instantly executable.
Credits
- MDN Canvas API: The holy grail documentation for rendering 2D graphics natively in the browser.
- Pixelify Sans: Provided by Google Fonts to give the UI that perfect crisp, retro typography.
- JavaScript Math Object: The unsung hero behind the procedural generation and isometric calculations.
The Nerd Stuff!
I think we are going to need a bigger boat... ahem, I meant cauldron! ✨
JavaScript, HTML5 Canvas, CSS
Green Panic runs entirely on a custom-built JavaScript game engine. It uses the `requestAnimationFrame` API to maintain a buttery 60 frames per second. The isometric perspective is achieved by mathematically transforming standard 2D Cartesian coordinates into an angled grid using custom projection formulas. All graphics, including the player sprite and ghosts, are drawn pixel-by-pixel using the Canvas 2D context, ensuring the retro aesthetic is hardcoded into the logic.
Improvements
- Implement WebAudio API for chiptune sound effects and dynamic background music.
- Add LocalStorage support to save the highest scores across sessions.
- Introduce new ghost types with distinct behavioral patterns (e.g., an ambusher or a coward).
Known Bugs
- Very rarely, overlapping ‘Chaos Events’ might cause a temporary visual stutter if too many bombs spawn simultaneously.
- Dash cooldowns might desync slightly if the browser tab is left inactive for extended periods.
