Lesson 8: Simon - Arrays

(1)

Introduction:

As Arduino is written in a basic C programming language, it is very picky

about punctuation, so the best way to learn more complex code is to pick

apart existing ones. In this session, you are going to hack the game Simon so

you can re design the images. You will start by working on a stripped backed

version, giving you the opportunity to write some code to get it working and

change its functionality. Once working, you can then pick it apart further and

try to work out the logic.

Goals

• Play Simon

• Look at the logic of some of the code

• Re design the game interface images using arrays

Activity Checklist

Save your project

Save

Test your Project

Type

(2)

progress by ticking off the boxes below:

Play the game

Step 1:

1. Open the game Simon

Click then CodeClub > SimonSays

2. Play Simon Says

Whats your top score? Write it here

1. Open the game Simon

Click then CodeClub > Simon00

Understanding the code

Step 2:

2. Find the inclusion of the gamer library

This is included in every DIY Gamer sketch and should now look quite familiar

/*

* SIMON SAYS! (images)

* A TWSU Gamer game by YOU!

* This lesson is about arrays and images! */

#include <Gamer.h> // Include the Gamer library Type

(3)

Understanding the code

Step 2:

3. Find the referencing of the gamer library

This is where the gamer library is called upon to do its magic

/*

Create an “object” - a copy of the DIY Gamer library, which contains commands for controlling the display, buttons, and everything else on your console.

*/

Gamer gamer;

4. Find the referencing of the gamer library

This happens once at the beginning.

