Lesson 8: Simon - Arrays

Transcription

1 Lesson 8: 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 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 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 Re design the game interface images using arrays this Test your Project Save Save your project Page 1 - Lesson 8: Simon - Arrays

2 Step 1: Play the game 1. Open the game Simon then CodeClub > SimonSays 2. Play Simon Says Whats your top score? Write it here Step 2: Understanding the 1. Open the game Simon then CodeClub > Simon00 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 Page 2 - Lesson 7: Simon - Arrays

3 Step 2: Understanding the 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! } Page 3 - Lesson 7: Simon - Arrays

4 Step 2: Understanding the 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! 6. Code comprehension Let s look at that bit of in detail, it is called a for loop. It is a neat way of compacting a lot of repetitive 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. Page 4 - Lesson 7: Simon - Arrays

5 Step 3: Re-design the arrows screens 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 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. Page 5 - Lesson 7: Simon - Arrays

6 Step 3: Re-design the arrows screens 3. Open the arrays sketch then CodeClub > Arrays Change the up array to your design. { // up { // up Test your project 4. Test your This will just check that the first edited array for the up arrow is understood. 5. Not compiling? 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. Page 6 - Lesson 7: Simon - Arrays

7 Step 3: Re-design the arrows screens 6. Find the down array in the Change the down array to your design. { // down { // down B Test your project 7. Test your This will just check that the first edited array for the down arrow is understood. Page 7 - Lesson 7: Simon - Arrays

8 Step 3: Re-design the arrows screens 8. Find the left array in the Edit the ones and zeros to display the new design you have just created. { // left B , B , B , B , { // left B , B , B , B , B , B , Test your project 9. Test your This will just check that the first edited array for the left arrow is understood. Page 8 - Lesson 7: Simon - Arrays

9 Step 3: Re-design the arrows screens 10. Find the right array in the Edit the ones and zeros to display the new design you have just created. { // right B , B , B , B , { // right B , B , B , B , B , B , Test your project 11. Test your This will just check that the first edited array for the up right is understood. 12. Remember If things go really wrong, reopen the sketch and try again 13. Upload and Test to transfer the onto the Arduino in the DIY Gamer. Is it now displaying your versions of the arrows one after the other? 14. Save your sketch Go to File > Save as. Save your Sketch as SimonYourName Page 9 - Lesson 7: Simon - Arrays

10 Step 4: Design the Go, Right and Wrong screens 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] = { B , B , B , B , B , B , B }; 2. Re-design the arrays for; go, tick and cross Edit just the same as you did for the arrow arrays. Page 10 - Lesson 7: Simon - Arrays

11 Step 4: Design the Go, Right and Wrong screens Test your project 3. Test your Happy with everything? 4. Upload and Test to transfer the 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 Save your project 5. Save your sketch Go to File > Save as. Save your Sketch as SimonYourName 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. Page 11 - Lesson 7: Simon - Arrays

12 Annotated sketch Your 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 }, { // down Page 12 - Lesson 7: Simon - Arrays

13 Your should now look like this... { // left B , B , B , B , }, { // right B , B , B , B , } }; // This is our GO! image byte go[8] = { B , B , B , B , B , B , B }; // This is our tick image byte right[8] = { B , B , B , B , B , B , B , B Page 13 - Lesson 7: Simon - Arrays

14 Your should now look like this... }; // This is our cross image byte wrong[8] = { B , B , B , B }; 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