Learn Programming by Creating Games with JavaScript

Lesson 6 - Make Ball Bounce off Paddle

SUMMARY

In this lesson we will add code to make the ball bounce off the paddle.

DISCUSSION

In order to determine if the ball should bounce off the paddle, we need to determine if the ball and paddle overlap. When the two objects overlap, they have collided. Open the page and test it. If you test it sufficiently you will notice that the two objects overlap when:

right > left AND left < right AND bottom > top AND top < bottom

The following example demonstrates collision detection in the x-direction only. Test the code by clicking any key to make the one <div> move.

EXAMPLE - Collision

Font Size: 10pt 12pt View Large Version
Ctrl-C to Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

PRACTICE

1. What is the purpose of the "30" in line 6?

2. How can you modify the code so that div1 will reverse direction when it just touches div2 (without overlapping)?

3. Write code so that div2 is below div1. When the user presses a key, div1 should move downward. When div1 collides with div2, an alert should appear indicating that they have collided.

GAME DEVELOPMENT

1. Modify your game page so that the ball bounces off the paddle. We will simplify the collision algorithm by ending the game if the ball passes the paddle. By making this game simplification, we will make the coding easier.