# Or Operator

We already talked about using the `and` operator. It’s a way we connect two comparisons inside of an `if`statement. To illustrate it, look at this code:

``````if( a == 5 and b > 20 ) {
c = 0;
}``````

`c` will only be set to `0` if `a` is equal to `5` and `b` is greater than `20`.

There are some other operators that we can use instead of the `and` operator. One of them is the `or` operator. The `or` operator can be used to check if one of a few comparisons are true. Check out this code:

``````if( a == 5 or b > 20 ) {
c = 20;
}``````

In the above example, `c` will be set to `20` if either `a` is equal to `5` or `b` is greater than `20`.

Keep the or operator in mind. We’ll use it soon!

# Modulo Operation

Do you know the answer to 12 ÷ 6? The answer is 2! That was easy, right? Okay, what about 23 ÷ 5? The answer is either 4.6 or 4 with a remainder of 3. Which is the correct answer??

If you asked the Arduboy what 23 ÷ 5 was, the answer would be 4! That seems wrong! Where did the remainder go?? We need give the Arduboy another instruction to figure out the remainder.

Remember when I said that computers have to be very precise when given instructions? When computers were young, people tried to come up with the best way to do devision. There were a lot of ideas, but the best way seemed to be introducing the modulo operator.

To get the remainer, we ask the Arduboy for the answer of 23 % 5. It will output 3! If you asked 12 % 6, you would get 0!

Why is this important? Well, we can use this to figure out more complex math, but there’s something special in game development that we can use this for.

Anytime you use two numbers with the modulo operator, the answer will be somewhere between 0 and the second number. a % b will never be a number more than b.

Keep this in mind and we’ll do something really fun with it later!

Okay, so, the computer player is way too good. We’ll never be able to win. One thing we can do to stop it from being so good is to only allow it to move some of the time. When will we allow it to move its paddle? Well, for starters, we could let it move its paddle only whenever the ball is close to the right side of the screen!

Find these lines of code:

``````if(bally < computery) {
computery = computery - 1;
}
if(bally + ballsize > computery + paddleheight) {
computery = computery + 1;
}``````

These are the lines of code that move the computer’s paddle. Let’s put an `if` statement around them that checks if the ball’s horizontal position (`ballx`) is close to the right-side of the screen. I put 115.

``````if(ballx > 115) {
if(bally < computery) {
computery = computery - 1;
}
if(bally + ballsize > computery + paddleheight) {
computery = computery + 1;
}
}``````

Test it out and think about it for a second. Notice how the computer’s paddle doesn’t always move like it used it? It’s a little more precise right now, but only moves whenever the ball is close to scoring.

But, we need to add more variance… More randomness… We need to make it so that the game is different every time you play. I KNOW! Let’s let the computer paddle move when the ball is close or let the computer paddle move when the computer picks a random number.

Back in Part 5 of this series, I showed you how to pick a random number. I’m going to explain to you how that works, now.

First of all, we need to know about the `rand()` function. This will give us a random number, but the number can really be anything. It can be 2,000, or 9 or -200. There’s really no control over it. HOWEVER, we can use the modulo operator that we learned about earlier!! Take a look at this code and think about what this will output!!

``rand() % 20``

Well, we’ll randomly pick a number, then divide it by 20, then only have the remainder left. It doesn’t matter what number is randomly picked, if we just looked at the remainder, the remainder will be some number between 0 and 20. Which number? I don’t know. Isn’t that awesome?!

That little line of code will essentially pick a random number between 0 and 20!

Let’s adjust that `if` statement from above!

``if(ballx > 115 or rand() % 20 == 1) {``

This means that if `ballx` is greater than 115, or a randomly-picked number is equal to 1, then we move the comptuer’s paddle. Basically, the computer’s paddle will randomly move 1/20th of the time.

Here’s the full code so far!

``````//Jonathan Holmes (crait)
//December 7th, 2016
//A simple Pong clone

#include <Arduboy.h>
Arduboy arduboy;

//Variables declared here
int gamestate = 0;
int justpressed = 0;
int ballx = 62;
int bally = 0;
int ballsize = 4;
int ballright = 1;
int balldown = 1;
int playerx = 0;
int playery = 0;
int computerx = 127 - paddlewidth;
int computery = 0;

void setup() {
arduboy.begin();
//Seed the random number generator
srand(7/8);
//Set the game to 60 frames per second
arduboy.setFrameRate(60);
arduboy.clear();
}

void loop() {
//Prevent the Arduboy from running too fast
if(!arduboy.nextFrame()) {
return;
}
arduboy.clear();
//Game code here
switch( gamestate ) {
case 0:
//Title screen
arduboy.setCursor(0, 0);
arduboy.print("Title Screen");
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
gamestate = 1;
}
break;
case 1:
//Gameplay screen
arduboy.setCursor(0, 0);
arduboy.print("Gameplay");
//Draw the ball
arduboy.fillRect(ballx, bally, ballsize, ballsize, WHITE);
//Move the ball right
if(ballright == 1) {
ballx = ballx + 1;
}
//Move the ball left
if(ballright == -1) {
ballx = ballx - 1;
}
//Reflect the ball off of the left side of the screen
if(ballx == 0) {
ballright = 1;
}
//Reflect the ball off of the right side of the screen
if(ballx + ballsize == 127) {
ballright = -1;
}
//Move the ball down
if(balldown == 1) {
bally = bally + 1;
}
//Move the ball up
if(balldown == -1) {
bally = bally - 1;
}
//Reflect the ball off of the top of the screen
if(bally == 0) {
balldown = 1;
}
//Reflect the ball off of the bottom of the screen
if(bally + ballsize == 63) {
balldown = -1;
}
//If the player presses Up and the paddle is not touching the top of the screen, move the paddle up
if(arduboy.pressed(UP_BUTTON) and playery > 0) {
playery = playery - 1;
}
//If the player presses down and the paddle is not touching the bottom of the screen, move the paddle down
if(arduboy.pressed(DOWN_BUTTON) and playery + paddleheight < 63) {
playery = playery + 1;
}
//If the ball is close to the edge of the screen or if a random number out of 20 is equal to 1
if(ballx > 115 or rand() % 20 == 1) {
//If the ball is higher than the computer's paddle, move the computer's paddle up
if(bally < computery) {
computery = computery - 1;
}
//If the bottom of the ball is lower than the bottom of the computer's paddle, move the comptuer's paddle down
if(bally + ballsize > computery + paddleheight) {
computery = computery + 1;
}
}

//If the ball makes contact with the player's paddle, bounce it back to the right
if(ballx == playerx + paddlewidth and playery < bally + ballsize and playery + paddleheight > bally) {
ballright = 1;
}
//If the ball makes contact with the computer's paddle, bounce it back to the left
if(ballx + ballsize == computerx and computery < bally + ballsize and computery + paddleheight > bally) {
ballright = -1;
}
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
gamestate = 2;
}
break;
case 2:
//Win screen
arduboy.setCursor(0, 0);
arduboy.print("Win Screen");
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
gamestate = 3;
}
break;
case 3:
//Game over screen
arduboy.setCursor(0, 0);
arduboy.print("Game Over Screen");
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
gamestate = 0;
}
break;
}
//Check if the button is being held down
if(arduboy.notPressed(A_BUTTON)) {
justpressed = 0;
}
arduboy.display();
}``````

# 8. Scoring

Since we’re going to introduce scoring, we need a way for the ball to actually be scored. This means we need to remove some of our old bouncing code.

``````if(ballx == 0) {
ballright = 1;
}
if(ballx + ballsize == 127) {
ballright = -1;
}``````

Find those lines and remove them. This way, the ball will continue to move beyond the screen. In fact, we’ll check to see if the ball has moved off of the screen in order to give points!

Feel free to test the code out once you remove that code.

To keep track of the scores, let’s declare some variables at the top of the sketch.

``````int playerscore = 0;
int computerscore = 0;``````

Now, look for the code in `case 1` that displayed the text, “Gameplay.” Instead of just displaying that text, let’s modify it to display the player’s and computer’s scores.

``````arduboy.setCursor(20, 0);
arduboy.print(playerscore);

arduboy.setCursor(101, 0);
arduboy.print(computerscore);``````

Next, we need a way to actually score! Since the code now allows for the ball to move off of the screen, let’s check if it’s off the screen and if it is, then give someone a point, and then move it back into the middle of the screen.

Here’s how we can check if the ball is off of the screen.

``````if(ballx < -10) {

}
if(ballx > 130) {

}``````

To change the points, and put it back into the middle of the screen, we simply change the appropriate variables…

``````if(ballx < -10) {
ballx = 63;
computerscore = computerscore + 1;
}
if(ballx > 130) {
ballx = 63;
playerscore = playerscore + 1;
}``````

I really suggest testing the game out, so far. Here’s the code that I have:

``````//Jonathan Holmes (crait)
//December 7th, 2016
//A simple Pong clone

#include <Arduboy.h>
Arduboy arduboy;

//Variables declared here
int gamestate = 0;
int justpressed = 0;
int ballx = 62;
int bally = 0;
int ballsize = 4;
int ballright = 1;
int balldown = 1;
int playerx = 0;
int playery = 0;
int computerx = 127 - paddlewidth;
int computery = 0;
int playerscore = 0;
int computerscore = 0;

void setup() {
arduboy.begin();
//Seed the random number generator
srand(7/8);
//Set the game to 60 frames per second
arduboy.setFrameRate(60);
arduboy.clear();
}

