How To Create A Reaction Game For The :GAME ZIP 64 And BBC micro:bit

Hiya, I am Hana from Kesteven and Grantham Girls School. I have always found software and hardware especially interesting and wanted to explore my interest in them outside the A-Level curriculum. I realised that coding my own algorithms was a way to express my creativity into a physical device which I could manipulate how I wanted it; whilst still learning and developing my technical skills. As I discovered more and more hardware and thought of new projects to create, Kitronik has allowed me to accelerate my learning by providing equipment online. Naturally, I reached out to the company and have had a wonderful week completing work experience with them which has not only improved my current skill set and my confidence in coding, but has also been extremely fun and rewarding.

We are going to build a reaction game using the Kitronik :GAME ZIP 64 for microbit; there are six stages that have been made to help guide your learning and construct your coding confidence! So, with that in mind, let's get learning.

What will this game do?

This game will display an icon on the main screen of the :GAME ZIP 64 and wait for the corresponding button to be pressed before the timer runs out. E.g: a left arrow is shown on the screen, if the left joypad button is pressed quickly enough, the player will score a point, if not (or if the player presses the wrong button) a buzzer will trigger and the game is over. In this version, a microbit V2 is used where vocal and physical input can be used, making this reaction game especially challenging.

Summary of Stages:

1. Creating icons that will be displayed on the screen
2. Using random variables
3. Creating a winning and losing function
4. Implementing sound
5. Adding a waiting function
6. Using all of the above skills to create a game

      ->   Troubleshooting

Stage 1 - Creating Icons that will be displayed on the screen:

In this stage, our goal is to:

• Learn about LEDs
• Control individual LEDs
• Develop at least 4 different icons to be used in our final game

So what is an LED anyway? An LED is a Light Emitting Diode- this means that it produces light when electricity is passed through it (when you switch it on) . You can see these on the display of  the ZIP64 and micro:bit LED matrix, but they are also (most likely) scattered around your house in the form of lightbulbs and other electronics. If you look close enough, you can see that each of the big squares on your ZIP64 are made up of 3 smaller smaller squares : each representing red, green and blue. These three primary colours of light can be mixed to create millions of different colours (16,777,216 to be exact), here is a colour chart to show you:

Let's code our very own LED to light up!:

• Select Advanced > Extensions > :GAME ZIP64
• Under GAME ZIP64, drag out “set display to ZIP64 8x8 matrix display” and place it under “start”

We are now going to code an algorithm to turn all of the lights red when button A on the microbit is pressed. An algorithm is a set of instructions to solve a given problem. This is how we change all the lights to one colour:

 

Notice that every LED on the ZIP64 has a number on top of it, let's use this to colour LED 34 to our own custom colour. To find our custom colour, we must access a web browser and type in: “RGB colour picker”, pick your desired shade and insert it into the following code.

Now that we have learnt how to manipulate pixels, we can now create our very own icons for our game! Let's consider this grid: This grid is a visual representation of the 8x8 set of LEDs the zip 64 has; this will make it easier to implement our designs. Let's take a left arrow:

 

Now we can see exactly which pixels to light up! There are two methods of implementing this code:

1. Colour Pixel 19	OR	1. Pixel = 33 // variable
2. Colour Pixel 26		2.Repeat 6 times
3. Colour Pixel 33		3. Colour Current Pixel
4. Colour Pixel 34		4. Pixel + 1
5. Colour Pixel 35		5. Colour Pixel 19
6. Colour Pixel 35		6. Colour Pixel 26
7. Colour Pixel 36		7. Colour Pixel 42
8. Colour Pixel 37		8. Colour Pixel 51
9. Colour Pixel 38		9.Display
10. Colour Pixel 51
11. Display

Method 2 is much more efficient as it uses less lines of code and takes less time to write out as programmers, however, you may use either method!

Challenge:

Now for the first major task of today, let's create some icons we can use in our game. We will need to create functions in order to do this (this sounds a lot more complicated than it is):

• To create a function: Select Advances > Functions
• Name your function something appropriate (e.g “DrawLeftArrow”)
• To display, just drag “call (functionname) “ into the start loop

Lets see some code to help guide you when making your own icons:

Can you create at least three more icons? For some inspiration:

• Draw a right arrow
• Draw an up arrow
• Draw a down arrow
• Draw a smiley face

Advanced challenge:

• Can you combine two icons together?

Some answers:

Stage 2 - Randomly selecting an icon:

In this stage, you should be able to:

• Use the random number generator setting bounds for its use
• Implement an IF statement
• Become more comfortable creating variables

