The Pong is a legendary game.

I found an excellent Pong version on Codepen. And then got into tweaking the code, bit by bit.

The change log so far:

• Spacebar key pauses the game, freezing the ball. Space again to play!
• added a Slam! sound effect, whenever the ball hits the club, thanks jQuery for such easy audio support. OpenGameArt has a wonderful library of all kinds of things that you can use in games. Check it out!

The club

club is a rectangular shape (a block). It’s made with CSS.

Collision algorithm basics

We would like to check “when does the edge of the ball touch a club?”.
When that happens, the ball will bounce. I’ll go into the bounce maths later. But for now; let’s find out a collision.

Bounce math: reflecting the ball

Bounce is made by reversing the sign (multiply with -1) of the X
component of speed.

Why only negate the X component?

X is the horizontal speed of the ball. -5 means that each round the ball would advance 5 pixels left, and 5 would mean the same speed towards right.

The clubs prevent ball only in the left-right direction; the play field top and bottom bounds prevent the ball in vertical direction. So, a collision of the ball with clubs, we’ll be only conserned with X speed component. This makes a mirror bounce: if the ball comes in at an angle 45 degrees, it also leaves at 45 degrees. Keeping the Y (vertical) speed untouched is crucial.

Collision detection in code is just about doing a bit of calculus with
coordinates solely. Think of being blindfolded. We as humans have intuitive understanding of seeing when sometimes collides. But code cannot see it intuitively. We need to tell the computer exactly what it means “to collide”.

The answer is in coordinates.

Coordinates represent the graphics on-screen. If the club is 20 pixels wide, it’ll occupy screen coordinates from X to (X+20-1).

To summarize a ball-to-club collision comparison, we need:

• 3 comparisons
• JavaScript can short-circuit the boolean ‘&&’ thus first failure will already determine the fate
• ball positions X and Y
• club positions X and Y

Above 3 comparisons explained

1. ballPositionX < 70
2. ballPositionY + 20 > playerOneY
3. ballPositionY < playerOneY + 100

Side track: what about Inbuilt collision detection?

Wouldn’t it be just neat to have a simple way to detect when CSS objects collide?

Well. CSS wasn’t originally made for games. It might be. With collision detectioun you would essentially just check a boolean value:

if (twoCollide(theBatOne, ball)) { … //then make reflection }

It would be much more elegant code than writing 3 comparisons.

Web browsers don’t have in-built mechanisms for collision detection. like it could magically tell the program when collisions are touching on the edges, or partially already overlapping (curiously enough, this sort of mechanism has been available in early computers, such as Commodore 64 whose graphics chip also did ‘sprites’, and the collision checks would be automatically done in RAM. Commodore set a bit to indicate which sprites were overlapping).