Pong vs Computer — Free HTML CSS JS Snippet

Pong is the original video game archetype, and its two mechanics — realistic ball bounce physics and a computer opponent that feels fair rather than either trivial or unbeatable — are exactly what separate a convincing Pong clone from a flat, boring one. This snippet implements both properly: the ball's bounce angle genuinely depends on where it strikes each paddle, and the computer paddle tracks the ball with a deliberately imperfect, rate-limited speed so a human player can actually win.

Why a perfectly-tracking AI paddle is not fun

A naive Pong AI simply sets cpuY = ball.y every frame, producing a paddle that never misses — mathematically unbeatable and immediately obvious as artificial. This snippet's update() function instead computes diff = ball.y - cpuCenter (how far the CPU paddle's centre is from the ball) and applies only a fraction of that distance each frame: cpuStep = clamp(diff * 0.09, -CPU_MAX_SPEED, CPU_MAX_SPEED). The 0.09 proportional factor means the paddle always chases the ball but never snaps to it instantly, and CPU_MAX_SPEED = 4.2 caps how many pixels it can move in a single frame even when the ball is far away. The result is an opponent that plays a genuinely strong game on straightforward shots but can be beaten with sharp angle changes and fast cross-court hits that outrun its top speed — exactly the behaviour of a satisfying, beatable AI.

Angle-reflection bounce physics, not a flat mirror bounce

Real Pong's signature feel comes from the paddle acting like a curved surface rather than a flat wall: hitting the ball near the paddle's edge sends it off at a steep angle, while hitting it dead centre sends it nearly straight back. bounceOffPaddle(paddleY) computes relativeHit = (ball.y - paddleY) / PADDLE_H, a value from 0 (top of paddle) to 1 (bottom of paddle), then maps it to an angle: angle = (clampedRel - 0.5) * (Math.PI / 3), giving a range of plus or minus 60 degrees from horizontal. The ball's new velocity is then recomputed from that angle and a speed that increases slightly on every hit — speed = Math.min(9, Math.hypot(ball.vx, ball.vy) * 1.06) — capped at 9 so rallies gradually intensify without becoming physically uncontrollable. This is real angle-reflection physics driven by contact position, not a simple vx *= -1 mirror bounce.

Dual control scheme and canvas coordinate mapping

The player's paddle responds to both mouse movement and Arrow Up/Down keys. Mouse control reads e.clientY, subtracts the canvas's bounding-rect offset, and multiplies by H / rect.height to correctly map the mouse's screen-pixel position to the canvas's internal coordinate space — this scale correction matters because the canvas element is styled at width: 100% in CSS while its internal drawing buffer stays fixed at 480x320, so without the scale factor the paddle would track incorrectly on any screen where the canvas is rendered larger or smaller than its native resolution. Arrow key control simply nudges playerY by a fixed 6px per frame while the key is held, tracked through a keys object updated on keydown/keyup.

Wall bounces, scoring, and match state

The ball reflects off the top and bottom walls with a simple vy *= -1, since walls (unlike paddles) are flat and don't need angle variation. Paddle collision is detected with an axis-aligned range check on both x position and y overlap with the paddle's height before applying the angle-reflection bounce. When the ball passes fully off either the left or right edge, the corresponding score increments, resetPositions() re-centres both paddles and calls serveBall() to launch a new ball toward a random side, and the whole match resolves once either score reaches WIN_SCORE = 7, at which point endMatch() stops the requestAnimationFrame loop and shows a win/loss overlay with a "Play Again" button.