# KonsolScript:Tutorials:Pong:3 MakingBallBounce

## Making your own Pong

Part 3 of a **Making your own Pong** series.

### Making the Ball Bounce

If you came reading from **Moving the Paddles**, you should be aware that we *might* make another function called **CheckBallMovement**. If so, you guessed it right.

Okay, before we write anything, I would like to let you know how I come to make such codes -- it does not come from anywhere; it is all based to the *needs*.

So let us discuss the *needs* in making the *ball bounce*.

First, unlike the paddles, the ball should be able to move not just either *upwards* and *downwards* but even *leftwards* or *rightwards*. This need requires us to have a variable for the *vertical* movement, as well as the *horizontal* moment.

An additional **Number** variables will be made for it.
```
Var:Number Bx, By;
```

We also need to know, which *direction* is the ball moving for the *AI* to anticipate. 2 **Boolean** variables are declared for this.
```
Var:Boolean TowardsPlayer, TowardsTop;
```

The variable, **TowardsPlayer**, will be utilized to *determine* if the ball is moving *towards the player-paddle*. The variable, **TowardsTop**, if the ball is moving vertically *upwards*.

Now that we know *all we need*, let us start coding.

### Making the Ball Move Vertically

We start coding the code that makes the ball move *vertically*. This will involve **By** and the **Boolean** variable, **TowardsTop**.

As you notice from the code below, I wrote the code inside the (*might-be*) anticipated **CheckBallMovement**.
```
function CheckBallMovement() {
```

```
``` if (TowardsTop EQ true) {
By -= 2;
} else {
By += 2;
}

```
}
```

If we translate the code above, it means "*if the ball direction is upwards, then we subtract value to the vertical value of the ball*".

To make the code work, let us make sure to *call* the function **CheckBallMovement**, from our *main loop* like the one I did to the code below.
```
function main() {
```

```
``` Screen:Show()

while (B1 EQ false) {
Screen:CLS()

DrawPong()

CheckPlayerMovement()

CheckAIMovement()

CheckBallMovement()

Screen:Render()
}

```
}
```

### Making the Ball Move Horizontally

The code for moving the ball *horizontally* is basically the same to the code of moving it *vertically*.
```
function CheckBallMovement() {
```

```
``` if (TowardsTop EQ true) {
By -= 2;
} else {
By += 2;
}
if (TowardsPlayer EQ true) {
Bx -= 2;
} else {
Bx += 2;
}

```
}
```

If we translate the *added* code above, it means that "*if the ball direction is towards the player, then we subtract value to the horizontal value of the ball*". Pretty simple, huh? So are we done?

Technically speaking, we made the ball moved, so I guess we say... well... ..."*No!*" -- *the ball does not bounce off the boundaries*.

### Making the Ball Bounce-Off the Upper and Lower Bounds

So, we want to move the ball but make sure to bounce it off when it hit boundaries. Pretty *simple demand*, but let us see if it would be *simple to code*.

The *upper* boundary has a *vertical value* of **0**. So, if the direction is *upwards*, we want to bounce the ball once it hits a value of **0**. But wait. Remember that the ball has a *radius* of **5**. Meaning, when the ball is drawn vertically a value of **5**, the *upper part* of the ball is hitting the *upper boundary* as well. What we want to do is to adjust the *imaginary* upper boundary to **5** instead of **0**.

The partial code will be as what is written below.
```
//...
```

```
``` if (By LE 5) {
By = 6;
TowardsTop = false;
}

```
I used
```

**LE** (*Less than or Equal to*) **5** to make sure that the ball is in that location to say that it did hit the *upper boundary*. If it hit **5** or *lower*, let us make sure it is in the vertical value of **5** plus **1**px (*indicating the bounce*) by coding "**By = 6;**".

I also changed the value of **TowardsTop** to **false** to tell that the ball has *bounced-off* from the *upper boundary*.

To check if the ball has hit the *lower boundary*, we have to settle to the bottom-most value of the *viewing screen* which is **240**. But again, we have to consider the *radius* of the ball. So, let us move to **235**.

The other partial code will be as what is written below.
```
//...
```

```
``` if (By GE 235) {
By = 234;
TowardsTop = true;
}

```
If it hit
```

**235** or *higher*, let us make sure it is in the vertical value of **235** minus **1**px (*indicating the bounce*) by coding "**By = 234;**". And changed the value of **TowardsTop** to **true** to tell that the ball has *bounced-off* from the *lower boundary*, making it move *upwards* again.

The whole code for checking the upper and lower boundaries will be like the one written below.
```
function CheckBallMovement() {
```

```
``` /* ... */
if (By LE 5) {
By = 6;
TowardsTop = false;
} else if (By GE 235) {
By = 234;
TowardsTop = true;
}

```
}
```

### Making the Ball Bounce-Off the Left-most and Right-most Bounds

The code to this will just be the same with bouncing it off from *upper and lower* bounds.

We just have to determine if the *horizontal value* of the ball is less than the *left-most* horizontal value which is **0**. But, once again, let us consider the *radius* of the ball, which is **5**.

So the partial code will be the one coded below.
```
//...
```

```
``` if (Bx LE 5) {
Bx = 6;
TowardsPlayer = false;
}

```
We make the value of
```

**TowardsPlayer** to **false** to tell that the ball is moving *towards the opponent*.

To determine if the *horizontal value* of the ball is more than the *right-most* horizontal value of the *viewing screen*, which is **320' (or **

*315*because of the

*radius*of the ball), let us check the value of

**Bx**.

So the other partial code will be the one coded below.
```
//...
```

```
``` if (Bx GE 315) {
Bx = 314;
TowardsPlayer = true;
}

```
We make the value of
```

**TowardsPlayer** to **true** to tell that the ball is now moving *towards player*, again.

## Last Words

I guess my *last words* for this tutorial will be, once again, focused on *managing codes*.

Look at the code below. Does it look *familiar*?
```
if (TowardsTop EQ true) { By -= 2; } else { By += 2; }
if (TowardsPlayer EQ true) { Bx -= 2; } else { Bx += 2; }
```

That is what I do with the code that I believe is, *somewhat*, final. This will lessen the consumed length (*or should I say, height*) of the code.

So, there. I leave you with the **CheckBallMovement** function.
```
function CheckBallMovement() {
```

```
``` if (TowardsTop EQ true) { By -= 2; } else { By += 2; }
if (TowardsPlayer EQ true) { Bx -= 2; } else { Bx += 2; }

if (By LE 5) {
By = 6;
TowardsTop = false;
} else if (By GE 235) {
By = 234;
TowardsTop = true;
}
if (Bx LE 5) {
Bx = 6;
TowardsPlayer = false;
} else if (Bx GE 315) {
Bx = 314;
TowardsPlayer = true;
}

```
}
```

One more, do not think that coding a Pong is really that easy. It became easy because we tried to get all the necessary information about the game. Any game will be easy to code, once we have all the information.

~creek23~