void loop() {
//Prevent the Arduboy from running too fast
if(!arduboy.nextFrame()) {
return;
}
arduboy.clear();
//Game code here
switch( gamestate ) {
case 0:
//Title screen
arduboy.setCursor(0, 0);
arduboy.print("Title Screen");
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
gamestate = 1;
}
break;
case 1:
//Gameplay screen
//Display the player's score
arduboy.setCursor(20, 0);
arduboy.print(playerscore);
//Display the computer's score
arduboy.setCursor(101, 0);
arduboy.print(computerscore);
//Draw the ball
arduboy.fillRect(ballx, bally, ballsize, ballsize, WHITE);
//Move the ball right
if(ballright == 1) {
ballx = ballx + 1;
}
//Move the ball left
if(ballright == -1) {
ballx = ballx - 1;
}
//Move the ball down
if(balldown == 1) {
bally = bally + 1;
}
//Move the ball up
if(balldown == -1) {
bally = bally - 1;
}
//Reflect the ball off of the top of the screen
if(bally == 0) {
balldown = 1;
}
//Reflect the ball off of the bottom of the screen
if(bally + ballsize == 63) {
balldown = -1;
}
//If the player presses Up and the paddle is not touching the top of the screen, move the paddle up
if(arduboy.pressed(UP_BUTTON) and playery > 0) {
playery = playery - 1;
}
//If the player presses down and the paddle is not touching the bottom of the screen, move the paddle down
if(arduboy.pressed(DOWN_BUTTON) and playery + paddleheight < 63) {
playery = playery + 1;
}
//If the ball is close to the edge of the screen or if a random number out of 20 is equal to 1
if(ballx > 115 or rand() % 20 == 1) {
//If the ball is higher than the computer's paddle, move the computer's paddle up
if(bally < computery) {
computery = computery - 1;
}
//If the bottom of the ball is lower than the bottom of the computer's paddle, move the comptuer's paddle down
if(bally + ballsize > computery + paddleheight) {
computery = computery + 1;
}
}
//If the ball moves off of the screen to the left...
if(ballx < -10) {
//Move the ball back to the middle of the screen
ballx = 63;
//Give the computer a point
computerscore = computerscore + 1;
}
//If the ball moves off of the screen to the right....
if(ballx > 130) {
//Move the ball back to the middle of the screen
ballx = 63;
//Give the player a point
playerscore = playerscore + 1;
}

//If the ball makes contact with the player's paddle, bounce it back to the right
if(ballx == playerx + paddlewidth and playery < bally + ballsize and playery + paddleheight > bally) {
ballright = 1;
}
//If the ball makes contact with the computer's paddle, bounce it back to the left
if(ballx + ballsize == computerx and computery < bally + ballsize and computery + paddleheight > bally) {
ballright = -1;
}
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
gamestate = 2;
}
break;
case 2:
//Win screen
arduboy.setCursor(0, 0);
arduboy.print("Win Screen");
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
gamestate = 3;
}
break;
case 3:
//Game over screen
arduboy.setCursor(0, 0);
arduboy.print("Game Over Screen");
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
gamestate = 0;
}
break;
}
//Check if the button is being held down
if(arduboy.notPressed(A_BUTTON)) {
justpressed = 0;
}
arduboy.display();
}``````

Awesome, huh? It’s pretty much a finished game at this point! We just need to clean it up, some!

One thing we need to do is check if someone wins! Let’s do a check to see if someone has 5 points. If they do, then change the `gamestate` variable to the appropriate value.

``````if(playerscore == 5) {
gamestate = 2;
}
if(computerscore == 5) {
gamestate = 3;
}``````

Hmm… Maybe we should change the code inside of `case 2` for pushing the A button. Instead of taking you to `gamestate = 3`, maybe we should use `gamestate = 0` so that it takes you to the title screen of the game. Why would we want to show the win screen, then game over screen right afterwards, right?

Here’s the completed code so far:

``````//Jonathan Holmes (crait)
//December 7th, 2016
//A simple Pong clone

#include <Arduboy.h>
Arduboy arduboy;

//Variables declared here
int gamestate = 0;
int justpressed = 0;
int ballx = 62;
int bally = 0;
int ballsize = 4;
int ballright = 1;
int balldown = 1;
int playerx = 0;
int playery = 0;
int computerx = 127 - paddlewidth;
int computery = 0;
int playerscore = 0;
int computerscore = 0;

void setup() {
arduboy.begin();
//Seed the random number generator
srand(7/8);
//Set the game to 60 frames per second
arduboy.setFrameRate(60);
arduboy.clear();
}

void loop() {
//Prevent the Arduboy from running too fast
if(!arduboy.nextFrame()) {
return;
}
arduboy.clear();
//Game code here
switch( gamestate ) {
case 0:
//Title screen
arduboy.setCursor(0, 0);
arduboy.print("Title Screen");
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
gamestate = 1;
}
break;
case 1:
//Gameplay screen
//Display the player's score
arduboy.setCursor(20, 0);
arduboy.print(playerscore);
//Display the computer's score
arduboy.setCursor(101, 0);
arduboy.print(computerscore);
//Draw the ball
arduboy.fillRect(ballx, bally, ballsize, ballsize, WHITE);
//Move the ball right
if(ballright == 1) {
ballx = ballx + 1;
}
//Move the ball left
if(ballright == -1) {
ballx = ballx - 1;
}
//Move the ball down
if(balldown == 1) {
bally = bally + 1;
}
//Move the ball up
if(balldown == -1) {
bally = bally - 1;
}
//Reflect the ball off of the top of the screen
if(bally == 0) {
balldown = 1;
}
//Reflect the ball off of the bottom of the screen
if(bally + ballsize == 63) {
balldown = -1;
}
//If the player presses Up and the paddle is not touching the top of the screen, move the paddle up
if(arduboy.pressed(UP_BUTTON) and playery > 0) {
playery = playery - 1;
}
//If the player presses down and the paddle is not touching the bottom of the screen, move the paddle down
if(arduboy.pressed(DOWN_BUTTON) and playery + paddleheight < 63) {
playery = playery + 1;
}
//If the ball is close to the edge of the screen or if a random number out of 20 is equal to 1
if(ballx > 115 or rand() % 20 == 1) {
//If the ball is higher than the computer's paddle, move the computer's paddle up
if(bally < computery) {
computery = computery - 1;
}
//If the bottom of the ball is lower than the bottom of the computer's paddle, move the comptuer's paddle down
if(bally + ballsize > computery + paddleheight) {
computery = computery + 1;
}
}
//If the ball moves off of the screen to the left...
if(ballx < -10) {
//Move the ball back to the middle of the screen
ballx = 63;
//Give the computer a point
computerscore = computerscore + 1;
}
//If the ball moves off of the screen to the right....
if(ballx > 130) {
//Move the ball back to the middle of the screen
ballx = 63;
//Give the player a point
playerscore = playerscore + 1;
}
//Check if the player wins
if(playerscore == 5) {
gamestate = 2;
}
//Check if the computer wins
if(computerscore == 5) {
gamestate = 3;
}

//If the ball makes contact with the player's paddle, bounce it back to the right
if(ballx == playerx + paddlewidth and playery < bally + ballsize and playery + paddleheight > bally) {
ballright = 1;
}
//If the ball makes contact with the computer's paddle, bounce it back to the left
if(ballx + ballsize == computerx and computery < bally + ballsize and computery + paddleheight > bally) {
ballright = -1;
}
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
gamestate = 2;
}
break;
case 2:
//Win screen
arduboy.setCursor(0, 0);
arduboy.print("Win Screen");
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
gamestate = 0;
}
break;
case 3:
//Game over screen
arduboy.setCursor(0, 0);
arduboy.print("Game Over Screen");
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
gamestate = 0;
}
break;
}
//Check if the button is being held down
if(arduboy.notPressed(A_BUTTON)) {
justpressed = 0;
}
arduboy.display();
}``````

# 9. Reset Function

If you tested this out, you’re going to notice that once you win and try to play again, you won’t really be able to. The reason this happens is that the Arduboy remembers the score from the last match! It starts the new match of Pong, checks the scores, and realizes someone has already won, then shows you either the win screen or game over screen.

What we need to do is reset the game’s variables… `ballx``playerscore`, and `computerscore`.

Scroll all the way down to `case 2` and `case 3`. Inside of both of them, there’s a check to see if we push the A button. This is a great place to put the code to reset our variables since pushing A is supposed to reset the game to the very beginning.

So, inside of the button checks of `case 2` and `case 3`, put this code:

``````ballx = 63;
playerscore = 0;
computerscore = 0;``````

Actually! I got an idea! Instead of writing the same code multiple times, I should teach you about writing functions to save you time!

You already kinda know what functions are, right? They’re instructions that the computer follows. One example of this is `arduboy.clear()`, which will erase everything on the screen!

Well, one cool thing about programming is that you can write your own functions! It’s really helpful! Sometimes, you’ll have code that you want to use over and over again, but maybe you don’t want to type over and over again…

Scroll all the way up… After you declare your variables, let’s declare a function.  We’ll call it `resetgame()`. Type this out:

``````void resetgame() {

}``````

Inside of the braces, we’ll be able to put the instructions that are contained within the `resetgame()` function. Let’s update it with the code we used a moment ago!

``````void resetgame() {
ballx = 63;
playerscore = 0;
computerscore = 0;
}``````

There we go! Any time we want to run those instructions, instead of typing out all 3 of those lines, we can save time by typing `resetgame()` instead!

Back down near the bottom, add the `resetgame()` function where you change `gamestate` to 0!

If you got confused, here’s the full code!

``````//Jonathan Holmes (crait)
//December 7th, 2016
//A simple Pong clone

#include <Arduboy.h>
Arduboy arduboy;

//Variables declared here
int gamestate = 0;
int justpressed = 0;
int ballx = 62;
int bally = 0;
int ballsize = 4;
int ballright = 1;
int balldown = 1;
int playerx = 0;
int playery = 0;
int computerx = 127 - paddlewidth;
int computery = 0;
int playerscore = 0;
int computerscore = 0;

void resetgame() {
ballx = 63;
playerscore = 0;
computerscore = 0;
}

void setup() {
arduboy.begin();
//Seed the random number generator
srand(7/8);
//Set the game to 60 frames per second
arduboy.setFrameRate(60);
arduboy.clear();
}

