An accelerometer is a sensor that detects gravitational pull on a device. If a device is moving slowly or sitting still it is one of the best ways to detect orientation of an object. Think of a cell phone… When you turn the phone screen from vertical to horizontal the accelerometer of your phone is the sensor that detects that orientation change and you phone rotates your screen accordingly. We can do the same thing with the micro:bit and use it to build amazing controllers with the Code-a-Key Backpacks.

When you have everything together assemble the Code-a-Key backpack, Makey Makey and BBC micro:bit as shown on the instruction card included with the Code-a-Key backpack. Remember, when plugging the micro:bit into the backpack the LED array should be pointing out from the backpack. 

The first step in building this tilt controller is to program the BBC micro:bit. Connect the micro:bit to your computer USB port using the micro B USB Cable that came with your micro:bit. 

Next, open up your web browser to the Microsoft MakeCode page for the micro:bit and start a new project.

To use the Code-a-Key backpack with the micro:bit, we need to first add the Code-a-Key Extension to your MakeCode project. Click on the Extensions drawer and put “Code-a-Key” in the search bar of the Extensions window. The Code-a-Key Extension should be the only package that shows up. Click on the image to add it to your program. 

With the Extension added, we can now create our MakeCode program! Start by pulling the initialize Makey Makey block from the Makey Makey drawer and place it inside the on start block. This will set everything up correctly for the micro:bit to be able to use the Code-a-Key backpack.

One best practice that we recommend for programs that use the Code-a-Key backpack is to also add a visual feedback on the LED array at the start of your program to let you know that the micro:bit is done initializing everything. We do this by adding the display icon block after your initialize block. The icon choice is up to you, but we like to use the heart icon! 

Now, from the Input drawer, bring in the on shake event block. This event block is an event block that executes the code inside of it depending on the physical orientation or gesture of the micro:bit. If you click on the drop down of “Shake” you will see all of the different orientations you have to choose from. For this first event block, select tilt left from the menu. 

Now, whatever code blocks you place in this event block will be executed when you tilt the micro:bit to the left. We want the micro:bit to press the ‘a’ key to move when we tilt left and therefore move the paddle of the Bouncy Face to the left. To do this, grab a press key W from the Makey Makey drawer and place it inside the on tilt left block and change the key being pressed to 'a'.

We do want to add a second code block to release any other key that might be pressed. Grab the release key block and change the ‘w’ to the ‘d’ key. So, when the micro:bit is tilted left the ‘d’ key is released and the ‘a’ key is pressed.

With the first event block completed, we now need to duplicate (right click on the event block and select 'duplicate' it two more times. But, you will need to change the two new events to be triggered by something other than tilt left! We need one to trigger with on tilt right and the other one to trigger when on screen up. 

The on tilt right event block is used to move the paddle to the right, so we want to change the code to say: on tilt right release A and on tilt left press D. 

Finally, the screen up event block should stop all movement (not moving right or left). This means that both keys (A and D) should be released.  

When you complete your program, double-check that all of your key presses and releases match our example, and then download the code to your micro:bit. When your code is done being downloaded to your micro:bit, the icon you chose should show up on the LED array. 

You can find our complete example code here! 

NOTE: If you are having trouble downloading your code to your micro:bit review the Getting Started guide for the Code-a-Key backpack or the instructions on the MakeCode website. 

TIP: For debugging purposes, you might want to add a display icon or show leds to show your micro:bit is pressing the key when you tilt left or right. However, once you are sure your code is working, you’ll want to take this display code off as it will delay the speed at which your controller presses left or right. 

Now that you have successfully coded your tilt controller with the micro:bit and Code-a-Key backpack it is now time to test it out with the Bouncy Face app!

Open Bouncy Face App

Open the Bouncy Face game! Before jumping in and playing the game, it will take some basic setup to change the controls to the propper keys for your controller to work. In the settings on the right side of the window change the LEFT PADDLE to trigger with the A key press and for RIGHT PADDLE to tilt with the D key press. 

Before you start the game, plug your Makey Makey into your USB port on the computer. The micro:bit should light up, and the LED array should show the icon you set in your program!

Now, click the play button on the app! To move your paddle to the right, tilt your Makey Makey controller to the right. If you need to move it to the right, tilt it to the right. To stop moving the paddle, hold the controller level with the LED display pointing up. 

If Your Controller Doesn’t Work…

• Test the game with the A and D keys on your computer keyboard! You may have forgotten to change the game settings. 
• Check that the micro:bit is running your code! Double check your program and make sure you have the correct presses and release blocks. Download your code again! You can find our example code here and try uploading it to your micro:bit!
• Make sure your Makey Makey is plugged in! You are using two different USB cables, it is easy to get things confused. 

You now have a controller that responds to tilting. Install your controller on something interesting… a balance board, skateboard, or even a hat and play Bouncy face or any other game that uses A and D as right and left controls! 

For more fun projects, check out:

Code-a-Key Project #0 Hello World

Code-a-Key Project #1 Stomp Switch 

Code-a-Key Project #2 Bouncy Face Tilt Controller (This guide)

Code-a-Key Project #3 Flashlight Piano