void setup() {

gamer.begin(); // Fire up the Gamer! }

Type code

(4)

6. Code comprehension

Let’s look at that bit of code in detail, it is called a ‘for loop’. It is a neat way of compacting a lot of repetitive code into a few lines. This will in effect display all 4 arrow images one after the other.

Lets break it down line by line:

for(int i=0;i<4;i++) {

This line starts the ‘for loop’ and creates a variable called i that will hold the frame number of the animation to display. It keeps adding 1 to the value of i, until it gets to 4.

gamer.clear(); //clear

This line clears the gamer screen.

delay(100); //wait

This line makes the gamer wait for 100 milliseconds.

gamer.printImage(framesSimon[i]); //print

This line makes the gamer display the frame of the animation held by the variable i

delay(300); //wait

This line makes the gamer wait for 300 milliseconds.

} //and so on!

After the closed bracket, it then returns to the top of the for loop and checks the value of variable i again.

Understanding the code

Step 2:

5. Find the void loop function

This happens again and again as long as the gamer has power.

void loop() {

for(int i=0;i<4;i++) { gamer.clear(); //clear delay(100); //wait gamer.printImage(framesSimon[i]); //print delay(300); //wait } //and so on! Type code

(5)

Re-design the arrows screens

Step 3:

1. Find the up, down, left and right arrays that are used in the game

Remember these from the earlier sessions. You should be able to read the ones and zeros as on and off LEDs. This one is the image for the up button.

{ // up B00000000, B00011000, B00111100, B01111110, B00011000, B00011000, B00011000, B00000000

2. Design your new screens for arrows on the paper game design worksheets

Use the squares array templates to design your own personal version of the up, down, left and right buttons. They could be smaller, bigger, to the edge, full screen. The choice is yours.

Type code

(6)

Activity Checklist { // up B00000000, B00011000, B00111100, B01111110, B00011000, B00011000, B00011000, B00000000 { // up B00011000, B00111100, B01111110, B00000000, B00000000, B00000000, B00000000, B00000000 Type code progress by ticking off the boxes below:

Re-design the arrows screens

Step 3:

Click

This will just check that the first edited array for the up arrow is understood.

Check your array is still 8 by 8 and that you have not deleted anything other than the array ones and zeros. If you can’t solve it, simply re-open the sketch and start again.

Test your project 4. Test your code

5. Not compiling?

3. Open the arrays sketch

Click then CodeClub > Arrays

Change the up array to your design

(7)

6. Find the down array in the code

Change the down array to your design

{ // down B00000000, B00011000, B00011000, B00011000, B01111110, B00111100, B00011000, B00000000 { // down B00000000, B00000000, B00000000, B00000000, B00000000, B01111110, B00111100, B00011000 Type code progress by ticking off the boxes below:

Re-design the arrows screens

Step 3:

Click

This will just check that the first edited array for the down arrow is understood.

(8)

8. Find the left array in the code

Edit the ones and zeros to display the new design you have just created.

{ // left B00000000, B00010000, B00110000, B01111110, B01111110, B00110000, B00010000, B00000000 { // left B00000000, B00100000, B01100000, B11100000, B11100000, B01100000, B00100000, B00000000 Type code progress by ticking off the boxes below:

Re-design the arrows screens

Step 3:

Click

This will just check that the first edited array for the left arrow is understood.

(9)

12. Remember

14. Save your sketch 13. Upload and Test

If things go really wrong, reopen the sketch and try again

Go to File > Save as. Save your Sketch as SimonYourName

Click to transfer the code onto the Arduino in the DIY Gamer. Is it now displaying your versions of the arrows one after the other?

10. Find the right array in the code

Edit the ones and zeros to display the new design you have just created.

{ // right B00000000, B00001000, B00001100, B01111110, B01111110, B00001100, B00001000, B00000000 { // right B00000000, B00000100, B00000110, B00000111, B00000111, B00000110, B00000100, B00000000 Type code progress by ticking off the boxes below:

Re-design the arrows screens

Step 3:

Click

This will just check that the first edited array for the up right is understood.

(10)

1. Find the arrays for; go, tick and cross

This has the term byte at the beginning and a name. A byte is a the term for one single image or chunk of information. The name will be used to summon this particular array.

// This is our “GO!” image byte go[8] = { B00000000, B01101110, B10001010, B10001010, B10001010, B10101010, B01101110, B00100000 };

2. Re-design the arrays for; go, tick and cross

Edit just the same as you did for the arrow arrays.

Type code

Design the Go, Right and Wrong screens

(11)

Design the Go, Right and Wrong screens

Step 4:

Click

Happy with everything?

5. Save your sketch

Go to File > Save as. Save your Sketch as SimonYourName

4. Upload and Test

Click to transfer the code onto the Arduino in the DIY Gamer.

You should now have your DIY Gamer displaying all the images you have designed for your version of Simon Says. Next you need to get the buttons working.

Save your project

Save

Well done!

You have used your knowledge of arrays to start to design your own game assets.

Challenge:

(12)

Annotated sketch code

Your code should now look like this...

/*

* SIMON SAYS! (images)

* A TWSU Gamer game by YOU!

* This lesson is about arrays and images! */

#include <Gamer.h> // Include the Gamer library /*

Create an “object” - a copy of the DIY Gamer library, which contains commands for controlling the display, buttons, and everything else on your console.

*/

Gamer gamer;

/* You should create your own arrays with your own images! */

// These are our arrow images byte framesSimon[4][8] = { { // up B00000000, B00011000, B00111100, B01111110, B00011000, B00011000, B00011000, B00000000 }, { // down B00000000, B00011000, B00011000, B00011000, B01111110, B00111100, B00011000, B00000000

(13)

{ // left B00000000, B00010000, B00110000, B01111110, B01111110, B00110000, B00010000, B00000000 }, { // right B00000000, B00001000, B00001100, B01111110, B01111110, B00001100, B00001000, B00000000 } };

// This is our “GO!” image byte go[8] = { B00000000, B01101110, B10001010, B10001010, B10001010, B10101010, B01101110, B00100000 };

// This is our tick image byte right[8] = { B00000001, B00000011, B00000111, B00001110, B11011100, B11111000, B01110000, B00100000

(14)

};

// This is our cross image byte wrong[8] = { B11000011, B01100110, B00111100, B00011000, B00011000, B00111100, B01100110, B11000011 }; void setup() {

gamer.begin(); // Fire up the Gamer! }

void loop() {

for(int i=0;i<4;i++) { gamer.clear(); //clear delay(100); //wait gamer.printImage(framesSimon[i]); //print delay(300); //wait } //and so on! gamer.clear(); delay(100); gamer.printImage(go); delay(300); gamer.clear(); delay(100); gamer.printImage(right); delay(300); gamer.clear(); delay(100); gamer.printImage(wrong); delay(300); }