void loop() {
//Prevent the Arduboy from running too fast
if(!arduboy.nextFrame()) {
return;
}
arduboy.clear();
//Game code here
switch( gamestate ) {
case 0:
//Title screen
arduboy.setCursor(0, 0);
arduboy.print("Title Screen");
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
gamestate = 1;
}
break;
case 1:
//Gameplay screen
//Display the player's score
arduboy.setCursor(20, 0);
arduboy.print(playerscore);
//Display the computer's score
arduboy.setCursor(101, 0);
arduboy.print(computerscore);
//Draw the ball
arduboy.fillRect(ballx, bally, ballsize, ballsize, WHITE);
//Move the ball right
if(ballright == 1) {
ballx = ballx + 1;
}
//Move the ball left
if(ballright == -1) {
ballx = ballx - 1;
}
//Move the ball down
if(balldown == 1) {
bally = bally + 1;
}
//Move the ball up
if(balldown == -1) {
bally = bally - 1;
}
//Reflect the ball off of the top of the screen
if(bally == 0) {
balldown = 1;
}
//Reflect the ball off of the bottom of the screen
if(bally + ballsize == 63) {
balldown = -1;
}
//If the player presses Up and the paddle is not touching the top of the screen, move the paddle up
if(arduboy.pressed(UP_BUTTON) and playery > 0) {
playery = playery - 1;
}
//If the player presses down and the paddle is not touching the bottom of the screen, move the paddle down
if(arduboy.pressed(DOWN_BUTTON) and playery + paddleheight < 63) {
playery = playery + 1;
}
//If the ball is close to the edge of the screen or if a random number out of 20 is equal to 1
if(ballx > 115 or rand() % 20 == 1) {
//If the ball is higher than the computer's paddle, move the computer's paddle up
if(bally < computery) {
computery = computery - 1;
}
//If the bottom of the ball is lower than the bottom of the computer's paddle, move the comptuer's paddle down
if(bally + ballsize > computery + paddleheight) {
computery = computery + 1;
}
}
//If the ball moves off of the screen to the left...
if(ballx < -10) {
//Move the ball back to the middle of the screen
ballx = 63;
//Give the computer a point
computerscore = computerscore + 1;
}
//If the ball moves off of the screen to the right....
if(ballx > 130) {
//Move the ball back to the middle of the screen
ballx = 63;
//Give the player a point
playerscore = playerscore + 1;
}
//Check if the player wins
if(playerscore == 5) {
gamestate = 2;
}
//Check if the computer wins
if(computerscore == 5) {
gamestate = 3;
}

//If the ball makes contact with the player's paddle, bounce it back to the right
if(ballx == playerx + paddlewidth and playery < bally + ballsize and playery + paddleheight > bally) {
ballright = 1;
}
//If the ball makes contact with the computer's paddle, bounce it back to the left
if(ballx + ballsize == computerx and computery < bally + ballsize and computery + paddleheight > bally) {
ballright = -1;
}
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
gamestate = 2;
}
break;
case 2:
//Win screen
arduboy.setCursor(0, 0);
arduboy.print("Win Screen");
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
resetgame();
gamestate = 0;
}
break;
case 3:
//Game over screen
arduboy.setCursor(0, 0);
arduboy.print("Game Over Screen");
//Change the gamestate
if(arduboy.pressed(A_BUTTON) and justpressed == 0) {
justpressed = 1;
resetgame();
gamestate = 0;
}
break;
}
//Check if the button is being held down
if(arduboy.notPressed(A_BUTTON)) {
justpressed = 0;
}
arduboy.display();
}``````

# Wow!

Give yourself a pat on the back! Good job with this one! It was a long tutorial, but if you made it this far, you really deserve some kind of prize!  You are definitely ready to start experimenting and making your own game!

# Next Tutorial

The next tutorial will be a bit shorter. I’ll teach you some cool stuff that I purposely skipped before. A lot more features that will make programming a little easier for you. We’ll use that stuff to upgrade this Pong game to have more features, too!

This tutorial is copied and abridged from the original by Jonathan Holmes.

# Credits

I wrote this tutorial in order to give back to the programming community that taught me to get into it about 10 years ago. If you’d like to follow me on Twitter, please do so at http://www.twitter.com/crait34 . I’d greatly appreciate that.

# Make Your Own Arduboy Game – Graphics!

Previous parts of this series: Part 1Part 2Part 3Part 4, and Part 5

In this tutorial, I’m going to show you how to make a game demo where you can move a sprite around a screen that has a tiled background. I’ll also teach you some more basic programming fundamentals.

# Starting Code

Let’s use this code to start our program. Open the Arduino IDE, start a new project, and make sure the code looks like this:

``````//Jonathan Holmes (crait)
//November 1st, 2016
//Moving Character Demo
#include <Arduboy.h>
Arduboy arduboy;
void setup() {
arduboy.begin();
arduboy.clear();
}
void loop() {
arduboy.clear();

arduboy.display();
}``````

# Starting Images

This image will be your background image. We’re going to tile it across the entire Arduboy screen.

This image will be your player sprite, which is the image that represents your character. You’ll move this face around your screen on the Arduboy.

# Convert Images

Remember how I said that you can store data and variables in several formats? Remember, one format that we used before for numbers was `int`. Well, to store images, we actually want to convert them into raw data that we can store them in byte arrays. Don’t worry too much about what that means, just know it’s different than an `int` and can hold a different amount of data.

I’ve seen some people on this forum say that they convert images to raw data by hand, but luckily, I created an online tool that will do it for us called ToChars. Open up http://www.crait.net/tochars/615 in a new tab and follow these instructions for each image.

#### 3) Set Size

For the background image, set the height and width to both be 8 pixels. For the player sprite, set them to be 16 pixels.

#### 5) Grab Data

Here’s the raw data for background image:

``0x84, 0x20, 0x9, 0x00, 0x24, 0x00, 0x10, 0x80, ``

Here’s the raw data for the player sprite:

``0xfe, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0x1, 0xc1, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0xfe, 0x7f, 0x80, 0x9c, 0xbc, 0xb0, 0xb0, 0xb2, 0xb2, 0xb3, 0xb0, 0xb0, 0xb0, 0xbc, 0x9c, 0x80, 0x7f,``

Hold onto these for a second and I’ll teach you where to put them.

Alright, I kinda left out some information about initializing variables. So far, I’ve had you initialize variables at the top of the sketch, right under the `Arduboy arduboy;` line. But, it’s important to know that you can actually initialize them pretty much anywhere. We’ll do that later on, so I don’t want it to surprise you.

I want to teach you a shortcut, though. When we’ve been initializing variables, we have been doing them in the following format:

``````int counter;
counter = 5;``````

This is valid, but there’s a shortcut that you can take. You can actually set a value to a variable at the same time you initialize it.

``int counter = 5;``

Cool, huh? You can also do this with constants.

# Constants

constant is like a variable in the sense that you can have it store data that you can also initialize. The only difference is that the data can’t be changed. It saves memory to store data in constants instead of variables if you aren’t going going to change the data that it holds. We’ll do that with our image data since we won’t change the images at all.

To create a constant, you use the `const` keyword in front of the initialization.

``````int counter = 5;
const int height = 5;``````

Since you can’t change the data inside of a constant, `height` cannot be changed or given a new value. If you were to use the following code, you would get an error and the code will not work.

``height = 12;``

# Storing Images

Whew! That was a lot to tell you real quick, but let’s move on to storing the raw image data into byte arrays. Where you normally initialize variables, put the following code:

``````const unsigned char background[] PROGMEM  = {
0x84, 0x20, 0x9, 0x00, 0x24, 0x00, 0x10, 0x80,
};
const unsigned char player[] PROGMEM  = {
0xfe, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0x1, 0xc1, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0xfe, 0x7f, 0x80, 0x9c, 0xbc, 0xb0, 0xb0, 0xb2, 0xb2, 0xb3, 0xb0, 0xb0, 0xb0, 0xbc, 0x9c, 0x80, 0x7f,
};``````

To summarize this code, we converted 2 images to 2 groups of characters. One is named `background` and the other is named `player`. Let’s break this code down a little and go word-by-word.

• `const`: We already know that we are creating a variable that cannot be changed.
• `unsigned`: This means that we cannot use negative values. Just ignore this for a while.
• `char`: The way we store byte data is by putting it into a `char`, which stands for character. This is the kind of variable that we are creating instead of using an `int` like the last tutorial.
• `background`: Like all variables, we need to give these two character arrays names. The top one is called `background` and the bottom one is called `player`.
• `[]`: The brackets that you see here means that we’re creating an array. An array is a group of variables. We’re creating groups of `char` variables. We can call them character arrays.
• `=`: Like in the shortcut that I explained above, when you initialize a variable, you can assign a value to it at the same time. We can do this with arrays. We’ll actually assign the characters directly into the array.
• `{ }`: Anything inside of the braces is what we’re actually putting inside of the array.
• `0x84, 0x20,...`: This is the data that we got from the ToChars site. It’s an image stored in multiple bytes/characters. Each character is separated by a comma. ToChars converted the images to characters. Get it?

Your game’s code should look like this:

``````//Jonathan Holmes (crait)
//November 1st, 2016
//Moving Character Demo
#include <Arduboy.h>
Arduboy arduboy;
const unsigned char background[] PROGMEM  = {
0x84, 0x20, 0x9, 0x00, 0x24, 0x00, 0x10, 0x80,
};
const unsigned char player[] PROGMEM  = {
0xfe, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0x1, 0xc1, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0xfe, 0x7f, 0x80, 0x9c, 0xbc, 0xb0, 0xb0, 0xb2, 0xb2, 0xb3, 0xb0, 0xb0, 0xb0, 0xbc, 0x9c, 0x80, 0x7f,
};
void setup() {
arduboy.begin();
arduboy.clear();
}
void loop() {
arduboy.clear();
arduboy.display();
}``````

# Parameters

