Lesson 7: Simon - Arrays · Page 1 - Lesson 7: Simon - Arrays Introduction: As Arduino is written...
Transcript of Lesson 7: Simon - Arrays · Page 1 - Lesson 7: Simon - Arrays Introduction: As Arduino is written...
Page 1 - 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:
Lesson 7: Simon - Arrays
Page 2 - Lesson 7: Simon - Arrays
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
Page 3 - Lesson 7: Simon - Arrays
Keep track of your progress by ticking off the boxes below:
Understanding the codeStep 2:
Lesson 7: Simon - Arrays
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
Page 4 - Lesson 7: Simon - Arrays
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.
Keep track of your progress by ticking off the boxes below:
Understanding the codeStep 2:
Lesson 7: Simon - Arrays
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
Keep track of your progress by ticking off the boxes below:
Re-design the arrows screensStep 3:
Activity Checklist
Page 5 - Lesson 7: Simon - Arrays
Lesson 7: Simon - Arrays
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
Page 6 - Lesson 7: Simon - Arrays
Activity Checklist
{ // up B00000000, B00011000, B00111100, B01111110, B00011000, B00011000, B00011000, B00000000
{ // up B00011000, B00111100, B01111110, B00000000, B00000000, B00000000, B00000000, B00000000
Type code
Keep track of your progress by ticking off the boxes below:
Re-design the arrows screensStep 3:
Lesson 7: Simon - Arrays
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.
Page 7 - Lesson 7: Simon - Arrays
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
Keep track of your progress by ticking off the boxes below:
Re-design the arrows screensStep 3:
Lesson 7: Simon - Arrays
Click
This will just check that the first edited array for the down arrow is understood.
Test your project
7. Test your code
Page 8 - Lesson 7: Simon - Arrays
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
Keep track of your progress by ticking off the boxes below:
Re-design the arrows screensStep 3:
Lesson 7: Simon - Arrays
Click
This will just check that the first edited array for the left arrow is understood.
Test your project
9. Test your code
Page 9 - Lesson 7: Simon - Arrays
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
Keep track of your progress by ticking off the boxes below:
Re-design the arrows screensStep 3:
Lesson 7: Simon - Arrays
Click
This will just check that the first edited array for the up right is understood.
Test your project
11. Test your code
Page 10 - Lesson 7: Simon - Arrays
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
Keep track of your progress by ticking off the boxes below:
Design the Go, Right and Wrong screensStep 4:
Lesson 7: Simon - Arrays
Page 11 - Lesson 7: Simon - Arrays
Keep track of your progress by ticking off the boxes below:
Design the Go, Right and Wrong screensStep 4:
Lesson 7: Simon - Arrays
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
Page 12 - Lesson 7: Simon - Arrays
Lesson 7: Simon - Arrays
Your code should now look like this...
{ // 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
Page 13 - Lesson 7: Simon - Arrays
Lesson 7: Simon - Arrays
Your code should now look like this...
};
// 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);
}
Page 14 - Lesson 7: Simon - Arrays
Lesson 7: Simon - Arrays