In this activity we’re going to create a little game about a frog that’s been stranded in the middle of the highway and tries to avoid cars zooming by. The game is going be a little bit too easy to play with the mouse, but we’re going to make it quite more challenging by programming a little microcontroller with MicroBlocks that’s going to act as a simple game controller.
I’ve drawn all the graphics for the game using Snap!’s vector image editor. You’re of course free to create your own, but I’ll be attaching them here just in case you want to use the same ones.ç
Snap!
The Stage: A Multi-lane Highway
Let’s start by setting the stage background to a multi-lane highway:
To import it, first select the stage by clicking on the corresponding icon under the stage:
Next, just drag and drop the .svg file into Snap!, and the image will automatically be imported as a stage background.
The Frog Sprite
That’s all we need to do for the stage. Let’s go back to the main sprite by clicking on its icon under the stage:
This sprite is going to be the frog that tries to avoid incoming traffic. Thus, it’s going to need two costumes. One for when it’s happily avoiding cars, and one for when, well, for when it’s not avoiding them anymore 
As before, just drag and drop these two images into Snap!, and they’ll be converted into costumes for the currently selected sprite:
After importing them, make sure to give them appropriate names in the Costumes tab by right-clicking on each costume and selecting “rename” from the context menu. I’ve named mine “okay” and “not okay”:
While we’re here, let’s change its name from “Sprite” to something more meaningful, like “Frog”, by using the text input box at the top of the IDE:
The first thing the frog is going to do when the green flag is clicked is to wear the “okay” costume, which we’ll achieve with the following code:
However, in relation to the size of the highway this frog is absolutely huge. Let’s set its size to 50%:
Next, we need to get the frog to always follow the mouse pointer, and to make the movement smoother we’re going to make use of the glide block, like this:
Notice we’re using a very small number of seconds (1/10th of a second) in order to make the movement smoother, but not sluggish.
The Car Sprite
First, we’re going to add a new sprite by clicking on the 
button, just below the stage.
Just as we’ve just done for the Frog, let’s also rename this sprite into something more adequate. “Car” will do, for example.
This sprite is going to have just one costume. You can use this one, or draw one yourself:
Just like before, you can drag and drop the image file into Snap! and it’ll be imported into the currently selected sprite.
The idea is for the car to appear from the top of the stage and move towards the bottom at a constant speed. The vertical (or y) coordinates of the stage go from -180 at the bottom to 180 at the top, but we want the car to start off-stage, so we’ll place it further up than the top of the stage:
Then, we want the car to move downwards until it reaches some coordinate way below the bottom of the stage. Something like this would work:
Finally, we want this to happen constantly after we click on the green flag:
Now, each time the car comes back from the top, it’d be nice if it did so from a different horizontal (or x) coordinate. The stage’s x coordinates go from -240 at the left to 240 at the right, but we don’t want the car to ever appear partially off-stage, so:
The Endgame Condition
Up to here we’ve gotten the basic movement of all sprites working, but games are no fun if you can never lose!
One way to end the game is to have the frog detect when the car has touched it, and then have it change to the “not okay” costume and stop every other script in the frog scripting area. The world may have ended from the frog’s perspective, but not from the car’s!
This is now a complete game, and even though we can -and will later on- improve it some more, it’s now time to build the physical controller with MicroBlocks.
MicroBlocks
The MicroBlocks script is extremely simple. It consists of a single forever loop that constantly broadcasts the x and y tilt values for the microcontroller board. First off, unless it has already been auto-loaded by MicroBlocks, we’ll need to import the “Basic Sensors” library from the library browser, which we can open by clicking on the “Add Library” button.
Once the “Basic Sensors” library is loaded, we can move on to creating the tilt broadcaster script.
Now, the only complex part in the MicroBlocks side of things is that we need to create a string -that is, a piece of text- that contains an “x”, a comma, and the value of the tilt x sensor, and then the same for tilt y. To do so, we’ll make use of the join block in the “Data” category:
And this is the extent of our work in MicroBlocks. We can now go back to Snap! again.
Snap!
Connecting to the Microcontroller Board
First off, we’ll need to import the MicroBlocks library, which we can do by clicking on the “Libraries” option from the project (
) menu.
Once loaded, we’ll first want to connect to the board. It really doesn’t matter which Snap! sprite makes the connection. You can also choose whether you want to have the controller connected via cable (USB) or wirelessly (BLE). In the latter case, you’ll need to provide power to your board via a battery pack.
In the browser dialog box that pops up, select your board and click on “Connect”:
MicroBlocks and Snap! are now talking to each other, and Snap! is now constantly receiving all these x and y messages as regular messages. To confirm that this is happening, you should see a blinking LED next to the USB connector in your board:
If you don’t see the blinking LED, try unplugging and plugging back your board, and then reconnect from Snap!.
Receiving Data from the Microcontroller
To receive the “x” and “y” values we can just use regular when I receive hat blocks, like so:
It is important, in our case, to expand the block so that it shows the data variable, which is going to contain the actual value for the “x” and “y” messages, like this:
Next up is to store this data into two separate variables so that our Frog sprite can use it to position itself.
We need, thus, to create two variables by clicking on the 
button at the top of the the “Variables” category. Let’s name them something like “x” and “y”. The code that receives and stores the data should look like this:
Using the Data from the Microcontroller
Now that we have the tilt sensor values, we need to use them in the Frog sprite instead of the mouse position. Let’s first naively try to just replace mouse x and mouse y by x and y:
That sort of works, but the range of movement is very small. The values reported by the sensors go from -100 to 100, whereas the stage’s coordinates go from -240 to 240 for the horizontal one, and -180 to 180 for the vertical one. Thus, to get the full range, we’d need to multiply “x” by 2.4 and “y” by 1.8:
And now the game is playable!
Improvements
Reconnect Only if Needed
Of course, there are many, many rough corners in this game. To begin with, every time we click on the green flag the game tries to reconnect to the board. Let’s only do it when the board is not actually connected:
Give the Player a Bit of a Head Start
The car starts driving as soon as the green flag is pressed, which doesn’t give the player much margin to get the frog where they want it to be. This is easily solvable by just adding a little wait before the car’s forever loop:
Sound Effects
All games need sound effects. Here’s one you can use for when the frog is ran over:
And here’s one you can use for the car’s engine:
To download them, right-click on the sound players above and select “save audio as”, or something like that. Then, drag and drop the sound files to Snap! while the appropriate sprite is selected.
Use the play sound block to trigger them. Here’s one possible place where you could play the frog sound:
Further Explorations
Here’s a list of things that you could work on, but for which I’m not giving you solutions. These are enhancements that may take a little more exploration time to implement. Feel free to ask for help if you get stuck:
- Add a title screen. It could have a “Play” button that starts the game.
- Add a points counter. It should reset to 0 when the game starts, and increment by one every time a car is avoided.
- Add a “game over” screen. If you’ve added a points counter, you could display the final number in this screen.
- Record and use more sounds! What about a “croak” sound that plays randomly from time to time?
- Have the car sound play at different pitches each time.
- Have the car go slightly faster each time.
- Add more cars!
- After the frog is ran over, the car currently on screen should be allowed to go on, but no further cars should come from the top.
Challenges
These explorations are beyond the scope of this workshop, and you may want to work on them some other time, but I’m listing them anyway in case you want to give them a shot!
- If you’ve added multiple cars, make sure they don’t collide with each other.
- Let cars run in opposite ways.
- Make the frog jump when pressing one of the board buttons. While jumping, the frog can’t be ran over and the board
xandyvalues shouldn’t affect it’s position. If you’ve implemented points, jumping over a car could grant an extra point.
Your workshop was fully booked with 30 children and their parents.