8Ball Pool HTML5
Fully functional 8-ball pool game with HTML5 Canvas and realistic physics. Play against AI or a 2nd player. Open source with 24+ GitHub stars.
Problem
Browser-based pool games typically rely on Flash or heavy JavaScript libraries, resulting in poor performance and large bundle sizes. The goal was to build a fully playable 8-ball pool game using only HTML5 Canvas and vanilla JavaScript with realistic physics.
Approach
I built a custom 2D physics engine from scratch handling ball-to-ball collisions, ball-to-cushion reflections, and pocket detection using vector math and impulse-based resolution. The game loop runs at 60fps with requestAnimationFrame, and the cue stick mechanics use angle clamping and power interpolation for natural feel.
Key Engineering Decisions
Custom physics over a library
Using Matter.js or Planck.js would have added 50-100KB to the bundle. A hand-rolled 2D physics engine kept everything lightweight and gave full control over collision response tuning for pool-specific behavior.
Canvas over DOM rendering
DOM-based rendering couldn't handle the real-time redrawing of 16 balls with accurate shadows and textures at 60fps. Canvas provided direct pixel control and GPU-accelerated compositing.
State machine for game flow
The game uses a finite state machine (idle, aiming, shooting, resolving, pocketed, fouled) to manage turn logic, fouls, and win conditions cleanly without tangled conditional chains.
Results
24
GitHub Stars
60fps
Render Performance
AI / 2P
Game Modes
Technologies