Mega Cube Clash

{Mega Cube Clash} Project Report

1. The Concept

Mega Cube Clash is a 3D arena battle game you can play in the browser. You control a numbered cube on a blue grid floor, chase smaller cubes, absorb their value, grow bigger, and knock out weaker rivals — while staying clear of anything larger than you.

The hook is simple to explain and hard to master:

Chase · Eat · Grow to the goal.

Every level has a score goal (starting at 500, then +250 each stage). You win by reaching that goal before the AI crowd outpaces you. Easy stages teach the loop with soft AI and generous pickups; Hard stages tighten eat rules, spawn elites near your size, and turn equal-value clashes into contested fights.

It started as a "2048 cube arena" idea and evolved into a clearer agar-style identity: numbers on cubes, size = power, risk vs reward every collision. Beginners can cruise Easy levels; experts push for High Hard clears against aggressive bots.

2. The Stack

Runtime Static HTML / CSS / JS Zero build step, instant local play 3D Three.js 0.160 (CDN) Fast arena, rounded cubes, lights, particles UI Custom CSS (Nunito+Fredoka) Arcade HUD, menus, mobile safe areas Audio Web Audio API Procedural SFX + menu theme — no asset pack Save localStorage Campaign unlock / cleared levels Input Keyboard, mouse, joystick Desktop + phone in one build

Files that matter:

index.html — start / levels / HUD / pause / game-over css/style.css — responsive battle UI + touch controls js/game.js — campaign curve, AI, combat, renderer, audio

3. The 1 Day Sprint (+ polish pass)

Morning (Hours 1–3):

• Scaffolded index.html, css/style.css, and js/game.js
• Stood up the Three.js blue arena (floor grid, rim, camera, lighting)
• Player cube + AI cubes with name tags and basic WASD / arrow movement
• First absorb / combat loop and a readable HUD (score, rank, leaderboard)

Afternoon (Hours 4–6):

• Tuned feel: slower movement, size-based slowdown, dampened velocity
• Power-ups (speed / shield), particles, floating KO / boost text
• Menus: start screen, pause, game-over / restart
• Procedural audio (hits, merges, defeats) and mute toggle
• Early mobile joystick so phones could actually play

The Finish Line (Hour 7-8):

• Locked the "playable demo" loop: enter name → play → win/lose → retry
• Visual identity pass on cubes (toy-plastic colors, clear face numbers)
• Direction arrow + name tag readability for the player cube
• Sanity-check that the core fantasy — grow or get eaten — felt fun in a single session

Polish (Aug 10):

• Renamed the product to Mega Cube Clash and aligned menu branding
• 50-level campaign with Easy / Medium / Hard tiers and rising goals
• Progress save via localStorage, level select grid, next-level flow
• Stronger arcade audio + menu theme (tap-to-unlock for browser autoplay)
• Full responsive pass: safe areas, fluid HUD, quality tiers, touch boost/shield buttons
• Hit-feedback smoothing so score pops no longer stuttered the cube mesh

4. The Roadblocks

1. Autoplay audio — Browsers block sound until a user gesture.

Menu music needed an unlock path (pointerdown / tap hint) before anyone could hear the theme.

1. Feel vs speed — First pass movement was too fast; the arena felt unreadable.

Had to cut base speed and add size slowdown so growing still felt powerful, not slippery.

1. Hit / grow jitter — Rebuilding the cube mesh on every small absorb made the number "jump."

Fixed by updating the face texture in place and using a soft punch instead of a shrink-rebuild.

1. UI identity thrash — Cream "2048 home" vs dark arena HUD fought each other.

Settled on a blue battle theme for menus and play so the first screen matches the game world.

1. One build, many devices — Pointer aiming used full window size and broke on mobile chrome.

Had to raycast against the game root rect, add joystick / action buttons, and drop shadow / pixel-ratio on low-end tiers.

1. Campaign depth without content explosion — Fifty unique hand-authored maps wasn't realistic in a sprint.

Solved with a parametric level curve (AI count, aggression, elite chance, eat ratio) instead of bespoke stages.

5. Key Takeaways

• A clear one-line fantasy ("grow to the goal") beats a clever merge rule nobody can explain mid-fight.
• Ship the arena loop first; campaign, juice, and device polish only matter once chase-eat-grow is fun for five minutes.
• Parametric difficulty scales further than unique level assets when you're racing a clock.
• Browser games live or die on input + audio + frame budget — especially on phones.
• Visual feedback (name tag, facing arrow, on-cube toasts) sells ownership of "your" cube more than extra mechanics.

My final thought:

Mega Cube Clash proved that a single-file-engine mindset — one HTML shell, one stylesheet, one Three.js module — can still deliver a full arcade campaign if the core risk/reward loop is honest. The next leap isn't more buttons; it's sharper AI personality and a reason to come back after level 50.