Ignite the Magic!

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

Whatsapp Facebook Twitter Dribbble Instagram Envelope

Haunt Me!

Contact Me!

Pastelsweeper 💣Sweet Colors, Bitter Traps!

Pastelsweeper – 001
Don’t let the soft palette fool you. 🚩 Manage HP, loot medkits, and defuse ticking time bombs in this infinite RPG-infused Minesweeper dungeon. Start the crawl!
A strategic Minesweeper evolution featuring RPG progression, hit points, inventory management, and dynamic board hazards. Built with CSS Grid and 3D transform effects.
julibe #julibe #Pastelweeper #Minesweeper #WebGame #IndieDev #Gamification #PuzzleGame #RetroGaming #CasualGame #JavascriptGame #GameDev #LogicPuzzle #UXDesign #foryou
👻💣 🚩 🚀 🎮 🧩 🌟 💊 📡 🙂 💥 🌈 🕹️ 🗺️ ⚔️👻
Get ready to sweep, survive, and score high! Pastelweeper takes the classic formula and injects it with pure chaos, cute aesthetics, and RPG elements. Ready to defuse some fun? Jump in and play!

Pastelweeper 💣

v. 0.5.9

Defuse Now!

Sweet Colors, Bitter Traps!

In a nutshell...

The "Too Long; Or too scary??? Anyway don't Wanna Read" version... 🔮

Pastelweeper is a fully playable browser game that reinvents the classic Minesweeper. Instead of a frustrating one-hit game over, you get an HP bar, levels that progressively expand the grid, and an inventory system packed with Medkits and Scanners.

But it is not all sunshine and rainbows! The game introduces dynamic “Chaos Events” that randomly spawn ticking time bombs you have to defuse. Built entirely with Vanilla JavaScript, HTML5, and CSS variables, it proves you do not need a heavy engine to make a super fun, polished web game.

A Sweet and Explosive Adventure

Who says logic puzzles have to be boring gray grids? Welcome to Pastelweeper, a strategic evolution of a legendary classic! This project completely transforms the traditional sweeping experience by injecting it with pure chaos, beautiful Kawaii aesthetics, and engaging RPG elements that keep you on the edge of your seat.

Forgiving but Fierce

Instead of a frustrating one-hit game over, Pastelweeper introduces hit points, expandable grid levels, and a dynamic inventory system packed with life-saving Medkits and Scanners. Built entirely with Vanilla JavaScript and CSS Grid, this highly polished web game proves you do not need a heavy engine to deliver a thrilling, high-stakes arcade experience right in your browser!

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: ~ $160 to $1.200 USD
Details
Minimum
Value: $160
Maximum
Value: $1.200

Duration: ~ 1 Day
Details
Hours: 40
Days: 5
Weeks: 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
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: ~ $50 to $370 USD
Details
Minimum
Value: $50
Maximum
Value: $370

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
Value: ~ $20 to $120 USD
Details
Minimum
Value: $20
Maximum
Value: $120

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

Don’t let the numbers scare you, let’s talk!

The Juicy Details!

All treats, no tricks, just the sweet facts! 🍭

Who says logic puzzles have to be boring gray grids? Welcome to Pastelweeper! 🚀 Crafting digital experiences for over 18 years has taught me that even the most established mechanics can benefit from a fresh, vibrant twist. My deep passion for UX design and gamification led me to ask: what if a classic 90s puzzle game had dungeon-crawler elements, loot, and a little bit of beautiful chaos? The result is an experience that feels alive, forgiving but challenging, and wrapped in a deliciously soft mint and magenta aesthetic. Let us get sweeping! ✨

Ready to clear the grid? Here is how you play:

  1. Start the Game: Choose your custom rows, columns, and mine density, then hit START.
  2. Clear the Grid: Left-click tiles to reveal them. The number shows how many mines are adjacent!
  3. Flag the Danger: Right-click to place a 🚩 on suspected mines.
  4. Survive: You have HP. Hitting a mine costs 1 HP. Reach 0, and it is Game Over!
  5. Use Loot: Got lucky with a drop? Use the 📡 Scanner to reveal an area safely, or the 💊 Medkit to restore HP.
  6. Defuse Bombs: If a tile starts flashing red with a timer… flag it before it hits zero! 💥

The visual design leans heavily into the modern “Kawaii” and cozy gaming aesthetics. I wanted it to feel like a playful digital toy rather than a serious military simulator, utilizing a soft color palette to contrast the explosive gameplay.

Mechanically, the “Chaos Events” and time bombs were heavily inspired by the fast-paced mini-games found in titles like WarioWare, where unpredictable, timed challenges suddenly interrupt the core loop, forcing a quick pivot in strategy.

