MatrixGrid - Phaser 2D Game

💡 Inspiration

The inspiration behind MatrixGrid came from a desire to build a fast-paced, brain-teasing puzzle that tests a player's spatial recognition and logical thinking under pressure. We wanted to combine a retro cyber-grid aesthetic with modern, fluid, and responsive gameplay mechanics using a powerful 2D game framework.

🎮 What it does

MatrixGrid challenges players to match a customizable user-controlled grid (the "Play Matrix") to a randomly generated reference grid (the "Target Config Spec").

• Players toggle the states and colors of blocks by clicking them.
• Every interaction subtracts from the Remaining Allowed Moves.
• It features dynamic difficulty levels: Easy (3x3), Medium (5x5), and Hard (7x7).
• It includes a live-action speed run timer, dynamic win/lose overlay modules, an algorithmic sound synthesizer, and a persistent high score streak tracker using browser storage.

🛠️ How we built it

• Game Engine: Built using the Phaser 3 framework to handle canvas rendering, input interactions, and state updates.
• Frontend UI: Structured with clean HTML5 and styled with a glowing responsive cyber-neon dark theme using CSS3.
• Audio Architecture: Implemented via the native browser Web Audio API to procedurally synthesize custom interactive audio clips (button clicks, win chimes, game-over buzzes) using raw oscillator code, entirely bypassing external asset latency.

🧠 Challenges we ran into

One of our biggest hurdles was calculating dynamic block scaling and coordinates uniformly for varying dimensions ($3 \times 3$ up to $7 \times 7$) inside a fixed canvas region ($500 \times 480$).

To solve this responsively without hardcoding positions, we implemented an exact algebraic bounding box distribution formula:

$$BoxSize = \frac{AreaWidth - (Padding \times (GridSize - 1))}{GridSize}$$

Another challenge was preventing edge-case instances where the randomized target grid accidentally generated identical to the player's initial starting empty state. We mitigated this by writing a strict JSON pre-validation deep check before launching the level graphics.

🏅 Accomplishments that we're proud of

• Delivering a fully functional, complete gameplay loop with robust win/lose states and multiple difficulty structures.
• Crafting a completely asset-free sound effects system running entirely on continuous web oscillators.
• Creating a modern, distraction-free UI that loads instantaneously.

📚 What we learned

We gained hands-on experience handling multi-dimensional array comparisons in JavaScript, linking HTML DOM interface states smoothly with a separate web canvas engine like Phaser, and implementing local state permanence across browser sessions via localStorage.

🔮 What's next for MatrixGrid

• Introducing specialized tile types like "locked blocks" or multi-state color shifts to increase puzzle complexity.
• Adding responsive canvas particle burst animations when rows or entire grids match successfully.
• Connecting a cloud-hosted leaderboard API to allow real-time global player competition.

Built With

• css3
• html5
• javascript
• phaser.js
• webaudioapi