• Let's start by creating a new function named “RandomlySelectingIcon”
• Let's create a variable named “NewRandomVariable”- you may have used a variable when addressing certain pixels, but lets go over them in depth.

In computer science, a variable is essentially a placeholder that can be changed and set throughout the program. We can name these anything we want but we normally call it something useful so we can remember what it is going to be used for.

To randomly generate a number (from whatever range you like), the following code is often used: 

This will select a random number from 0 to 6 inclusive.

As our icons are functions, we cannot just randomly select one of them in microsoft makecode; so we must enumerate them. This is a fancy way of saying we are going to be assigning a number to each icon. In my case, I have created 7 different icons, so to enumerate mine I did:

0 ->DrawLeftArrow

1 ->DrawRightArrow

2-> DrawUpArrow

3-> DrawDownArrow

4-> DrawShoutIcon

5->DrawLeftAndRightArrow

6->DrawUpAndDownArrow

Note: In computing we tend to start at 0 when labelling anything.

So, as we randomly generate numbers, we can correspond these to our icons using IF statements. An if statement is used when something is conditional, you will probably be using these in everyday life without realising, e.g you can watch TV IF you do your homework. The following code shows an example of this:

Challenge:

Can you complete this for all of your icons? Try displaying these on button A.

Advanced Challenge:

All of these statements are Else IFs and IFs, is there any way you can incorporate an else statement?

Answer:

Stage 3 - Winning and Losing

In this section we will:

• Learn and set up boolean expressions
• Start to set up “On Start”
• Set up two new functions to be used in our game

Now, We can start actually coding our game to incorporate the buttons on our zip 64. We are going to be using boolean operations to do this.

Our game is going to work like this:

• At the beginning, all the buttons which are going to be clicked are set to FALSE
• If a button is clicked, the variable stating if its been hit is set to TRUE
• On button A, icons will start to be displayed randomly, if the corresponding button is pressed, it will be set to TRUE and a point will be scored, if not, a buzzer will go off.

To do this, lets: 

• Create a new variable for each icon that has been made, i.e the DrawLeftArrow function corresponds to the new LeftButtonClicked variable
• Under :GAME ZIP64 drag “on button <button> pressed <clicked>” onto the blocks page
• Set your new variable to true (>logic> Boolean)

It should look like this:

Repeat this for every icon! (Leave the sound icon for now, wait until the next stage to implement this).

Let's start setting up our game!

On start:

• Start with the display settings we coded earlier
  • Set display to Zip64 8x8 matrix display
  • Display set brightness 50 (or whatever you would like)
  • Set any custom colours (I made pink)
• Create a new variable named “Score”
• Create a new variable named “Continue_Game”
• On start, set “Score” and “New Random” to 0 
• Set all “ButtonClicked” to FALSE

It should look like this:

Now to make a point scoring function:

• Create a new function named “Score_A_Point”
• Under Score_A_Point, set the display to black to clear the previous icon
• Set Continue to True
• Change Score by one (this adds one to the current score)
• Set all the “ButtonClicked” to FALSE
• Show number “Score” 

It should look like this:

What do you think our losing function is going to look like? Have a go and see if you are correct. Some points to include:

• Create a new function named “Lose_The_Game”
• Make the motor run for 100 ms
• Set the score to 0
• All the “ButtonClicked” will be set to False
• Setting Continue to False

Answer:

Stage 4 - Implementing sound:

In this stage we will:

• Learn how microbits acknowledge sound and explore other features of the V2 microbit
• Experiment with sound threshold code
• Incorporate sound into a special shout icon which will enable you to score a point if the sound threshold is met

The new V2 microbit used special magenta input blocks to register the sound around it. We want to produce an experiment to find the optimum sound threshold (and to double check the sound function on the microbit is working). To do this, in a new microbit file named “Testing Sound” input the following code:

Note: If you want to find more information about this, go to: Sound meter | micro:bit (microbit.org)

To test this, we can conduct the following experiment:

• Clap three times into the microbit
• Press button A to reveal the loudest sound - record this
• Press button B
• Shout three times into the microbit
• Press button A to reveal the loudest sound- record this

Compare these two values, perhaps ask friends and family to do this too and find an average sound level. Take 20 away from this value to find your optimum sound threshold, my value was 150.

 

Challenge:

Shout as loud as you can into the microbit and see the biggest number you can get it too; perhaps have a competition with your friends.

Now that we can use the sound function on microbit, lets implement this into our game.

To do this we must:

• On start, after setting New random number to 0, insert the block “set loud sound threshold to <your threshold>”
• Now insert the block “On loud sound”
• Set a new variable named “ShoutingThresholdMet” and set it to TRUE
• Adapt your Start, Score_A_Point and Lose_The_Game functions by setting “ShoutingThresholdMet” to FALSE underneath your last set “ButtonClicked” to FALSE

