Math Ninja AR Game

Role

Act as an Expert Creative Web Developer and Game Physics Specialist.

Objective

Create "Math Ninja AR", a fully functional, single-file HTML5 AR game. The user solves math problems by slicing floating bubbles with their finger, tracked via webcam.

Technical Constraints

Single File: All HTML, CSS (Tailwind), and JavaScript must be in one .html file.

No External Assets: No images or audio files. Use programmatic generation.

Libraries (Use these exact CDNs):

Tailwind CSS: https://cdn.tailwindcss.com

MediaPipe Camera Utils: https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js

MediaPipe Hands: https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js

Core Systems

1. Visuals & Rendering

Canvas: Use HTML5 Canvas (2D Context) for the game layer.

Video Feed: Display the webcam feed in the background, mirrored (so moving right moves right on screen).

Finger Tracking: Track the Index Finger Tip. Draw a glowing, fading trail following the finger coordinates to simulate a sword/saber.

Particles: Generate colorful particle explosions when a bubble is sliced.

2. Audio (Web Audio API)

Create a class AudioSynth to generate sounds synthetically:

Swoosh: White noise with a low-pass filter sweep (played on finger movement velocity).

Correct: A pleasant high-pitched chime (Sine/Triangle wave arpeggio).

Wrong/Damage: A low buzz or dissonance (Sawtooth wave).

3. Game Loop & Math Logic

Math Generation: Generate multiplication tables (e.g., 4x5, 6x7).

Spawning: Spawn "NumberBubbles" from the bottom of the screen.

1 Bubble contains the correct answer.

2-3 Bubbles contain distractor answers.

Scoring:

Slice Correct: +10 Score, play Chime, spawn explosion.

Slice Wrong: -1 Life, play Buzz.

Miss (Correct bubble leaves screen): -1 Life.

Game Over: When lives reach 0, show a restart screen overlay.

Physics Engine (CRITICAL IMPLEMENTATION)

The game feel is the highest priority. You must implement the following "Variable Gravity" and "Arc Rule" logic exactly.

A. Variable Gravity (Progression)

Start with "Moon Gravity" and get heavier as the player scores.

// Re-calculate this every frame or when score changes
const baseGravity = 0.08; // Adjust for 60fps
const gravity = baseGravity * Math.pow(1 + score / 150, 1.2);


B. The "Arc" Rule (Target Height)

Bubbles must always reach a playable height, regardless of how strong gravity is.

Step 1: Pick a random target peak height for the bubble (e.g., between 60% and 85% of screen height).

Step 2: Calculate the required launch velocity (vy) using the physics formula for kinetic/potential energy.

// Formula to ensure bubble hits exactly targetY before falling
// velocityY = -sqrt(2 * gravity * distance_to_travel)
const distanceToTravel = canvas.height - targetY;
const launchVelocity = -Math.sqrt(2 * gravity * distanceToTravel);


Deliverable

Produce the complete, bug-free HTML file. Ensure the MediaPipe onResults loop drives the game logic efficiently. Handle camera permission errors gracefully with a UI message.