Build a fully playable Gravity Painter game as a single React component (.jsx) using Matter.js for physics.

Tech Stack

React with hooks (useState, useEffect, useRef, useCallback)
Matter.js from CDN: https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js — import via useEffect script injection or assume it's available as window.Matter
All rendering done on a <canvas> ref — no external CSS files, all styles inline or via a <style> tag injected in the component
Single file, default export, no required props

Game Phases (managed via useState)

Drawing Phase

Physics Simulation

On phase change to 'simulating', convert drawnShapes into Matter.js static bodies and add to the world
Ball spawns at a fixed top-center position as a dynamic Matter.Bodies.circle
Use Matter.Runner and Matter.Events.on(engine, 'afterUpdate') inside a useEffect to drive the render loop
Each material maps to Matter.js body options:
- Normal → { restitution: 0.4, friction: 0.5 }
- Bouncy → { restitution: 0.95, friction: 0.1 }
- Sticky → { restitution: 0.1, friction: 0.9 }
- Slippery → { restitution: 0.3, friction: 0 }
Cleanup Matter.js engine and runner in useEffect return function to prevent memory leaks

Level Data

Define 6 levels as a plain JS array of objects outside the component:
js
const LEVELS = [ { id: 1, name: 'First Drop', parInk: 200, goal: {x: 0.8, y: 0.85}, hazards: [], gravityY: 1 }, // ... ]
Each level defines: goal position (as fraction of canvas size), hazard positions/types, gravity scale, wind force, par ink value, and collectible star positions
Current level index stored in state, increments on win

Canvas Rendering (useEffect watching phase + engine updates)

HUD (JSX overlay, not canvas)

Level name and number
Ink budget as an animated <div> bar
Star count ⭐ 0 / 3
Phase-appropriate action button: "Drop Ball" during drawing, "Retry" and "Next Level" on result screen
Result card rendered as JSX overlay on top of canvas when phase is 'result'

Result Phase

Triggered when: ball reaches goal zone (win) or ball exits canvas bounds (lose)
Show a centered JSX card with: win/lose status, stars collected, ink used vs par, two buttons
On "Retry" — reset Matter.js world, clear drawn shapes, go back to 'drawing' phase
On "Next Level" — load next level config, reset world and shapes, go to 'drawing'

Polish

Ball trail: store last 20 positions in a ref, draw as fading circles each frame
Goal zone: animated pulsing ring drawn on canvas each frame using a frameCount ref
Particle burst on goal reached: store particles in a ref, update and draw them each frame
Hazard spikes: drawn as triangles on canvas, destroy ball on collision via Matter.js collision events
Smooth 60fps loop driven by requestAnimationFrame stored in a ref and cancelled on cleanup
Dark background (#0f0f1a), neon accent palette: ball = #60d0ff, goal = #40ff90, hazard = #ff4060

Explore

Popular Tools