lesson 7: simon - arrays · page 1 - lesson 7: simon - arrays introduction: as arduino is written...

- Lesson 7: Simon - Arrays

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

Lesson 7: Simon - Arrays

Test your Project

Type code Type this code

Keep track of your progress by ticking off the boxes below:

Play the gameStep 1:



Activity Checklist

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

Activity Checklist

Understanding the codeStep 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 code

Activity Checklist





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

Type code

Activity Checklist


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 framenumber of the animation to display. It keeps adding 1 to the value of i, until it gets to4.

gamer.clear(); //clearThis line clears the gamer screen.

delay(100); //waitThis line makes the gamer wait for 100 milliseconds.

gamer.printImage(framesSimon[i]); //printThis line makes the gamer display the frame of the animation held by the variable i

delay(300); //waitThis 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.




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


Re-design the arrows screensStep 3:

Activity Checklist



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


Activity Checklist

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

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

Type code




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.


Activity Checklist

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




Click

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

Test your project

7. Test your code


Activity Checklist

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




Click

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

Test your project

9. Test your code


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?

Activity Checklist

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




Click

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

Test your project

11. Test your code


Activity Checklist

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!” imagebyte 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 screensStep 4:




Design the Go, Right and Wrong screensStep 4:


Click

Happy with everything?

Test your project

3. Test your code

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:

Find the delays and alter them to change the speed of playback.

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 imagesbyte framesSimon[4][8] = { { // up B00000000, B00011000, B00111100, B01111110, B00011000, B00011000, B00011000, B00000000 }, { // down B00000000, B00011000, B00011000, B00011000, B01111110, B00111100, B00011000, B00000000




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

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

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




};

// This is our cross imagebyte 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);

}



lesson 7: simon - arrays · page 1 - lesson 7: simon - arrays introduction: as arduino is written...

Documents