Pong vs Computer – Free HTML, CSS & JS Neon Canvas Game

Pong is the original video game archetype, and what separates a forgettable clone from a fun one is feel: a ball that bounces by where it hits, an opponent that is beatable but never boring, and enough juice and variety to make you want one more match. This snippet is a neon canvas Pong with five unlockable CPU levels, power-up orbs, a Web Audio synth, particle effects and a collision system that cannot be tunnelled through at high speed. It uses no libraries and no audio files.

An AI that is beatable on purpose, tuned by level

A paddle that copies ball.y every frame never misses, so it is unbeatable and no fun. Here the CPU computes how far its paddle centre is from a target and moves a fraction of that distance each frame, capped by a top speed: cpuStep = clamp(diff * lv.k, -lv.speed, lv.speed). The target is the ball's y plus an aimErr offset that is re-rolled every time the player returns the ball, so the CPU sometimes aims slightly off. While the ball travels away from it, the CPU drifts back to the middle. The five entries in the LEVELS array (Rookie, Club Player, Pro, Expert, Legend) raise the top speed, the tracking factor and the aim accuracy, and shorten the gap between power-up orbs.

Levels that unlock as you win

Only level 1 is open at the start. Winning a match (first to 7) unlocks the next level and moves the selection to it, the button changes to "Next Level", and losing offers "Retry Level". The highest unlocked level is saved to localStorage inside a try/catch, so the game also runs in sandboxed iframes where storage is blocked, it just does not remember your progress.

Angle-reflection bounce physics and a speed that heats up

bounceOffPaddle() turns the contact position into a rebound angle: rel = (ball.y - paddleY) / paddleH gives a value from 0 at the top edge to 1 at the bottom, and angle = (rel - 0.5) * (Math.PI / 3) maps it to plus or minus 60 degrees. Every hit multiplies the speed by 1.06 up to MAX_SPEED, and the ball's colour moves from cool blue to red as it gets faster, with a fading trail behind it.

Swept collision instead of a simple range check

Each frame the game keeps the ball's previous position and checks whether the ball crossed a paddle's face between the previous and the new position. It then interpolates the y value at the crossing point and tests that against the paddle. This means a fast ball can never skip over a paddle between two frames, which is the classic tunnelling bug of naive Pong code. Movement is scaled by a delta-time factor, so the game runs at the same speed on 60Hz and 120Hz screens.

Power-up orbs

During a long rally an orb appears in the middle of the court. Whoever hit the ball last collects it when the ball touches it. A green orb grows your paddle for 8 seconds, a pink one shrinks the opponent's paddle, and a blue one slows the ball down. Paddles grow and shrink smoothly around their centre, and a glow shows who has an active power-up.

Juice: sound, particles, shake and rally tracking

Paddle hits, wall hits, goals, power-ups and rally milestones every five hits play short sounds made with an OscillatorNode and a GainNode, and the pitch of the hit sound climbs with the rally. Sparks burst from every impact, the screen shakes on hard hits and goals, a rally counter tracks your streak, and the longest rally is saved as your best. Mouse, touch (through pointermove), Arrow keys and W/S all move the paddle, Space or P pauses, and the game pauses itself when the tab is hidden.