This time, it is going to be a lot more dynamic. We are approaching a full game!

Bouncing all over the place

Length 20 minutes

Level Complete beginner

Prerequisites

In the previous workshop, you made a tally counter. You learned to use variables of type int. We also looked at if statements and conditions to interact with the player. Finaly, we used a function to draw rectangles to the screen.

So in summary, you made a rectangle move by pressing buttons. So we are not far from having a Pong paddle ;)But a Pong game without a ball is not very fun. This is why we will now code a bouncing ball.

For our bouncing ball, we would need a new variable called positionX, which, like you guessed, stores the X (or horizontal) position of our ball. While we are at it, let's add another variable called speedX which keeps track of the speed of our ball along the X axis.

Now, look at this code: it makes the ball move forward on it's own!

#include 

int positionX = 32;
int speedX = 1;

void setup() {
  gb.begin();

}

void loop() {
  while (!gb.update());
  gb.display.clear();

  positionX = positionX + speedX;

  gb.display.print("positionX: ");
  gb.display.print(positionX);
  gb.display.print("\nspeedX: ");
  gb.display.print(speedX);

  gb.display.fillRect(positionX, 32, 4, 4);
}

Hey! the ball just flies off the screen! Well actually that's expected, as we did not use conditions to stop it. So it just keeps going, even off screen. In that case, how could we keep the ball inside of our screen? Well, let's take a look at this algorithm.

If the ball reaches the right edge
Then go left

If the ball reaches the left edge
Then go right

So there are a couple of things we must look at:

  • How do we make it so that the ball goes towards the left?
  • How do we detect the edge of the screen?

Now, before I give you the solution, try to figure it out. Here are a few hints:

Think about what speedX does. Play around with its value.

Coordinates on the screen range from 0 to gb.display.width(). A value of 0 coresponds to the leftmost pixel, and gb.display.width() is the rightmost pixel.

If you are still stuck, here's what we did:

#include 

int positionX = 32;
int speedX = 1;

void setup() {
  gb.begin();

}

void loop() {
  while (!gb.update());
  gb.display.clear();

  positionX = positionX + speedX;

  // If the ball reaches the left side of the screen
  if(positionX < 0){
    // Go right
    speedX = 1;
  }

  // If the ball reaches the right side of the screen
  if(positionX > gb.display.width()){
    // Go left
    speedX = -1;
  }

  gb.display.print("positionX: ");
  gb.display.print(positionX);
  gb.display.print("\nspeedX: ");
  gb.display.print(speedX);

  gb.display.fillRect(positionX, 32, 4, 4);
}

It's your turn!

If the ball only moves left and right, this is not going to be a very exiting Pong match :P Why not create positionY et speedY so that the ball can now move across the screen. But just like the left-right movement, you will need to detect the edge (with gb.display.height()) and keep the ball inside the screen. Go ahead and give it a go!

Make us proud on social networks with #gamebuino #bouncingball , we go through them all the time;)

Next Workshop

Solution Example

If you are running out of ideas, or need a little guidance, take a look at what we wrote :)

#include 

int positionX = 32;
int speedX = 2;
int positionY = 32;
int speedY = 1;
int ballSize = 8;

void setup() {
  gb.begin();

}

void loop() {
  while (!gb.update());
  gb.display.clear();

  // Update horizontal position
  positionX = positionX + speedX;

  // If the ball reaches the left side of the screen
  if(positionX < 0){
    // Go right
    speedX = 1;
  }

  // If the ball reaches the right side of the screen
  if(positionX > gb.display.width() - ballSize){
    // Go left
    speedX = -1;
  }

  // Update vertical position
  positionY = positionY + speedY;

  // If the ball reaches the top side of the screen
  if(positionY < 0){
    // Go down
    speedY = 1;
  }

  // If the ball reaches the bottom side of the screen
  if(positionY > gb.display.height() - ballSize){
    // Go up
    speedY = -1;
  }

  gb.display.setColor(BROWN);
  gb.display.print("positionX: ");
  gb.display.print(positionX);
  gb.display.print("\nspeedX: ");
  gb.display.print(speedX);

  gb.display.print("\npositionY: ");
  gb.display.print(positionY);
  gb.display.print("\nspeedY: ");
  gb.display.print(speedY);

  gb.display.setColor(WHITE);
  gb.display.fillRect(positionX, positionY, ballSize, ballSize);
}

Last comments

qpd00z

NEW 3 weeks ago

@Adamko: You're right, but it would have been nice if you had concurrently given a solution. So, I do.

Fail: The ball is moving out of screen, when it reaches the right side of the the screen. 

Solution: We have to subtract the size of the ball. (like in case of bottom touch)

Bugfix: 

Change

// If the ball reaches the right side of the screen
if(positionX > gb.display.width()){

into

// If the ball reaches the right side of the screen
if(positionX > gb.display.width() - ballSize){

and everything works fine.

Greetz & have fun everybody 

qpd00z

Adamko

NEW 2 months ago

vos avez fais une faute dans l'exemple de solution.

Nux

NEW 2 months ago

soltk soltk


note: I am not sure if you are totaly new in programing or experienced but don't know how to do with Gamebuino if you are experienced you can go to step 2.

In my opinion, the best is to start to learn C++.


So here what i personally think is the best to start on gamebuino.

Step 1: Learn C++ stuff, the best site i have found for it is this one -> http://www.learncpp.com/

I am restarting to learn c++ on this website because i was feeling to have to much gab in my knowledge

Step 2: If this is not already done follow this tutorial to get your Arduino IDE and be able to upload your sofware on it.
-> https://gamebuino.com/creations/gamebuino-meta-setup

Step 2.A: To discover new gamebuino function or understand how to use them, use the library reference here
-> https://gamebuino.com/fr/academy/reference

You can find this reference link at the bottom of the page under "ACADEMY"
--------------------------------------------------

You can do stuff on Gamebuino super early when you are learning c++ a programe saying "Hello" if  you press A and "Good-bye" if you press B.
Ok this is not the game of the year but at this point you are able interect with a potential user (aka player) and you can already do some small fun game with some imagination.
And at this moment every new knowledge learn from Step 1 will open new door.

Edit: And once again if you have any issue at once of those step you can ask us on discord or on the website. I will be glad to help you if i can.
Edit2: Sorry for the long post

You must be logged in in order to post a message on the forum

Log in

Quality seal