I can’t wait to show you how to draw the above images to the Arduboy screen! But I can’t just yet!  I need to tell you about a function’s parameters! Remember that a function is an instruction for the computer. Sometimes, they look like this:

``arduboy.clear();``

That clears the Arduboy’s screen. It’s a function that is easy to understand. Here’s another:

``arduboy.print(randomnumber);``

This is from the last tutorial. The `randomnumber` is a variable that we put into the function. We told the Arduboy what to print. That’s called a parameter. And in fact, functions can have multiple parameters. We already saw one earlier that did this in the last tutorial, too!

``arduboy.setCursor(0, 0);``

The `arduboy.setCursor()` function requires two parameters that are separated by a comma.

The function to draw an image to the Arduboy’s screen has a lot more parameters that you need to use. This is actually pretty common.

# Drawing Images

So, we want to draw an image to the Arduboy screen, finally! Let’s start by drawing the player sprite that we called `player`. Inside of the `loop()` area, after we clear the screen, let’s add this line of code:

``arduboy.drawBitmap(5, 10, player, 16, 16, WHITE);``
• The first two parameters are `5` and `10`. These numbers represent the X and Y location that the image will be drawn to. Changing these numbers will change where the image appears.
• The next parameter that’s given is the image that we want to draw, which is `player`.
• The next two parameters are the width and height of the image that is being drawn. For the `player`image, we’ll have `16, 16`, but for the background image, we’ll have `8, 8` since that’s how big those images are.
• the last parameter is what color we want to draw to the screen. `WHITE` means that we’re drawing all the white pixels in the image as white. `BLACK` means that we’re drawing all the white pixels in the image as black. It seems counter-intuitive, but it becomes useful later on.

Okay! If your code looks like the following, then go ahead and put it on your Arduboy!

``````//Jonathan Holmes (crait)
//November 1st, 2016
//Moving Character Demo
#include <Arduboy.h>
Arduboy arduboy;
const unsigned char background[] PROGMEM  = {
0x84, 0x20, 0x9, 0x00, 0x24, 0x00, 0x10, 0x80,
};
const unsigned char player[] PROGMEM  = {
0xfe, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0x1, 0xc1, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0xfe, 0x7f, 0x80, 0x9c, 0xbc, 0xb0, 0xb0, 0xb2, 0xb2, 0xb3, 0xb0, 0xb0, 0xb0, 0xbc, 0x9c, 0x80, 0x7f,
};
void setup() {
arduboy.begin();
arduboy.clear();
}
void loop() {
arduboy.clear();
arduboy.drawBitmap(5, 10, player, 16, 16, WHITE);
arduboy.display();
}``````

Your Arduboy should properly display as:

# Control The Sprite

Okay, remember how we controlled the value of a variable with the Up and Down buttons? To move the sprite around, we’ll do something very similar.

To start, let’s initialize 2 variables at the top of the sketch:

``````int playerx = 5;
int playery = 10;``````

The `playerx` and `playery` variables will hold the coordinates for our image as it’s moving around. In the `arduboy.drawBitmap()` function, let’s replace the X and Y parameter with these variables.

``arduboy.drawBitmap(palyerx, playery, player, 16, 16, WHITE);``

Let’s increase/decrease those variables’ values when the Up/Down and Left/Right buttons are pressed.

``````if(arduboy.pressed(LEFT_BUTTON)) {
playerx = palyerx - 1;
}
if(arduboy.pressed(RIGHT_BUTTON)) {
playerx = palyerx + 1;
}
if(arduboy.pressed(UP_BUTTON)) {
playery = palyery - 1;
}
if(arduboy.pressed(DOWN_BUTTON)) {
playery = palyery + 1;
}``````

That’s all it takes to move an image around the screen! Test out the code on your Arduboy and have fun with it!

``````//Jonathan Holmes (crait)
//November 1st, 2016
//Moving Character Demo
#include <Arduboy.h>
Arduboy arduboy;
int playerx = 5;
int playery = 10;
const unsigned char background[] PROGMEM  = {
0x84, 0x20, 0x9, 0x00, 0x24, 0x00, 0x10, 0x80,
};
const unsigned char player[] PROGMEM  = {
0xfe, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0x1, 0xc1, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0xfe, 0x7f, 0x80, 0x9c, 0xbc, 0xb0, 0xb0, 0xb2, 0xb2, 0xb3, 0xb0, 0xb0, 0xb0, 0xbc, 0x9c, 0x80, 0x7f,
};
void setup() {
arduboy.begin();
arduboy.clear();
}
void loop() {
arduboy.clear();
if(arduboy.pressed(LEFT_BUTTON)) {
playerx = playerx - 1;
}
if(arduboy.pressed(RIGHT_BUTTON)) {
playerx = playerx + 1;
}
if(arduboy.pressed(UP_BUTTON)) {
playery = playery - 1;
}
if(arduboy.pressed(DOWN_BUTTON)) {
playery = playery + 1;
}
arduboy.drawBitmap(playerx, playery, player, 16, 16, WHITE);
arduboy.display();
}``````

# For Loop

Okay, remember how I said that loops tell the computer to repeat a set of actions over and over again? I’m going to teach you about one called the for loop. This loop allows you to repeat a set of instructions for a specified amount of times.

Why is this important? We want to make a background for this game, but the `background` image that we have is too small to fill the entire screen, so we’ll print it many times in different places until it fills up the entire screen.

Let’s say we want to use the `arduboy.print();` function to print your name 10 times in a row. We’d have to use a loop keyword and we’ll need a variable to keep track of how many times we’ve printed so far, and a line of code to increase that variable every time we loop through. Luckily, the for loop has a lot of that built-in. Take a look at it, below:

``````for( int counter = 0; counter < 10; counter = counter + 1 ) {
arduboy.print("crait");
}``````

Alright, again, let’s break this down:

• `for`: This is kinda like a function. It lets the Arduboy know you want to use a for loop.
• `int counter = 0;`: Whenever you run a `for` loop, you’ll need to initialize/set a variable. We create a `counter` variable that is equal to 0. This code gets executed before the loop is entered.
• `counter < 10;`: This is the check to see if the loop should run or not. If `counter` is less than `10`, then it should run.
• `counter = counter + 1`: After all of the instructions inside of the loop are followed, this code is ran. It increases `counter` by `1`. Eventually, `counter` will grow big enough so that the loop does not execute anymore.
• `{ }`: Anything inside of these braces will be considered part of the loop and only be executed when the Arduboy is running this `for` loop.

Instead of this code printing my name 10 times, we can have it count!

``````for( int counter = 0; counter < 10; counter = counter + 1 ) {
arduboy.print( counter );
}``````

If we run the above loop, the Arduboy would print out the numbers 0 to 9! You can change the number of times it will loop, you can change what number the `counter` starts with, and you can even change how many numbers `counter` is increased by every time the loop is run.

# Tile Background

Alrighty! Let’s get the background implemented! We’re almost done!

The Arduboy’s screen resolution is 128 pixels wide by 64 pixels tall, which means if we use a background image of 8 pixels by 8 pixels, we would have 16 columns wide by 8 rows high.

Let’s tile the background image 8 times across the top of the screen.

``````for( int backgroundx = 0; backgroundx < 128; backgroundx = backgroundx + 8 ) {
arduboy.drawBitmap( backgroundx, 0, background, 8, 8, WHITE );
}``````

Do you understand what’s going on, here?  Notice that the `backgroundx` variable is used to count the loop, but also used when drawing the background image. Since we want to span the background across the width of the screen, we want to count up to 128. Because we want to put a new image every 8 pixels, we’ll increase it by 8 every time a tile is drawn.

Add this code before you draw your sprite and run it on your Arduboy. It should appear like this:

Next, let’s add another `for` loop. Instead of doing this after the previous loop, we’ll have this loop inside of the other!

``````for( int backgroundx = 0; backgroundx < 128; backgroundx = backgroundx + 8 ) {
for( int backgroundy = 0; backgroundy < 64; backgroundy = backgroundy + 8 ) {
arduboy.drawBitmap( backgroundx, backgroundy, background, 8, 8, WHITE );
}
}``````

To summarize the above code, for each column on the screen, we will draw several rows of `background`images until the screen is full. This is the result:

Here’s the full code:

``````//Jonathan Holmes (crait)
//November 1st, 2016
//Moving Character Demo
#include <Arduboy.h>
Arduboy arduboy;
int playerx = 5;
int playery = 10;
const unsigned char background[] PROGMEM  = {
0x84, 0x20, 0x9, 0x00, 0x24, 0x00, 0x10, 0x80,
};
const unsigned char player[] PROGMEM  = {
0xfe, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0x1, 0xc1, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0xfe, 0x7f, 0x80, 0x9c, 0xbc, 0xb0, 0xb0, 0xb2, 0xb2, 0xb3, 0xb0, 0xb0, 0xb0, 0xbc, 0x9c, 0x80, 0x7f,
};
void setup() {
arduboy.begin();
arduboy.clear();
}
void loop() {
arduboy.clear();
if(arduboy.pressed(LEFT_BUTTON)) {
playerx = playerx - 1;
}
if(arduboy.pressed(RIGHT_BUTTON)) {
playerx = playerx + 1;
}
if(arduboy.pressed(UP_BUTTON)) {
playery = playery - 1;
}
if(arduboy.pressed(DOWN_BUTTON)) {
playery = playery + 1;
}
//For each column on the screen
for( int backgroundx = 0; backgroundx < 128; backgroundx = backgroundx + 8 ) {
//For each row in the column
for( int backgroundy = 0; backgroundy < 64; backgroundy = backgroundy + 8 ) {
//Draw a background tile
arduboy.drawBitmap( backgroundx, backgroundy, background, 8, 8, WHITE );
}
}
//Draw player sprite
arduboy.drawBitmap(playerx, playery, player, 16, 16, WHITE);
arduboy.display();
}``````

# Clean Up

Uh, oh! You notice the problem? Our character’s face is clear and you can see the background though it. How can we fix that? Let’s just simply draw a black square behind it to block the background images. Put this before we draw the player’s sprite.

