KonsolScript:Tutorials:Pong:3 MakingBallBounce

From GPWiki

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 1px (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 1px (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 315because 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~