A physics puzzle game built with HTML5 Canvas, TypeScript, and Matter.js — fire a cannon ball through pegs and platforms into scoring buckets.
Cannon Drop is a Peggle-inspired physics puzzle game. You aim a cannon by clicking and dragging (with a live trajectory preview and power meter), then release to fire a glowing ball that arcs through a field of pegs, bouncing off platforms, ricocheting through pipes, and funnelling into scoring buckets at the bottom.
There are three peg types: orange pegs worth 100 points that must all be cleared to win the level, blue pegs worth 25 points, and rare green pegs worth 500 points that also grant an extra ball. A tiered combo multiplier rewards hitting many pegs in a single shot, and the landing bucket adds its own multiplier. When you hit the last orange peg, the game triggers slow-motion for a cinematic finish.
Five hand-designed levels introduce new obstacle types progressively — pegs, platforms, pipes, bumpers, funnels, and a moving jackpot bucket in the final level. There's a 1-3 star rating system per level.
The architecture is clean: all game logic lives in a pure TypeScript engine module with zero DOM dependencies, fully testable under Node.js with 155 passing tests. The browser file handles rendering, Matter.js physics simulation, Web Audio API sounds, and input. The engine exposes a documented API for scoring, launch velocity calculation, and game state management.