``arduboy.fillRect(playerx, playery, 16, 16, BLACK);``

# Finished Code

Here it is! Run this code on your Arduboy to make sure it works properly! If it does, then feel free to modify this code to start making your own game!

``````//Jonathan Holmes (crait)
//November 1st, 2016
//Moving Character Demo
#include <Arduboy.h>
Arduboy arduboy;
int playerx = 5;
int playery = 10;
const unsigned char background[] PROGMEM  = {
0x84, 0x20, 0x9, 0x00, 0x24, 0x00, 0x10, 0x80,
};
const unsigned char player[] PROGMEM  = {
0xfe, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0x1, 0xc1, 0x1, 0x3d, 0x25, 0x25, 0x3d, 0x1, 0xfe, 0x7f, 0x80, 0x9c, 0xbc, 0xb0, 0xb0, 0xb2, 0xb2, 0xb3, 0xb0, 0xb0, 0xb0, 0xbc, 0x9c, 0x80, 0x7f,
};
void setup() {
arduboy.begin();
arduboy.clear();
}
void loop() {
arduboy.clear();
if(arduboy.pressed(LEFT_BUTTON)) {
playerx = playerx - 1;
}
if(arduboy.pressed(RIGHT_BUTTON)) {
playerx = playerx + 1;
}
if(arduboy.pressed(UP_BUTTON)) {
playery = playery - 1;
}
if(arduboy.pressed(DOWN_BUTTON)) {
playery = playery + 1;
}
//For each column on the screen
for( int backgroundx = 0; backgroundx < 128; backgroundx = backgroundx + 8 ) {
//For each row in the column
for( int backgroundy = 0; backgroundy < 64; backgroundy = backgroundy + 8 ) {
//Draw a background tile
arduboy.drawBitmap( backgroundx, backgroundy, background, 8, 8, WHITE );
}
}
//Draw black square
arduboy.fillRect(playerx, playery, 16, 16, BLACK);
//Draw player sprite
arduboy.drawBitmap(playerx, playery, player, 16, 16, WHITE);
arduboy.display();
}``````

# What’s Next?

What’s next? I’ll teach you how to make your own Pong game from scratch!! Click here to go check it out!

This tutorial is copied and abridged from the original by Jonathan Holmes.

# Credits

I wrote this tutorial in order to give back to the programming community that taught me to get into it about 10 years ago. If you’d like to follow me on Twitter, please do so at http://www.twitter.com/crait30 . I’d greatly appreciate that.

# This is Part 5 in a series on learning how to program your own Arduboy game. If you have skipped the previous parts, please read over Part 1, Part 2, Part 3 and Part 4.

I think you’ve got all the skills you need to make your first game! This game will be a number guessing game where the Arduboy picks a random number and the player has 7 attempts to guess the number. After each guess, the Arduboy will tell the player a hint. If the player guesses right, the player wins!

# Starting Code

Okay, let’s start a new project. Open up the Arduino IDE and go to File > New. In the new window, add some comments at the top that include your name and the title of this game.

Whenever I make a new game, the first things I do are: 1) Include the Arduboy library, 2) Create a new `Arduboy` object, 3) Prepare the `setup()` and `loop()` sections.

Here’s what the code looks like when we’re ready to begin:

``````//Jonathan Holmes (crait)
//October 24th, 2016
//Number Guessing Game

#include <Arduboy.h>
Arduboy arduboy;

void setup() {
arduboy.begin();
arduboy.clear();

}

void loop() {
arduboy.clear();

arduboy.display();
}``````

# Setting Up Variables

For our game, we need to set up some variables. We need one to keep track of how many attempts the players has left, what the number the player is guessing, what number the Arduboy picked, and one to know if the player has won or not.

At this point, you only know how to use `int`‘s, so we’ll continue using them. In the next part, I’m going to teach you about more of them.

Anyway, let’s initialize the variables by adding this code before `setup()`:

``````int playerwin;
int attempts;
int guessednumber;
int randomnumber;``````

Inside of `setup()`, let’s assign these variables to 0.

``````playerwin = 0;
attempts = 0;
guessednumber = 0;``````

`randomnumber` isn’t supposed to be 0. Instead, let’s use the following code to assign a random number to it between 1 and 100;

``````srand(7/8);
randomnumber = 1 + rand() % 100;``````

This is some wizardry if you don’t know much about computer programming. But keep following these tutorials and we’ll explain them in a later part.

Next, we’re going to put most of our game’s code between the `arduboy.clear()` and `arduboy.display()`functions. So, put a comment in between them so we can keep track of where we are. Your code should now look like this:

``````//Jonathan Holmes (crait)
//October 24th, 2016
//Number Guessing Game

#include <Arduboy.h>
Arduboy arduboy;
int playerwin;
int attempts;
int guessednumber;
int randomnumber;

void setup() {
arduboy.begin();
arduboy.clear();
playerwin = 0;
attempts = 0;
guessednumber = 0;
randomnumber = 0;

}

void loop() {
arduboy.clear();
//Gameplay code goes here
arduboy.display();
}``````

# Else

We want our player to know if they have won or not. So, our `playerwin` variable will help with that. If `playerwin` is equal to 0, the player has not won. If `playerwin` is not equal to 0, then the player has won. In our code, we can put 2 `if` statements in to handle this.

``````if( playerwin == 0 ) {
//Ask the player for a number and play the game
}
if( playerwin == 1 ) {
//Tell the player that they won!
}``````

There can be some problems from doing our code this way, so I am going to teach you a better method using the `if-else` statement.

What we want is for our game to run some code if the player didn’t win, yet, and run other code if they did. At the end of an `if` statement, we can add `else` and more braces for a new section of code. Confused? Take a look below:

``````if( playerwin == 0 ) {
//Ask the player for a number and play the game
} else {
//Tell the player that they won!
}``````

Else is just another way to say otherwise. The above code says that if `playerwin` is equal to 0, then we need to run some code, otherwise we need to run some other code.

# Coding The Game

Let’s stick the above `if-else` statement into the game and see where we’re at:

``````//Jonathan Holmes (crait)
//October 24th, 2016
//Number Guessing Game

#include <Arduboy.h>
Arduboy arduboy;
int playerwin;
int attempts;
int guessednumber;
int randomnumber;

void setup() {
arduboy.begin();
arduboy.clear();
playerwin = 0;
attempts = 0;
guessednumber = 0;
randomnumber = 0;
}

void loop() {
arduboy.clear();
if( playerwin == 0 ) {
//Ask the player for a number and play the game
} else {
//Tell the player that they won!
}
arduboy.display();
}``````

Now, we have two sections of code we need to finish: 1) Asking the player for numbers and 2) Telling the player that they won.

# Guessing A Number

The player will have 7 attempts to guess a number. So, when their attempts is at 7, we’ll show them a game over screen instead of letting them guess, again. We’ll use another `if-else` statement.

``````if( attempts == 7 ) {
//Game Over screen
} else {
//Player has more attempts
}``````

We’ll worry about the Game Over screen in a minute. For now, let’s modify the part with players having more attempts remaining.

The first thing we want to do is handle the buttons. If a player uses the Up or Down button, the `guessednumber`will increase or decrease. When the player presses the A Button, the player will actually attempt to guess that number.

``````if( arduboy.pressed(UP_BUTTON) == true ) {
guessednumber = guessednumber + 1;
}
if( arduboy.pressed(DOWN_BUTTON) == true ) {
guessednumber = guessednumber - 1;
}
if( arduboy.pressed(A_BUTTON) == true ) {
//Guess number
}``````

This is something we’ve seen before in the previous tutorial. After we handle the button input, we want to display the number being guessed as well as how many attempts the player has left. Add this code in:

``````arduboy.setCursor(0, 0);
arduboy.print("Attempt: ");
arduboy.print(attempts);
arduboy.print("\n");
arduboy.print("Number to guess: ");
arduboy.print(guessednumber);``````

You should know what this code does. However, there is something new: `arduboy.print("\n");` This line of code creates a linebreak, which is like hitting the Enter button on your keyboard to insert a new line of text.

Let’s go back and add one more `if-else` statement in this to handle the player making a guess! Remember, if the player guesses the random number, the player will win, otherwise (else) the player use up an attempt.

Remember, when a player wins, we already decided that `playerwin` would be changed from 0 to another number! Change the A Button code to this:

``````if( arduboy.pressed(A_BUTTON) == true ) {
if( guessednumber == randomnumber ) {
playerwin = 1;
} else {
attempts = attempts + 1;
}
}``````

Makes sense, right?  Here’s what the code should currently look like! We’re almost done!

``````//Jonathan Holmes (crait)
//October 24th, 2016
//Number Guessing Game

#include <Arduboy.h>
Arduboy arduboy;
int playerwin;
int attempts;
int guessednumber;
int randomnumber;

void setup() {
arduboy.begin();
arduboy.clear();
playerwin = 0;
attempts = 0;
guessednumber = 0;
randomnumber = 0;
srand(7/8);
randomnumber = 1 + rand() % 100;
}

void loop() {
arduboy.clear();
if( playerwin == 0 ) {
//Ask the player for a number and play the game
if( attempts == 7 ) {
//Game Over screen
} else {
//Player has more attempts
if( arduboy.pressed(UP_BUTTON) == true ) {
guessednumber = guessednumber + 1;
}
if( arduboy.pressed(DOWN_BUTTON) == true ) {
guessednumber = guessednumber - 1;
}
if( arduboy.pressed(A_BUTTON) == true ) {
if( guessednumber == randomnumber ) {
playerwin = 1;
} else {
attempts = attempts + 1;
}
}
arduboy.setCursor(0, 0);
arduboy.print("Attempt: ");
arduboy.print(attempts);
arduboy.print("\n");
arduboy.print("Number to guess: ");
arduboy.print(guessednumber);
}
} else {
//Tell the player that they won!
}
arduboy.display();
}``````

