Lesson 5

Your First Game

You are close to having enough knowledge to put together your first game. In this lesson, you will not only learn two more useful tools but also we will practice cleaning up and organizing our code. As our code gets longer and longer, its important to keep track of where everything is.

The first thing we should do is say what the game is going to be like. You should have a clear idea of what you want in your mind so you have something to work toward.

Game Description

  • In this game, you will move a white square around the screen.

  • There will be a black square.

  • When you touch the white square with the black square you get a point.

Add A Black Square

First let's make the target. We will use the drawRect() function. Add this in your loop().

arduboy.drawRect(targetx, targety, 5, 5, WHITE);

You will need to create targetx and targety variables to control the location of this target. Set them both to = 0.

Note that drawRect() is different than the fillRect() that we used to create the player.

Random()

We want our target to start in a different position every game. We are going to need to use the random() function to do this.

In order for the program to pick random numbers we need to help it make sure those numbers are ... random. Add this line to your setup()

arduboy.initRandomSeed();

OK, now the program is ready to pick some random numbers for us that will help us move the target to a new spot every game.

Let's look at the random() function that we will use:

random(first number,second number);

random() tells the program to pick a number between the two numbers inside. Weirdly, the first number is inclusive and the second number is exclusive.

Look at the examples to understand better.

When we start the game we want the variables targetx and targety to get random positions. Let's use the random() function to do this in setup()

targetx = random(0,124);

targety = random(0,60);

Where did these numbers come from? Remember our screen is 128x64.

If you add 5 of each of our numbers and remember the second number is exclusive you can figure out why we picked these numbers.

Upload this code. Restart your device a few times and note how the target starts in a new location every time. Sweet!

Creating Hit-Boxes

Now we want to detect when our player hits the target. To do this we are going to need some help from our friend Rect.

Rect draws invisible rectangles wherever we want. We can test to see if these invisible rectangles are touching. I know it sounds weird, but it really is the easiest for now.

Here is what it looks like:

Rect nameOfInvisibleRectangle(X, Y, width, height);

nameOfInvisibleRectangle can be anything we want to use to identify the shape. We want to make two Rect: one named player and one named target.

Rect player(playerx, playery, 5, 5);

Rect target(targetx, targety, 5, 5);

If we set these Rect X and Y positions to the same X and Y variables we use to draw the the shapes then we can make sure these invisible hit-boxes are always in the same position as the shapes.

It is also a good practice to put the Rect code right next to where we draw the boxes. This way we can find both if we need to.

Collision

Now that we have drawn our hit-boxes using Rect, let's make them work.

When the hit boxes touch, we want two things to happen:

  1. the target goes to a new random position

  2. the score goes up 1

We can do both of these at the same time with one if statement.

We will use the arduboy.collide() function as our if statement's condition.

if (arduboy.collide(player, target)) {

}

player and target inside the collide() function are the names of the two Rect we made. If those two touch, then we will have met this if statement's condition and it will fire the code inside the { } brackets.

Let's make the target jump to a new random location:

targetx = random(0,124);

targety = random(0,60);

Where have you see these to lines of code before? What did they do? Copy them into our if statement.

Now let's add into the if statement the code to make score go up by 1:

score = score + 1;

Easy right? OK push your code over and play your first game.

Clean It Up

It is important to have your code be readable so that you can find what you need to quickly. Here are a few tips.

  1. Add a bunch of long lines of slashes (//////////////////////////////////) to form lines that your eye can see. This can help you create labeled sections

  2. Group similar parts of code together. For example, have your fillRect() and Rect() functions close to each other or group similar variables.

  3. Leave comments to help you remember what code does.

  4. Remove any dead code. Do you still need the A Button to teleport the player?

  5. Add some comments at the very top that says what the title of the game is and who made it.

Challenges!

Regular Challenge 1: Label your score by putting a "score:" in front of the number

Regular Challenge 2: Add another target to get

Hard Challenge 1: Add a time limit

Hard Challenge 2: Add an obstacle or enemy to avoid

Super Hard Challenge: Add an win/end condition and way to restart

The Complete Code

//First Coding Game

//by Captain


#include <Arduboy2.h>

Arduboy2 arduboy;


int playerx = 59;

int playery = 27;


int targetx = 0;

int targety = 0;


int score = 0;


void setup() {

// put your setup code here, to run once:

arduboy.begin();


arduboy.initRandomSeed(); //Set Up Random Number Generator


targetx = random(0,124);

targety = random(0,60);

arduboy.setFrameRate(60); //Set Game Frame Rate

arduboy.clear();

}


void loop() {

// put your main code here, to run repeatedly:

//Prevent the Arduboy from running too fast

if (!arduboy.nextFrame()) {

return;

}

arduboy.clear();



///////////////////////////////////////Move Player

if (arduboy.pressed(LEFT_BUTTON) && playerx > 0) {

playerx = playerx - 1;

}


if (arduboy.pressed(RIGHT_BUTTON) && playerx < 123) {

playerx = playerx + 1;

}


if (arduboy.pressed(UP_BUTTON) && playery > 0) {

playery = playery - 1;

}


if (arduboy.pressed(DOWN_BUTTON) && playery < 59) {

playery = playery + 1;

}



///////////////////////////////////////Draw Player

arduboy.fillRect(playerx, playery, 5, 5, WHITE);

Rect player(playerx, playery, 5, 5);


///////////////////////////////////////Draw Target

arduboy.drawRect(targetx, targety, 5, 5, WHITE);

Rect target(targetx, targety, 5, 5);



///////////////////////////////////////Score

arduboy.setCursor(0, 55);

arduboy.print(score);


if (arduboy.collide(player, target)) {

targetx = random(0,124);

targety = random(0,60);

score = score + 1;

}


arduboy.display();

}