Lesson 4
If Statement
Let's solve the Super Hard Challenge from last lesson.
In order to keep the square from moving off screen we are going to use the && operator in our if statements.
This is an empty if statement
if ( ) { }
First you obviously have the if.
Next to the if you see two parentheses ( ). This is the condition.
Last you have the { } brackets. This is the code that will run if the condition is met.
What we want to do is add another condition to this if statement so that the code doesn't run until ALL the conditions are met. We will do this with an AND.
The Size of the Screen
If we want the moving square to stay on the screen we need to know how big our screen is.
The screen is 128x64 pixels.
The (0,0) pixel is on the upper left corner.
X gets larger moving to the right.
Y gets larger moving down.
So the (128,64) pixel is on the bottom right of the screen.
Our variables playerx and playery control the X and Y position of our moveable square.
If we want the square to stay on the screen, we need to limit playerx to a range of 0 to 128 and playery to and range of 0 to 64.
Operators
The && operator means AND. It will let us add more conditions to an if statement.
We want our new if statements to say "Hey, change the playerx variable IF the button is pushed AND the playerx is in the right pixel range... otherwise don't do anything!"
This will limit the square to the screen... or does it?
Make the changes to your if statements by adding the operator && and the new conditions as seen in the picture.
Notice how there are two conditions and they are BOTH inside the ( ) parentheses.
Load the code and see what happens? Does the square stay on the screen?
Have you noticed how the square now won't move off the top of the screen nor the left but does leave the right and bottom edges?
This happens because our square is 5 pixels wide and tall. That's what the 5s stand for when we used the arduboy.fillRect function to draw the square:
arduboy.fillRect(playerx, playery, 5, 5, WHITE);
Because the square is drawn 5 pixels wide and 5 pixels tall from the top left corner of the square (just like the screen's 0,0 is on its top left corner) those drawn parts will stick out over the edge on the right and bottom.
We can account for this problem by reducing the X and Y limits in our conditions by 5.
Make the changes and load this code. Now your square should stay on the screen.
Adding Text
Drawing moving squares is cool. But you know what is cooler? Writing text.
Most games and apps have text. Use the arduboy.print() function to add text to your screen.
arduboy.print("Hello World");
Put this line early inside your loop() just after the arduboy.clear() function.
We are going to use this to make a score for our first game!
By adding the above code we printed the words "Hello World" onto the screen. We can move the text around by using the arduboy.setCursor() function before we use arduboy.print() like this:
arduboy.setCursor(32, 25);
arduboy.print("Hello World");
The 32,25 coordinates puts the text in about the center of the screen.
Notice how the "Hello World" is in quotation marks? This tells our program to print exactly what is inside those quotation marks. If we don't add the quotation marks the program will look for a variable of the same name.
Create a variable called score and set score equal to 0. (This will be the last time you'll be given the code to define a variable!)
int score = 0;
Now change your code. Replace "Hello World" with just score so that the program prints the value for score.
arduboy.print(score);
Challenges!
Regular Challenge 1: Move the score to the bottom right of the screen.
Regular Challenge 2: Make score increase by 1 by using arduboy.pressed(A_BUTTON)
Hard Challenge: Can you make the score go back to 0 by pressing two buttons at the same time?
The Complete Code
#include <Arduboy2.h>
Arduboy2 arduboy;
int playerx = 5;
int playery = 10;
int score = 0;
void setup() {
// put your setup code here, to run once:
arduboy.begin();
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();
arduboy.setCursor(32, 25);
arduboy.print(score);
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;
}
if (arduboy.pressed(A_BUTTON)) {
playerx = 0;
playery = 0;
}
arduboy.fillRect(playerx, playery, 5, 5, WHITE);
arduboy.display();
}