# Game Over Screen

The Game Over screen is pretty easy. We need to put 2 things into the Game Over section: 1) Tell the player they lost and what the correct number actually was, and 2) Let them push A to restart the game. We already know how to tell the player that they lost:

``````arduboy.setCursor(0, 0);
arduboy.print("You lost!");
arduboy.print("\n");
arduboy.print("Correct Number: ");
arduboy.print(randomnumber);``````

Easy, right? When the player presses the A Button, we want the variables to reset and find a new random number. Here’s what that code looks like.

``````if( arduboy.pressed(A_BUTTON) == true ) {
randomnumber = 1 + rand() % 100;
attempts = 0;
playerwin = 0;
}``````

# Win Screen

The Win screen will look almost identical to the Game Over screen. Let’s add this code to the Win screen:

``````arduboy.setCursor(0, 0);
arduboy.print("You won!");
arduboy.print("\n");
arduboy.print("Correct Number: ");
arduboy.print(randomnumber);
if( arduboy.pressed(A_BUTTON) == true ) {
randomnumber = 1 + rand() % 100;
attempts = 0;
playerwin = 0;
}``````

# Uh, Oh!! There’s A Problem!

Uh, oh!!!  There’s a problem… We’re almost done, but there’s a problem that I specifically avoided telling you about. Go ahead and run this code on your Arduboy and see if you can figure out what it is! If you’ve done the previous tutorials in this series, you may have already figured it out!

Here’s what the code should look like so far:

``````//Jonathan Holmes (crait)
//October 24th, 2016
//Number Guessing Game

#include <Arduboy.h>
Arduboy arduboy;
int playerwin;
int attempts;
int guessednumber;
int randomnumber;

void setup() {
arduboy.begin();
arduboy.clear();
playerwin = 0;
attempts = 0;
guessednumber = 0;
randomnumber = 0;
srand(7/8);
randomnumber = 1 + rand() % 100;
}

void loop() {
arduboy.clear();
if( playerwin == 0 ) {
//Ask the player for a number and play the game
if( attempts == 7 ) {
//Game Over screen
arduboy.setCursor(0, 0);
arduboy.print("You lost!");
arduboy.print("\n");
arduboy.print("Correct Number: ");
arduboy.print(randomnumber);
if( arduboy.pressed(A_BUTTON) == true ) {
randomnumber = 1 + rand() % 100;
attempts = 0;
playerwin = 0;
}
} else {
//Player has more attempts
if( arduboy.pressed(UP_BUTTON) == true ) {
guessednumber = guessednumber + 1;
}
if( arduboy.pressed(DOWN_BUTTON) == true ) {
guessednumber = guessednumber - 1;
}
if( arduboy.pressed(A_BUTTON) == true ) {
if( guessednumber == randomnumber ) {
playerwin = 1;
} else {
attempts = attempts + 1;
}
}
arduboy.setCursor(0, 0);
arduboy.print("Attempt: ");
arduboy.print(attempts);
arduboy.print("\n");
arduboy.print("Number to guess: ");
arduboy.print(guessednumber);
}
} else {
//Tell the player that they won!
arduboy.setCursor(0, 0);
arduboy.print("You won!");
arduboy.print("\n");
arduboy.print("Correct Number: ");
arduboy.print(randomnumber);
if( arduboy.pressed(A_BUTTON) == true ) {
randomnumber = 1 + rand() % 100;
attempts = 0;
playerwin = 0;
}
}
arduboy.display();
}``````

Did you figure out the problem? Yeah, it’s kinda unexpected. The Arduboy is too fast when playing a game like this! Playing the game and pressing the A button will blast through the entire menu super fast. Same with pressing Up or Down… The numbers will scroll too fast.

# Fixing This Issue

So, we need to do 1 of 2 things to fix this speed issue. We could intentionally slow the Arduboy down, however, when making some games, they will move too slow to be enjoyable. That’s not really an option for us. The second option is to have some kind of variable that keeps track if the player is holding down the button or not. The Arduboy is so fast that if you press the button for a fraction of a second, it will already run through the code several times, thinking you’ve pressed the button several times.

Let’s start by going all the way to the top of our file to initialize some new variables.

``````int upbuffer;
int downbuffer;
int abuffer;``````

Next, let’s assign them to be 0 in our `setup()` section.

``````upbuffer = 0;
downbuffer = 0;
abuffer = 0;``````

To keep track of our button presses, we’ll have these variables hold either a 0 or a 1. If the buffer variable is 0, that means that the player did not press that button. If the buffer variable is equal to 1, that means the player did press that button.

Whenever the player lets go of a button, we want to set these variables back to 0.

This means that any time we press a button, we can check to see if the button was being held down or if it was pressed for the first time. If is being held down, we want to pretend like the button was not even pressed and ignore it.

This may be a little confusing for some people to understand, but please bear with me.

At the end of `loop()`, let’s add some code that can do that.

``````if( arduboy.notPressed(A_BUTTON) == true ) {
abuffer = 0;
}
if( arduboy.notPressed(DOWN_BUTTON) == true ) {
downbuffer = 0;
}
if( arduboy.notPressed(UP_BUTTON) == true ) {
upbuffer = 0;
}``````

Now, every place that we check to see if a button is pressed or not, we need to also check to see if the buffer variable is 0 or 1.

If the button is being pressed `and` the buffer variable is 0, then we will run the code as well and change the buffer variable to 1.

Replace all the button checks that look like the following…

