Color Matching Game

A browser-based puzzle where you slide dots around a grid to make colour chains.

Project Overview

Built to experiment with path-finding and smooth Canvas animations, the game recreates the ‘lines & balls’ classic in a modern browser-friendly package.

Technical Details

• React + TypeScript front-end
• Canvas API for 60 fps board rendering
• A* path-finding to validate moves
• Local-storage state persistence
• Vite + Vitest test harness

Challenges & Solutions

Keeping path-finding fast on a large board without blocking the UI required a web-worker fallback and memoised search grids.

Key Achievements

• Maintains 60 fps on mid-range mobiles
• 100 % Lighthouse PWA score
• Featured on /r/webdev ‘Project Showcase’