Here are some snippets of the adapted code to help:

Can you add some more features and icons to implement some more of microbits V2 features? Maybe add:

• A shaking function
• On logo function
• Directional function

Create a new icon for each one

Stage 5 - Adding a waiting function:

As our reaction game is like no other, why don't we randomise the waiting time between showing the two icons, depending on the score. This way, we can make the game get harder as it continues and make it more exciting.

To do this we must:

• Create a new variable named “Speed” and set it to 0 under “on start” underneath setting NewRandomNumber to 0
• Create a new (and final!) function called “WaitingTimeSpeed”.

We are now going to incorporate if statements with booleans!

Challenge:

Can you code this function? Here's some stuff to include:

• If the score (we set this up earlier) is less than 10, set the speed to a random number between 1000 to 2000
  • Pause the program by speed
• Else, set the speed to a random number between 500 to 1000 milliseconds
  • Pause the program by speed

Answer:

Stage 6 - Using all the skills from above to code our very own game:

We’re almost at the end! Congratulations for making it this far, we have done all the hard work now, it's time to assemble everything we’ve learnt into our very own game.

Our final reaction game will:

• Have an opening display
• On button B restart to the opening display
• On button A start the game

Lets finalise our “on start” section, we are now going to add some code at the end of our “on start” block to introduce the player to the game: You can be as creative as you like, I displayed a rainbow on the ZIP64 screen and displayed the letter A on the microbit screen to instruct the player that A starts the game.

Challenge:

• Can you create a colour shifting display on your ZIP64 to introduce the player by using while loops?
• Can you display a starting message on the microbit?

Answer:

Setting up “On Button B”

Button B on our game is going to reset the screen to the original display, so we can copy and paste our code for “on start” and change it slightly for button b. This will look like:

Note: You can make this different to your starting screen, it is your game - there's no limit to your creativity.

And the moment we have all been waiting for, assembling the whole game! This is going to include every aspect of what has been coded and every technique we have learnt.

To do this we must:

• Drag from input an “on button a” block to get started
• We need to clear the screen and the display of the main display to start the game
  • Can you remember how to do this?
• We also need to set “Continue” to TRUE (as this lets the microbit know that the game is okay to continue
• Set up a while loop for when continue is true
• Inside the loop we:
  • Call the function RandomlySelectingIcon
  • Call the function WaitingTimeSpeed
  • If the NewRandomNumber = 0, AND LeftButtonClicked = TRUE
    • Call the function Score_A_Point      
  • Else If the NewRandomNumber = 1 AND RightButtonClicked=TRUE
    • Score a Point
  • Repeat for all icons (corresponding to their random number)
    • Else Call the function Lose_the_Game

Challenge:

• Try to implement all of this code into your game, test it and watch it come to life!

Advanced Challenge:

• If some of your icons call for two buttons to be pressed, try implementing these using logical AND gates: e.g. for a left and right button, the random number = 5, RightButtonClicked =TRUE AND LeftButtonClicked= TRUE

Answers: 

You have successfully made your very own reaction game! Congratulations for coding all of these functions, logical and boolean expressions: hopefully you have learnt something in this process much like I have. Be sure to have a competition with your friends and family to see who can get the highest score. Thank you for coding along, Hana.

Troubleshooting :

Here are some common errors and how to fix them. You can't have success without mistakes, don't be disheartened if these set you back,it’s all part of the process.

My score being displayed on the microbit is slowing down the game:
Your microbit only has a limited amount of things it can do at once, waiting for two digit scores to display on its screen can take time. To reduce this, Under Score_A_Point, add the following  IF statement where the microbit screen will display a smiley face once the score hits double digits.

My random Icons are being displayed outside the range it's meant to be:

This is due to the set/ changing a variable. Under RandomlySelectingIcon you must set a NewRandomNumber to a completely new number each time, otherwise it will keep adding these on over each other

My icons are being displayed over each other:

Make sure to set the display to black after each loop to prevent this.

Game wont load until the message on the starting screen finished:

Add a “clear screen” outside (and above) the while loop on button A. Alternatively, do not use a long message but instead use a single character.

Here is all of the code I wrote:

 

References:

Image 1:

Primary colours and secondary colours | Fun Science. 2022. Primary colours and secondary colours | Fun Science. [ONLINE] Available at: https://funscience.in/primary-colours-and-secondary-colours/. [Accessed 06 April 2022].

©Kitronik Ltd – You may print this page & link to it, but must not copy the page or part thereof without Kitronik's prior written consent.