``if( arduboy.pressed(A_BUTTON) == true  ) {``

to…

``````if( arduboy.pressed(A_BUTTON) == true and abuffer == 0 ) {
abuffer = 1;``````

Notice that the word `and` allows us to check for multiple things inside of an `if` statement. Do this with Up and Down Button checks, too!

From…

``if( arduboy.pressed(DOWN_BUTTON) == true  ) {``

to…

``````if( arduboy.pressed(DOWN_BUTTON) == true and downbuffer == 0 ) {
downbuffer = 1;``````

From…

``if( arduboy.pressed(UP_BUTTON) == true  ) {``

to…

``````if( arduboy.pressed(UP_BUTTON) == true and upbuffer == 0 ) {
upbuffer = 1;``````

After you do that, test your code, which should look just like this:

``````//Jonathan Holmes (crait)
//October 24th, 2016
//Number Guessing Game

#include <Arduboy.h>
Arduboy arduboy;
int playerwin;
int attempts;
int guessednumber;
int randomnumber;
int upbuffer;
int downbuffer;
int abuffer;

void setup() {
arduboy.begin();
arduboy.clear();
playerwin = 0;
attempts = 0;
guessednumber = 0;
randomnumber = 0;
srand(7/8);
randomnumber = 1 + rand() % 100;
upbuffer = 0;
downbuffer = 0;
abuffer = 0;
}

void loop() {
arduboy.clear();
if( playerwin == 0 ) {
//Ask the player for a number and play the game
if( attempts == 7 ) {
//Game Over screen
arduboy.setCursor(0, 0);
arduboy.print("You lost!");
arduboy.print("\n");
arduboy.print("Correct Number: ");
arduboy.print(randomnumber);
if( arduboy.pressed(A_BUTTON) == true  and abuffer == 0 ) {
abuffer = 1;
randomnumber = 1 + rand() % 100;
attempts = 0;
playerwin = 0;
}
} else {
//Player has more attempts
if( arduboy.pressed(UP_BUTTON) == true and upbuffer == 0 ) {
upbuffer = 1;
guessednumber = guessednumber + 1;
}
if( arduboy.pressed(DOWN_BUTTON) == true and downbuffer == 0 ) {
downbuffer = 1;
guessednumber = guessednumber - 1;
}
if( arduboy.pressed(A_BUTTON) == true and abuffer == 0 ) {
abuffer = 1;
if( guessednumber == randomnumber ) {
playerwin = 1;
} else {
attempts = attempts + 1;
}
}
arduboy.setCursor(0, 0);
arduboy.print("Attempt: ");
arduboy.print(attempts);
arduboy.print("\n");
arduboy.print("Number to guess: ");
arduboy.print(guessednumber);
}
} else {
//Tell the player that they won!
arduboy.setCursor(0, 0);
arduboy.print("You won!");
arduboy.print("\n");
arduboy.print("Correct Number: ");
arduboy.print(randomnumber);
if( arduboy.pressed(A_BUTTON) == true and abuffer == 0 ) {
abuffer = 1;
randomnumber = 1 + rand() % 100;
attempts = 0;
playerwin = 0;
}
}
if( arduboy.notPressed(A_BUTTON) == true) {
abuffer = 0;
}
if( arduboy.notPressed(DOWN_BUTTON) == true ) {
downbuffer = 0;
}
if( arduboy.notPressed(UP_BUTTON) == true ) {
upbuffer = 0;
}
arduboy.display();
}``````

# Hints

After testing your game, you may have realized that it’s just too hard for someone to actually beat. I tried a many times and won only once. It’s almost impossible!

Let’s make the game a little easier and a little more fun by adding in hints to the player. To start this, let’s create a new variable called `lastguess` and give it a value of 0.

Every time the player makes a guess, let’s set `lastguess` to have the same value of their `guessednumber`.

Look for the line of code where the player uses one of their attempts:

``attempts = attempts + 1;``

After that line, let’s add the following:

``lastguess = guessednumber;``

Add a new linebreak after with `arduboy.print("\n");` and add a new `if-else` statement. We’re going to check the player guessed anything, yet.

``````arduboy.print("\n");
if( attempts == 0 ) {
//No last guess
} else {
//Last guess was wrong
}``````

If there have been 0 attempts so far, then let’s print out “Good luck!” Otherwise, let’s display the last guess. That code should now look like:

``````arduboy.print("\n");
if( attempts == 0 ) {
arduboy.print("Good luck!");
} else {
arduboy.print(lastguess);
}``````

Our hint will actually to tell the user if `lastguess` is less than `<` or greater than `>` the `randomnumber` and print that out. That code should now look like:

``````arduboy.print("\n");
if( attempts == 0 ) {
arduboy.print("Good luck!");
} else {
arduboy.print(lastguess);
if( lastguess > randomnumber ) {
arduboy.print(" is too high!");
}
if( lastguess < randomnumber ) {
arduboy.print(" is too low!");
}
}``````

You’ve seen all of this code before, except for checking if a number is less than `<` or greater than `>` another number.

# Full Code

Yes!  You’re finally done!! Test out this code and have fun!

``````//Jonathan Holmes (crait)
//October 24th, 2016
//Number Guessing Game

#include <Arduboy.h>
Arduboy arduboy;
int playerwin;
int attempts;
int guessednumber;
int randomnumber;
int upbuffer;
int downbuffer;
int abuffer;
int lastguess;

void setup() {
arduboy.begin();
arduboy.clear();
playerwin = 0;
attempts = 0;
guessednumber = 0;
randomnumber = 0;
srand(7/8);
randomnumber = 1 + rand() % 100;
upbuffer = 0;
downbuffer = 0;
abuffer = 0;
lastguess = 0;
}

void loop() {
arduboy.clear();
if( playerwin == 0 ) {
//Ask the player for a number and play the game
if( attempts == 7 ) {
//Game Over screen
arduboy.setCursor(0, 0);
arduboy.print("You lost!");
arduboy.print("\n");
arduboy.print("Correct Number: ");
arduboy.print(randomnumber);
if( arduboy.pressed(A_BUTTON) == true  and abuffer == 0 ) {
abuffer = 1;
randomnumber = 1 + rand() % 100;
attempts = 0;
playerwin = 0;
}
} else {
//Player has more attempts
if( arduboy.pressed(UP_BUTTON) == true and upbuffer == 0 ) {
upbuffer = 1;
guessednumber = guessednumber + 1;
}
if( arduboy.pressed(DOWN_BUTTON) == true and downbuffer == 0 ) {
downbuffer = 1;
guessednumber = guessednumber - 1;
}
if( arduboy.pressed(A_BUTTON) == true and abuffer == 0 ) {
abuffer = 1;
if( guessednumber == randomnumber ) {
playerwin = 1;
} else {
attempts = attempts + 1;
lastguess = guessednumber;
}
}
arduboy.setCursor(0, 0);
arduboy.print("Attempt: ");
arduboy.print(attempts);
arduboy.print("\n");
arduboy.print("Number to guess: ");
arduboy.print(guessednumber);
arduboy.print("\n");
if( attempts == 0 ) {
arduboy.print("Good luck!");
} else {
arduboy.print(lastguess);
if( lastguess > randomnumber ) {
arduboy.print(" is too high!");
}
if( lastguess < randomnumber ) {
arduboy.print(" is too low!");
}
}
}
} else {
//Tell the player that they won!
arduboy.setCursor(0, 0);
arduboy.print("You won!");
arduboy.print("\n");
arduboy.print("Correct Number: ");
arduboy.print(randomnumber);
if( arduboy.pressed(A_BUTTON) == true and abuffer == 0 ) {
abuffer = 1;
randomnumber = 1 + rand() % 100;
attempts = 0;
playerwin = 0;
}
}
if( arduboy.notPressed(A_BUTTON) == true) {
abuffer = 0;
}
if( arduboy.notPressed(DOWN_BUTTON) == true ) {
downbuffer = 0;
}
if( arduboy.notPressed(UP_BUTTON) == true ) {
upbuffer = 0;
}
arduboy.display();
}``````

# What’s Next?

Wow! That was a lot! There is still a lot of stuff you need to learn to be a great programmer. I’ll teach you that stuff later, though. The next tutorial is going to be fun! You’ll learn how to make games with images!

This tutorial is copied and abridged from the original by Jonathan Holmes.

# Credits

I wrote this tutorial in order to give back to the programming community that taught me to get into it about 10 years ago. If you’d like to follow me on Twitter, please do so at http://www.twitter.com/crait8 . I’d greatly appreciate that.

# Make Your Own Arduboy Game – Questions & Button Input

This is Part 4 in a series on learning how to program your own Arduboy game. If you have skipped the previous parts, please read over Part 1Part 2Part 3.

# Stopping Robots From Washing Their Hair

Remember in the previous part of this tutorial, I told you about the back of the shampoo bottles? The instructions say:

``````1. Lather
2. Rinse
3. Repeat``````

The problem with this is that if you gave these instructions to a robot, it will repeat these steps forever. We need to implement some way to stop the robot from doing that. In computer programming, we can use conditional statements. Conditional statements are basically questions that we ask the computer and if the answer is true, then follow different instructions

``````1. Lather
2. Rinse
3. If you need to wash your hair again, then Repeat``````

The first kind of conditional statements you’ll come into contact with are `if` statements. Like the example above, you can basically ask the computer `if something is true, then do something`. A robot following the above instructions won’t wash their hair forever since it will eventually be washed.

# Buttons

We can also use `if` statements to test buttons, too! That’s how video games know if you’re pushing buttons. Moving a character may look like this:

``````1. If the Right Button is pressed, move character right
2. If the Left Button is pressed, move character left
3. Print character picture to screen
4. Repeat``````

# Format

The format for `if` statements in C/C++ is:

``````if(something is true) {
DoSomething();
}``````

Only `if` the `something is true`, then `DoSomething();` command will run.

To check `if` the A Button is pressed, we need to use the `arduboy.pressed(A_BUTTON)` function. Putting it in the correct format, it will look like this:

``````if( arduboy.pressed(A_BUTTON) == true ) {
DoSomething();
}``````

Notice that we use a double equal sign `==` instead of just a single equal sign `=`. You’ll mostly see this inside of conditional statements. Don’t let it scare you! A single equal sign `=` means that you are assigning a value. A double equal sign `==` is checking the value. I’ll talk more about this later!

Above, we checked to see if the A Button was being pressed, but we can also check if the A Button is not being pressed!

``````if( arduboy.pressed(A_BUTTON) == false ) {
DoSomething();
}``````

Cool, right?!

# Modifying The Code

Let’s go grab that code from Part 3 and modify it:

``````//Jonathan Holmes (crait)
//October 18th, 2016
//Printing Text
//Include the Arduboy Library
#include <Arduboy.h>
//Initialize the arduboy object
Arduboy arduboy;
//Initialize our counter variable
int counter;
//The setup() function runs once when you turn your Arduboy on
void setup() {
//Start the Arduboy properly and display the Arduboy logo
arduboy.begin();
//Get rid of the Arduboy logo and clear the screen
arduboy.clear();
//Assign our counter variable to be equal to 0
counter = 0;
}
//The loop() function repeats forever after setup() is done
void loop() {
//Clear whatever is printed on the screen
arduboy.clear();
//Move the cursor back to the top-left of the screen
arduboy.setCursor(0, 0);
//Increase counter's value by 1
counter = counter + 1;
//Print out the value of counter
arduboy.print(counter);
//Refresh the screen to show whatever's printed to it
arduboy.display();
}``````

Remember that `counter` is our variable that increases forever in our previous code. What we’re going to do is change this code to increase or decrease `counter` depending on if you’re holding the Up Button or Down Button.

We need to find the line that increases `counter` and remove it. After we clear the screen with `arduboy.clear();`, let’s add the following code:

``````if( arduboy.pressed(UP_BUTTON) == true ) {
//Increase counter
}
if( arduboy.pressed(DOWN_BUTTON) == true ) {
//Decrease counter
}``````

Our code to increase `counter` was `counter = counter + 1;` . Using that code, we can decrease it by switching the plus sign for minus sign. To decrease `counter`, our code will be `counter = counter - 1;` . Try to plug those in and when you’re done, check to see if it is the same as the completed code, below.

# Testing Numbers & Variables

I was going to end the tutorial now, but let’s extend it a little more and tell you about testing numbers!

I told you before that inside of an `if` statement, you can check to see if something is true or false. But, you can also check the values of variables or numbers.

``````if( counter == 36 ) {
arduboy.setCursor(30, 30);
arduboy.print("Yay!");
}``````

What do you think would happen if you ran the above code? `if` `counter` is equal to 36, then the Arduboy will set the cursor and print out “Yay!” to the screen. Notice that you can put multiple lines of code inside of the `if`statements.

Add that right after the other `if` statements that check for the Up and Down Buttons.

# The Completed Code

``````//Jonathan Holmes (crait)
//October 21st, 2016
//Button Test
//Include the Arduboy Library
#include <Arduboy.h>
//Initialize the arduboy object
Arduboy arduboy;
//Initialize our counter variable
int counter;
//The setup() function runs once when you turn your Arduboy on
void setup() {
//Start the Arduboy properly and display the Arduboy logo
arduboy.begin();
//Get rid of the Arduboy logo and clear the screen
arduboy.clear();
//Assign our counter variable to be equal to 0
counter = 0;
}
//The loop() function repeats forever after setup() is done
void loop() {
//Clear whatever is printed on the screen
arduboy.clear();
//Check if the UP_BUTTON is being pressed
if( arduboy.pressed(UP_BUTTON) == true ) {
//Increase counter by 1
counter = counter + 1;
}
//Check if the DOWN_BUTTON is being pressed
if( arduboy.pressed(DOWN_BUTTON) == true ) {
//Decrease counter
counter = counter - 1;
}
//Check if counter is equal to 36
if( counter == 36 ) {

arduboy.setCursor(30, 30);
arduboy.print("Yay!");
}
//Move the cursor back to the top-left of the screen
arduboy.setCursor(0, 0);
//Print out the value of counter
arduboy.print(counter);
//Refresh the screen to show whatever's printed to it
arduboy.display();
}``````

# Running The Code

Run the code and see what happens when you push the Up and Down Button!

# What’s Next?

You realize you already have all the skills to make a fun game, right? In the next part of this tutorial series, I’ll be walking you through the steps of making a game with all the skills that we’ve covered so far!

This tutorial is copied and abridged from the original by Jonathan Holmes.

# Credits

I wrote this tutorial in order to give back to the programming community that taught me to get into it about 10 years ago. If you’d like to follow me on Twitter, please do so at http://www.twitter.com/crait8 . I’d greatly appreciate that.

# Variables

Computers work a lot with calculations and data. To make most video games, you’re going to need to be able to store data, like high scores, or player location, or lives remaining. In order to remember data, a computer must set aside some memory to put that data into. Then, the computer can be told to change the data stored there.

# Loops

Remember how I said that computers have to be given specific instructions? Ever notice how the back of shampoo bottles say to 1. Lather2. Rinse3. Repeat? If a computer were given those instructions, they would be stuck in an infinite loop of lathering, rinsing, and repeating. In programming, having instructions repeat in a loop can be very useful. I’ll show you how to use the loop() function to do this.

# Getting Started

In this program, we’re going to make the Arduboy keep track of a number and display it to you as it is increased.

Let’s do it! Grab the code from the previous tutorial so that we can build off of it:

``````//Jonathan Holmes (crait)
//October 18th, 2016
//Printing Text

#include <Arduboy.h>
Arduboy arduboy;

void setup() {
// put your setup code here, to run once:
arduboy.begin();
arduboy.clear();
arduboy.print("Holmes is cool!");
arduboy.display();
}

void loop() {
// put your main code here, to run repeatedly:

}``````

# Initialization

Whenever you create a variable, you have to initialize it, which is setting aside memory for the data and giving it a name. You’ve already done this but didn’t realize it. Check out the `Arduboy arduboy;` line. You initialized an object called `arduboy`. Objects are a lil’ more complex than I want to get into during this tutorial, but there are different kinds of variables that you can initialize. Here are some: Integers, booleans, characters, objects, doubles, and many more.

We’ll initialize our number that’s going to increase as an integer. This basically means that it’s a whole number, without fractions. Integers will appear as `int` inside of C++ code.

To initialize a variable, you must put 3 things: The type of variable, the name of the variable, then a semi-colon. Let’s call our variable `counter`. Here’s the code: `int counter;` Put it under the `Arduboy arduboy;` line.

# Assignment

Whenever you create a variable, you can give it a value. This is called assignment. We don’t know what `counter`‘s value is because we never gave it one.

Let’s clean up the code by removing the `arduboy.print();` and `arduboy.display()` functions from setup(). Instead, let’s put the assignment there:

`counter = 0;`

This line of code is saying that `counter`‘s value is now equal to 0. Instead of 0, you could put another number, a mathematical formula, or some other things that I’ll explain below.

Here’s what your code should look like:

``````//Jonathan Holmes (crait)
//October 18th, 2016
//Counter

#include <Arduboy.h>
Arduboy arduboy;

int counter;

void setup() {
// put your setup code here, to run once:
arduboy.begin();
arduboy.clear();
counter = 0;
}

void loop() {
// put your main code here, to run repeatedly:

}``````

# Incrementing

Okay, our program will be repeating a few simple instructions over and over again. Basically, we’ll change the value of `counter`, then display the value of `counter`, then repeat. To do this, we should add some code into the loop() function.

`counter = counter + 1;`

This line of code means that you are assigning the value of `counter` to itself plus 1. Or, in other words, `counter`‘s value is now equal to the value of `counter` + 1.

# Displaying The Variable’s Value

Now that we have the variable increasing, let’s display it! Remember how we used `arduboy.print()` to print some text to the screen? Well, we can use that same function to display numbers to the screen, too. Add `arduboy.print(counter);` .

If you were to run this code as it is, now, then the Arduboy’s screen would fill up with numbers. If we’re going to print something new, we need to be sure to erase what was previously on the screen. We need to add in `arduboy.clear();` at the beginning of loop() and `arduboy.display();` at the end to display the updated screen.

Have you ever used a type writer? Whenever you type letters, the cursor moves over. The `arduboy.print()`function works similarly. Every time you use the `arduboy.print()` function, it moves the cursor over. So we need to reset the cursor to the top of the screen with `arduboy.setCursor(0, 0);` . I will explain this more in a later tutorial, but just throw that at the top of the loop().

# The Completed Code

``````//Jonathan Holmes (crait)
//October 18th, 2016
//Printing Text

//Include the Arduboy Library
#include <Arduboy.h>
//Initialize the arduboy object
Arduboy arduboy;
//Initialize our counter variable
int counter;
//The setup() function runs once when you turn your Arduboy on
void setup() {
//Start the Arduboy properly and display the Arduboy logo
arduboy.begin();
//Get rid of the Arduboy logo and clear the screen
arduboy.clear();
//Assign our counter variable to be equal to 0
counter = 0;
}
//The loop() function repeats forever after setup() is done
void loop() {
//Clear whatever is printed on the screen
arduboy.clear();
//Move the cursor back to the top-left of the screen
arduboy.setCursor(0, 0);
//Increase counter's value by 1
counter = counter + 1;
//Print out the value of counter
arduboy.print(counter);
//Refresh the screen to show whatever's printed to it
arduboy.display();
}``````

# What’s Next?

In the next tutorial, we’ll be learning about testing the values of variables, booleans, and pressing buttons!

This tutorial is copied and abridged from the original by Jonathan Holmes.

# Credits

I wrote this tutorial in order to give back to the programming community that taught me to get into it about 10 years ago. If you’d like to follow me on Twitter, please do so at http://www.twitter.com/crait17 . I’d greatly appreciate that.

# Creating A New Sketch

Using the Arduino IDE, go to File > New. This will create a new window with a new sketch. A sketch is a file with your code in it. Sometimes you’ll hear it called “source code”.

# Reviewing Our Code

In that new window, you should see the following code:

``````void setup() {
// put your setup code here, to run once:
}
void loop() {
// put your main code here, to run repeatedly:
}``````

Whenever you write code, you’re going to put a lot of it inside of braces, which look like { and }. That is to split up different lines of code that occur at different times. You’ll learn more specifics about what those different times are later on. All you need to worry about is that you have some code that will be put into the setup()section and the loop() section. These are called functions, but we don’t need to know much about them right now. All we need to know is that whatever code that’s inside of the setup() function will be run once whenever the Arduboy turns on and whatever code is inside the loop() function will be run later on.

The next thing I want to bring to your attention are the comments. These are lines of code that are completely ignored. They’re great for adding in notes so that you can read your code easier. I’m going to use them a lot, so I thought we should start with them.

It’s very typical to use comments to explain the purpose of functions, variables, and at the beginning of your code to explain the purpose of your program/game.

Let’s go ahead and add some comments to the top of the program! At the top, add a few new lines of text that starts with two slashes, then your name, date, and the title of this program.

Your code should now look like this:

``````//Jonathan Holmes (crait)
//October 18th, 2016
//Printing Text
void setup() {
// put your setup code here, to run once:
}
void loop() {
// put your main code here, to run repeatedly:
}``````

Those lines of text should turn grey.

# Getting Arduboy-Specific Instructions

Okay, that was simple enough, but we need to start adding in our instructions, now. To add in a lot of Arduboy-specific instructions, we need to import the Arduboy Library into our code. Make a new line of code after your comments and add `#include <Arduboy.h>` . This line of code says that you want to grab a lot of instructions from the Arduboy.h file. There’s nothing more about that that you need to know.

Make a new line after that, and add `Arduboy arduboy;` . Don’t worry about this too much. Like I said, this is part of getting Arduboy-Specific instructions.

Our code should look like this:

``````//Jonathan Holmes (crait)
//October 18th, 2016
//Printing Text

#include <Arduboy.h>
Arduboy arduboy;

void setup() {
// put your setup code here, to run once:

}

void loop() {
// put your main code here, to run repeatedly:

}``````

# The setup() Function

Sweet! I’m glad you got this far. Add the following lines of code inside of the braces of the setup() function:

`````` arduboy.begin();
arduboy.clear();
arduboy.print("Hello");
arduboy.display();``````

Notice that each line of code ends in a semi-colon ; . This is because all instructions in C++ need to end in one. Otherwise, the computer will think it’s something else that I’ll explain later.

Next, notice that all of these lines of code include `arduboy.` at the beginning. This is because our instructions are stored inside of the arduboy library.

Last thing I want you to look at is the parenthesis, ( and ) . All functions have these. Some include things inside of them and some do not.

The `arduboy.begin();` function pretty much tells the Arduboy to turn on properly. Once that is done, the next instruction is followed.

`arduboy.clear();` tells the Arduboy to erase everything on the screen.

`arduboy.print("Hello");` tells the Arduboy to write some text to the screen. Notice that we actually have something inside of the ( and ) this time. To tell the Arduboy what we want to print, we need to it inside of the parenthesis. Any time you’re working with text, you have to put quotation marks around the text, so we gotta do that, too. You can actually put whatever you want inside of those quotations. Maybe play around with it and put your own name into it.

Last, we have to tell the Arduboy to actually refresh the screen and show you what you just printed to it. That’s what the `arduboy.display();` does.

# You’re done!

That’s it! You’ve programmed your first program for the Arduboy! This is what the finished code should look like:

``````//Jonathan Holmes (crait)
//October 18th, 2016
//Printing Text

#include <Arduboy.h>
Arduboy arduboy;

void setup() {
// put your setup code here, to run once:
arduboy.begin();
arduboy.clear();
arduboy.print("Holmes is cool!");
arduboy.display();
}

void loop() {
// put your main code here, to run repeatedly:

}``````

# Installing

Like we did in the previous tutorial, connect your Arduboy with a USB data cable, select the correct port and board, then click the  button to transfer it to your Arduboy!

# Credits

This tutorial is copied and abridged from the original by Jonathan Holmes.

I wrote this tutorial in order to give back to the programming community that taught me to get into it about 10 years ago. If you’d like to follow me on Twitter, please do so at http://www.twitter.com/crait19 . I’d greatly appreciate that.