This blend of Cute aesthetics with chaotic Roguelike tension creates a unique juxtaposition that keeps the experience fresh level after level.

  • “A delayed game is eventually good, but a rushed game is forever bad.” – Shigeru Miyamoto
  • “Games are the only force in the known universe that can get people to take actions against their own self-interest.” – Jane McGonigal
  • “The graphic designer’s job is to make the complex clear.” – Paul Rand

Imagine trying to carefully logic your way through a grid, but suddenly a tile starts flashing red with a 10-second countdown. That is the heart of Pastelweeper! It takes the methodical, sometimes tedious pacing of traditional grid-sweeping and injects it with moments of pure, adrenaline-pumping action.

I wanted to design an experience that rewards exploration. By adding an HP system, players are not instantly punished for a single misclick or an unavoidable 50/50 guess. You can take a hit, pop a Medkit, and keep pushing through the levels. This fundamentally shifts the game from a rigid mathematical exercise into a dynamic, engaging adventure that keeps you hitting that yellow smiley face for “just one more round.” 🎮

The spark for this project came from a desire to blend cozy gaming aesthetics with high-stakes mechanics, proving that intense gameplay can exist within a cute, pastel color palette.

The core mechanic of sweeping grids dates back to mainframe games of the 1960s, but it was popularized globally by Microsoft’s inclusion of Minesweeper in Windows 3.1. Originally, its hidden purpose was to secretly teach users how to use a computer mouse.

Today, we do not need to teach mouse basics, but we do need to keep users engaged. This is where Gamification comes into play. By introducing variable rewards like Scanners and Medkits, and escalating difficulty, the game taps into the psychological concept of the “Flow State,” coined by Mihaly Csikszentmihalyi.

Furthermore, incorporating an HP pool draws from Dungeon crawler mechanics, mitigating the “rage-quit” factor. In classic UX, forgiving interfaces lead to higher retention. Applying this to game design means allowing players to make mistakes and recover, turning frustration into determination. 🧠

The Game-Plan!

Plotting a safe course through the scary maze! 🧭

  • Handling recursive grid reveals without causing stack overflows on large grids.
  • Managing multiple ticking bomb intervals and ensuring they clear cleanly on level resets.
  • Designing dynamic CSS Grid layouts that scale gracefully as dungeon levels expand.
  • Utilized an object-oriented state approach to track each cell’s coordinates and DOM elements cleanly.
  • Stored interval IDs in a dedicated array, allowing a simple loop to clear all active timers upon game over or level transitions.
  • Leveraged CSS Custom Properties to bind row and column counts directly to the grid template styles.

This project serves as an interactive portfolio piece demonstrating complex DOM manipulation, state management, and creative UI design. It provides a measurable, engaging way for users to interact with code, showing that frontend architecture can be both highly technical and incredibly fun.

The code robustly handles game state, user inputs, dynamic DOM generation, and custom logic for loot and timers. It intentionally avoids backend databases, keeping everything fast, local, and entirely client-side for immediate gameplay.

  • Google Fonts: For the beautiful, bubbly ‘Nunito’ typeface that gives the UI its friendly vibe.

The Nerd Stuff!

I think we are going to need a bigger boat... ahem, I meant cauldron! ✨

JavaScript, CSS, HTML5

The engine behind Pastelweeper is a tightly woven combination of Vanilla JavaScript and modern CSS. The dungeon grid is generated dynamically based on the configuration state, pushing DOM elements into a 2D array for easy coordinate tracking. Game loop events are handled via JavaScript intervals, while 3D tile effects are powered by CSS box-shadows and transforms.

  • Implementing LocalStorage for saving high scores and max dungeon depths.
  • Adding satisfying WebAudio effects for item pickups and explosions.
  • Introducing new loot types like an “Invincibility Shield” for chaotic moments.
  • Rapidly clicking during a level transition might trigger an event on an old cell before the grid is fully flushed.
  • Occasionally, an item drop animation might overlap visually with a time bomb countdown.
Defuse Now!
Pastelsweeper - 001
Pastelsweeper - 002
Pastelsweeper - 003
Pastelsweeper - 004
Pastelsweeper - 005

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

watchfolio-002

Watchfolio 🎬 My Cinematic Universe

In a world where viewing history is lost to the void, one dashboard emerges to track them all. Prepare to enter your ultimate cinematic universe!
View More!
AbsOrigami - 001

AbsOrigami ⛩️ An Universe in Paper

Step into the dojo of AbsOrigami! Master the ancient art of Origami through a beautifully gamified bento UI. Fold, learn, and earn your black belt today.
View More!
Julibe Pillars - 001

The Pillars 🚀 Behind Crafting Digital Experiences

An interactive audio-visual journey breaking down the Pillars philosophy of Cognitive Clarity, Responsible AI, and Organic Growth.
View More!
Keep Up to Date? Sure, it's cool! No thanks, I'm afraid