Catch the Ball — Original Yenra game programming practice kit
Guide: https://yenra.com/game-programming/
Open index.html in a browser with JavaScript and Canvas enabled. No build step or
external libraries. Press Start. Focus the court and hold left/right arrows, or
use the direction buttons with keyboard or pointer. Reset returns to a paused game.
Files: model.js (state/rules), play.js (input/timing/drawing), index.html (page).
Logical world: 640 x 360 pixels; ball radius 8; paddle width 80 at y=330.
Ball velocity starts at 110 px/s horizontally, 140 px/s vertically.
Paddle speed: 320 px/s. Simulation step: 1/120 second. Long frame delay cap: 0.05 s.
Try changing 320 in model.js to 160: paddle takes twice as long to travel.
Try changing the ball velocities modestly. This example's collision logic handles
the top of a horizontal paddle at these modest speeds, not arbitrary geometry.
Check: ball bounces off left/right/top, caught ball increases catches, miss resets
ball, pause stops motion, switching tabs pauses, Reset clears score and misses.
Source: https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame
