Create a polished HTML5 8-Ball Pool game. Split this into however many recommended work items.
The implementation should feel like a professional arcade-quality billiards prototype: clean visuals, precise aiming, satisfying cue interaction, realistic ball motion, and a clear game-state loop. Should allow playing against CPU for now.
Goal
Build the complete source code for an 8-Ball Pool game using Phaser 4. Prefer Matter.js physics for realistic circle-to-circle collisions, friction, and rolling behavior. If Phaser 4 support or project constraints make Matter.js impractical, use the best available Phaser physics approach while preserving the gameplay behavior below.
Game Architecture
Use a clean scene structure:
BootScene: preload or initialize assets.MenuScene: title screen and start action.GameScene: main gameplay.
Canvas size:
1024x576- 16:9 aspect ratio
Keep the source modular, with clear helper functions for table drawing, ball setup, aiming, cue interaction, physics updates, pocket handling, and turn evaluation.
Visual Design
Draw the pool table programmatically if no textures are available.
Table requirements:
- Dark green felt bed:
0x1d5f3a - Dark wooden cushions/borders:
0x4a2e1b - Six pockets:
- Four corners
- Two side centers
- Black circles with subtle inner-shadow styling
Ball rendering:
- Cue ball is white.
- Balls 1-7 are solids.
- Ball 8 is black.
- Balls 9-15 are stripes.
- Balls should look smooth and slightly 3D using highlights, gradients, or specular shine.
- Striped balls should have a clear stripe overlay.
Physics And Movement
Implement realistic billiards-style movement.
Required behavior:
- Elastic circle-to-circle ball collisions using mass and velocity vectors.
- Friction/damping applied every update tick so balls naturally roll to a stop.
- Stop threshold:
- If a ball’s velocity magnitude drops below
0.5, set velocity to zero. - This prevents micro-jitter.
- If a ball’s velocity magnitude drops below
- Pocket detection:
- Every update tick, check distance from each ball to all six pocket centers.
- If
distance < pocketRadius, trigger a pocket animation. - Pocket animation should scale the ball down to
0, fade it out, then remove it from active play.
Aiming And Cue Controls
The cue stick should only appear when all active balls are fully stationary.
Cue behavior:
- Cue stick points directly at the cue ball.
- It rotates smoothly based on the mouse pointer position.
- Draw a dotted aiming guideline extending from the cue ball in the shot direction.
Shot mechanic:
- Player clicks and drags away from the cue ball to pull back the cue.
- Pull-back distance controls shot power.
- Show a visual power meter while aiming.
- On mouse release:
- Animate the cue stick striking forward.
- Convert pull-back distance into an impulse vector.
- Apply that impulse to the cue ball.
Game State Machine
Implement these states:
WAITING_FOR_PLAYERAIMINGCUE_STRIKEBALLS_MOVINGEVALUATING_TURN
Track:
- Current player: Player 1 or Player 2
- Assigned ball type:
- Solids
- Stripes
- Unassigned before first legal pot
- Potted counts
- Current turn outcome
Cue ball scratch:
- If the cue ball is pocketed, respawn it at the kitchen line on the starting side.
- Penalize the active player and pass turn according to a simple MVP rule.
Code Quality Requirements
- Organize code into clean, modular functions.
- Keep gameplay constants centralized.
- Include inline comments for non-obvious physics logic, especially:
- Velocity vector calculations
- Collision response
- Friction/damping
- Shot impulse conversion
- Prioritize playability and polish over exhaustive official 8-ball rule coverage.
- The result should be runnable as a complete game prototype.
Accepted 5 work item(s)