Mini Golf
A touch-friendly golf demo needs aiming, scoring, and hole flow; I built a Canvas/JavaScript five-hole course with drag-to-aim shots, power calculation, collision response, hazards, scorecard state, and local best-score persistence.
- Status
- Archived experiment / live demo
- Last updated
- May 2026
- Controls
- Drag from the ball to aim and set power, then release to shoot.
- Keyboard
- Space or Enter starts the round, P or Escape pauses and resumes, R restarts the current hole, and N advances after a clear.
- Touch
- Touch-drag aims and shoots; Prev, Next, Pause, and Restart buttons remain visible for hole navigation.
- Accessibility
- Live status, progress, lie, and power readouts describe the current run, while the canvas remains a visual playfield.
Ready
Mini Golf ready.
Keyboard and touch controls
Keyboard shortcuts
- Space / EnterStart the round when the menu is visible.
- P / EscPause or resume the round.
- RRestart the current hole.
- NAdvance to the next hole after a clear.
Touch and pointer controls
- Drag from ballAim and set shot power, then release to shoot.
- Prev / NextMove between available holes.
- Pause / RestartUse the on-screen buttons below the course.
Touch-drag from the ball to aim, then release to shoot.
Course data, shot physics, and score state.
Main state includes the current hole, ball position and velocity, aim vector, stroke count, surface, scorecard, and saved best score. The canvas loop advances physics only while the ball is moving, so static aiming and score UI stay cheap. Collision logic checks walls, hazards, cup distance, and surface zones; scoring increments strokes per shot, records each hole, and persists the run best in localStorage. Pointer input captures drag start, move, and release for aiming and power, while keyboard shortcuts start, restart, and advance. Touch uses the same pointer path plus visible Prev, Next, and Restart controls. The main lesson was separating hole data from physics code, which made new layouts possible without rewriting collision behavior.
Five-hole course logic, shot physics, and score feedback.
- Created five course layouts with par values, walls, hazard zones, surface types, cup targets, and hole progression.
- Implemented drag aiming, shot-power calculation, ball motion, wall/hazard/cup collision checks, and stroke counting.
- Built scorecard UI, best-score persistence, pause/restart/fullscreen controls, touch hints, and hole navigation.
The game uses standard Canvas/browser APIs and familiar mini-golf rules; the layouts, state handling, and UI wiring are custom code.
Archived experiment with a clear course loop.
Already solid includes drag aiming, course progression, collision checks, hazards, scorecards, best-score persistence, and touch input. Demo-only areas include informal physics tuning and limited accessibility alternatives. Hardening would add physics edge-case tests, mobile browser QA, save reset/migration behavior, and nonvisual course feedback.
No-build game page with course config in JavaScript.
Hosted/run location: GitHub Pages serves mini-golf.html, mini-golf.css, and mini-golf.js. Environment/config: no environment variables are required; course layouts, par values, hazards, and scoring rules are static JavaScript config. External APIs/services: none beyond Canvas, Pointer Events, Fullscreen, and LocalStorage for best runs. Local development: run python -m http.server 8000 and open /mini-golf.html. Security: no secrets, accounts, or networked user data are involved.