Build a complete Golf game from scratch using TypeScript and HTML5 Canvas.
Difficulty: Intermediate Episodes: 6 Time: ~1h 30min total Prerequisites: Basketball
A 2D mini-golf game with multiple holes. Aim and shoot the ball across terrain with slopes, walls, and obstacles. Get the ball in the hole in as few strokes as possible.
- Ball rolling physics with friction and damping
- Surface collision and wall bouncing
- Aim-and-power stroke input
- Terrain and obstacle layout per hole
- Stroke counting and par scoring
| # | Title | Time | What You'll Build |
|---|---|---|---|
| 1 | Project Setup & Course Drawing | ~15min | Draw a green, hole, and ball on the canvas |
| 2 | Aiming & Stroke Input | ~15min | Drag to aim the shot direction and power |
| 3 | Ball Physics & Friction | ~15min | Ball rolls with velocity, slows with friction |
| 4 | Walls & Obstacles | ~15min | Bounce off walls and around obstacles |
| 5 | Hole Detection & Scoring | ~15min | Detect ball-in-hole, count strokes, show par |
| 6 | Multiple Holes & Polish | ~15min | Design several holes, track total score, course complete screen |
The complete source code is at src/games/golf/.
Continue to Lava Floor — where you'll learn platforming with hazard zones and timed jumps →