BOUNCING BALL 1

In our previous project, Game Loops, we discussed the general format of a game loop, and we implemented a game loop that moved a dot across the LED Matrix display.  For the next few projects, we're going to modify that game loop to incorporate some more features; these will help explain how we can use the LED Matrix display for some more interesting games that we'll introduce in a bit. 

For this project, we're going to modify the game loop to provide some testing of the location of the dot to determine when it comes to the edge of the display.  When it does, we will reverse direction of the dot so that it never falls off the screen.

Tracking Direction

Here's a reminder of what our current code looks like:

You'll notice that on Line 13, we increment (increase) x by 1 to move the dot to the right on the display.  This works great...until we get to the edge of the screen and we don't want to go any further.  At that point, we're going to want the dot to move in the OPPOSITE direction (in this case, to the left).  To do that, instead of incrementing x by 1, we're going to want to decrement (decrease) x by 1.  

In other words, to go to the right, we increase x by 1.  And to go to the left, we decrease x by 1 -- which is the same as increasing x by -1.  

We can do this by creating a variable (let's call it "direction"), setting that variable to either 1 or -1 (depending on the direction we want the dot to go) and then increasing x by that variable.  When direction is set to 1, the ball will move right; when direction is set to -1, the ball will move left.

This will require two changes to our code.  First, Line 13 will change to:

Next, because the variable direction hasn't yet been set to anything (which would break our program), we need to initialize that variable before we jump into our loop.  Since we want the ball to move right at first, we can initally set the variable equal to 1.  We can do that by adding the following line to our initialization code:

If you now run this code, you'll see that things work exactly the way they did in the last project -- the dot moves to the right and then disappears from the screen.  We're now tracking the dots direction, but we haven't done anything to test for when it gets to the edge of the display or to change direction when that happens.

Testing Location

When the program starts, the first position of the dot is x = 1.  Each time through the loop, we increment x by 1.  So, after the first loop, the position of the dot moves to x = 2.  After the next loop, the dot moves to x = 3.  And so on...

We know that the LED Matrix display is 8 dots wide, so when x = 9, it will disappear from the screen.  In order to keep the dot from disappearing from the screen, we need to know when x = 8 (or more than 8) and we need to reverse the direction of movement before the next time through the loop.  We can check the value of x (which is the same as checking the position of the dot) using an IF statement, and if we determine that we're at the edge of the screen, we can change the direction of the dot by switching direction from 1 to -1:


If you insert this code at any point after x += direction and run the program, you'll see that the ball gets to the right of the display and then -- before disappearing -- reverses direction.

But, you'll probably notice that, after heading back to where it started, it falls off the other side of the screen! 

Whoops.  We checked to ensure that the ball didn't fall off the screen when x got too big (too far right), but we didn't check for when x got too small (too far left).  Luckily, this is pretty easy to add to our code...we can just update the IF statement we just wrote as follows:

This checks whether x is too big (greater than or equal to 8) or whether x is too small (less than or equal to 1) -- in either of those cases, we need to change direction. Notice that we also changed the line handling the direction as well -- this reverses the direction from  whatever it previously was.

Give it a try.  You should now see the dot boucing back and forth on the display.

Here is the final code:

prev| next