Ignite the Magic!

Hi, I’m Julibe, and I Craft Digital Experiences!

Whatsapp Facebook Twitter Dribbble Instagram Envelope

Haunt Me!

Contact Me!

Green Panic 🕹️Isometric Ghost-Hunting Chaos

Green Panic – 001
Dive into Green Panic, a 4-color isometric nightmare! Outrun smart AI, survive bomb sprees, and master the infinite maze in this Roguelike PacMan evolution. Play now!
Julibe
julibe #julibe #PacMan #Isometric #Roguelike #RetroGaming #GameBoy #PixelArt #Arcade #ProceduralGeneration #WebDev #CanvasAPI #IndieGame #GhostHunt #foryou
👻👻 💣 🟩 🕹️ 🧪 🏃 📟 ⚡ 💀 🔋 👾 🏆👽🚀👻
Step back into the 90s with a modern twist! Experience pure arcade tension in this endless, chaotic maze. Can you survive the Green Panic? Play it now!

Green Panic

v. 0.7.3

Discover the Chaos

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.

Welcome to the Green Matrix

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 an intense love letter to the golden era of handheld gaming, injected with the relentless tension of modern procedural design.

Survive the Unpredictable

Imagine the classic yellow dot-muncher trapped inside a radioactive, shifting matrix. The goal is simple: survive, score points, and do not get caught. But the unique isometric perspective adds a fresh layer of spatial awareness, making every corner a thrilling gamble. With random Chaos Events throwing bombs and altering speeds, this web experience guarantees that no two runs will ever feel the same.

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.

Difficulty: medium
Value: ~ $180 to $1.300 USD
Details
Minimum
Value: $180
Maximum
Value: $1.300

Duration: ~ 1 Day
Details
Hours: 40
Days: 5
Weeks: 1
Value: ~ $20 to $120 USD
Details
Minimum
Value: $20
Maximum
Value: $120

Duration: ~ 0 to 1 Day
Details
Minimum
Hours: 1
Maximum
Hours: 5
Value: ~ $40 to $240 USD
Details
Minimum
Value: $40
Maximum
Value: $240

Duration: ~ 0 to 1 Day
Details
Minimum
Hours: 1
Maximum
Hours: 9
Days: 1
Value: ~ $60 to $430 USD
Details
Minimum
Value: $60
Maximum
Value: $430

Duration: ~ 0 to 3 Days
Details
Minimum
Hours: 2
Maximum
Hours: 20
Days: 3
Value: ~ $40 to $280 USD
Details
Minimum
Value: $40
Maximum
Value: $280

Duration: ~ 0 to 1 Day
Details
Minimum
Hours: 2
Maximum
Hours: 10
Days: 1
Value: ~ $30 to $180 USD
Details
Minimum
Value: $30
Maximum
Value: $180

Duration: ~ 0 to 1 Day
Details
Minimum
Hours: 1
Maximum
Hours: 7

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

  • 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!

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)

<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>

<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! 🧭

  • 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
  • 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.

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.

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.

  • 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.

  • 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).
  • 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.
Discover the Chaos
Green Panic - 001
Green Panic - 002

* Pricing, timelines, content, and designs are subject to change without prior notice.
Certain projects or aspects displayed are presented for demonstration purposes only and may include partial or placeholder content, conceptual work and/or early-stage ideas, and may not reflect the final delivered product.

* All values provided are preliminary estimates based on the scope that similar projects may present.
These are intended for general reference only and should not be considered final or binding figures.

More spooktastic codes ready to ignite your curiosity!

ChaosBomber - 002

Chaos Bomber 💣 Explosive Pixels Ready to Explode!

Prepare your microcomputers! Chaos Bomber pushes the absolute limits of graphical rendering. Insert your coins and click to play the ultimate arcade game!
View More!
BauhaClock - 001

BauhaClock ⏰ Minimal 3D Analog Clock

Ready to watch time fly? Discover this vibrant, interactive 3D clock that brings a modern, colorful aesthetic right to your screen! Play, click, and enjoy!
View More!
Retro Chromatic - 001

Retro Chromatic 🎞️ Fake the Glitch, Feel the Nostalgia

Inject a dose of retro-futurism into your web projects. This pure CSS & SVG solution simulates CRT chromatic aberration without heavy JavaScript libraries. 📺✨
View More!
Keep Up to Date? Sure, it's cool! No thanks, I'm afraid