# Circuit Playground Express Spinner Game in MakeCode ## Introduction Create a fun spinner game with Circuit Playground Express and MakeCode. Press a button on the Circuit Playground to make animated lights and sounds that help you choose between options.   This is a great project for beginners or anyone who wants to get started making with Circuit Playground Express. There are so many different custom options within MakeCode!  Go wild! ## Spinner, spinner...What's for dinner? ![](https://cdn-learn.adafruit.com/assets/assets/000/065/320/medium800/makecode_spinner_done.jpg?1541624203) ### Part: Circuit Playground Express quantity: 1 Circuit Playground Express Microcontroller [Circuit Playground Express](https://www.adafruit.com/product/3333) ### Part: Battery Case quantity: 1 AAA Battery Case [Battery Case](https://www.adafruit.com/product/727) ### Part: AAA Batteries quantity: 1 Three AAA Batteries [AAA Batteries](https://www.adafruit.com/product/3520) # Circuit Playground Express Spinner Game in MakeCode ## Code with MakeCode MakeCode is Microsoft's drag-and-drop code editor.  It makes it easy for beginners and/or kids to get up and running with the Circuit Playground Express.  So many options are accessible and easy with MakeCode, and it's really fun to customize and play around with making blinky lights and sounds. Here's the completed project.  Or, follow along below to create your own project from scratch. https://makecode.com/_58TUY68k0dHC Go to [makecode.adafruit.com](https://makecode.adafruit.com/) then choose New Project.  You'll see a workspace, some tabs, and an interactive model of a Circuit Playground Express which you can use for testing your code.    ## Set Brightness & Loudness Click the **LOOPS** tblock and find the `on start` loop.  Drag it out into your workspace.  Anything that we put in this loop will happen just once, when the Circuit Playground first boots up.     Click the **LIGHTS**  block and drag an instance of `set brightness` into your `on start` loop.  This will set how bright your lights are.   I chose something not too bright -- 40-60 is pretty good for indoor use. ![makecode_onstart.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/273/medium640/makecode_onstart.jpg?1541611097) ![makecode_br2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/274/medium640/makecode_br2.jpg?1541611117) Now let's set the volume.  Click the **MUSIC** block and drag `set volume` into your `on start` loop after `set brightness`.  I ended up setting my volume to 200.  You can go back and adjust these values at any time. ![makecode_setvolume.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/285/medium640/makecode_setvolume.jpg?1541612243) ![makecode_setvolume2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/286/medium640/makecode_setvolume2.jpg?1541612256) That's it for the setup stuff.  Now let's move on to making stuff happen! ## Adding an Input Trigger Click the **INPUT**  block.  The Circuit Playground Express comes with lots of sensors and buttons and switches, so there are a lot of ways to trigger your lights and sounds.  You can have it trigger when you click one of the onboard buttons, or when you make a loud sound.  You can have it trigger when you shake the Circuit Playground or tilt it upside down.  There are even capacitive touch switch pads along the edge, so you can have it trigger when someone touches the Circuit Playground.  There are so many fun options! ![makecode_input.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/287/medium640/makecode_input.jpg?1541612455) ![makecode_buttonA.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/288/medium640/makecode_buttonA.jpg?1541612468) Keeping it simple, I chose `on button A click`-- so whenever you click the button on the left, Stuff Will Happen. First let's make a sound play when the button is pressed.  Click the **MUSIC**  block, and drag `play sound` into your `on button A click` loop.  Choose the sound you like -- I like magic wand -- and then give it a try!  Click the left button on the Circuit Playground image and see if your sound plays. ![makecode_magicwand.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/289/medium640/makecode_magicwand.jpg?1541612698) ![makecode_clickbutton.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/290/medium640/makecode_clickbutton.jpg?1541612846) This is such a cool feature. You can test your code on this virtual Circuit Playground every step of the way, to get it exactly how you want. Now we'll get to the meat of the project -- adding a light animation "spinner" that will spin for a while and then stop on a random light.  We'll use the built-in `Photon` animation for this.  We'll add some simple math to make it random, and also add some color changes, just for fun. Go to **LOOPS** and drag an instance of `repeat 4 times` into your on `button A click` loop below the `play sound` instance.  Then click the **MATH**  block and grab an instance of `pick random`.  Drag it onto your workspace and use it to replace the default `4` in the repeat loop. ![makecode_pickrandom.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/293/medium640/makecode_pickrandom.jpg?1541613252) ![makecode_repeatrandom.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/294/medium640/makecode_repeatrandom.jpg?1541613266) This is telling the Circuit Playground Express that we want the lights to move around the circle a random number of times each time the button is pressed.  I chose 20 as my low number and 100 as my high number.  There are 10 lights on the Circuit Playground's face, so this way it will always spin around at least twice, and no more than 10 times. Now we'll add the Photon light animation.  Click the **LIGHT**  block and scroll down to where the Photon section is.  You've got a number of different blocks here.  The way Photon works is similar to drawing a line of light with a pen.  You can choose the color, then put your pen "down" and draw forward or backward for as long as you like.  Then you lift your pen "up" again at the end to stop drawing. ![makecode_photon.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/297/medium640/makecode_photon.jpg?1541613609) ![makecode_photondown.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/298/medium640/makecode_photondown.jpg?1541613856) This is a deceptively complex animation.  There is a lot you can do with it when you start to incorporate variables and loops.   Drag an instance of `photon forward by 1` onto your workspace inside your `repeat` loop.  Now go click the button on the virtual Circuit Playground Express and see what happens. It appears to be working, but the animation is going so fast that it doesn't look like a spinner.  Let's slow it down a little bit. Under **LOOPS** , drag an instance of `pause 100 ms` into your `repeat` loop.   Try clicking the button now.  Much better!  But now it's a bit slow.  Play with the `pause` value until you get a satisfying spin.  I liked `50ms`. ![makecode_pause.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/300/medium640/makecode_pause.jpg?1541614085) Pretty cool!  Our spinner is working.  But right now it's just one color.  It would be a bit more fun if the color changed every time the button was pressed.  For this we'll need a variable, basically an invisible container that holds the color value as it changes.  Click the **VARIABLES** block and make a new variable.  We'll call it `color`.     Click back over to **LIGHT** and grab an instance of `photon set pen hue`.  Drag it into your `input` loop.  Then go back to **VARIABLES** and drag your new `color` variable into this block.  Now we can use this variable to set and change the color of the lights.     ![makecode_variable.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/301/medium640/makecode_variable.jpg?1541614442) ![makecode_setcolor.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/302/medium640/makecode_setcolor.jpg?1541614477) In the **VARIABLES** block, drag an instance of `change color by 1` onto the workspace and put it inside your `repeat` loop.  Changing the color by just 1 step each time is a bit subtle, so I changed mine to 2.  Try clicking your button again and see what happens!  Change the values around until you find something you like. ![makecode_changecolor.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/303/medium640/makecode_changecolor.jpg?1541614649) ![makecode_changecolor2.jpg](https://cdn-learn.adafruit.com/assets/assets/000/065/304/medium640/makecode_changecolor2.jpg?1541614879) You could also make this a random number (remember, that's under **MATH** ).  Customize it until you love it! ## Download to your Circuit Playground Plug your Circuit Playground Express into your computer using a USB cable.  You will see a rainbow animation appear the first time it boots up.  Click the tiny **Reset** button in the middle of the board and the lights will all turn red, then green.  When the lights turn green, a new drive will appear on your computer called **CPLAYBOOT**. In MakeCode, click the Download button to download your code to a file.  Drag this file onto the **CPLAYBOOT** drive.  The Circuit Playground Express will reboot and eject itself.  Click the buttons.  Now your code is working in the real world! If you're having trouble, head over to the [Circuit Playground Express tutorial](https://learn.adafruit.com/adafruit-circuit-playground-express/overview) for more troubleshooting ideas. # Circuit Playground Express Spinner Game in MakeCode ## Fancy it Up! ![](https://cdn-learn.adafruit.com/assets/assets/000/065/318/medium800/makecode_spinner_battery.jpg?1541624090) Plug in your batteries and switch it on.  Now it's time to create your game!  I've included a printable 10-space pie chart below, which you can print out and draw in your options.  Choose where to have dinner, what to name your baby, pick your favorite Princess, choose a sports team to follow, or incorporate your new spinner into an already existing game.  The sky's the limit! [graph.pdf](https://cdn-learn.adafruit.com/assets/assets/000/065/305/original/graph.pdf?1541619743) ![](https://cdn-learn.adafruit.com/assets/assets/000/065/319/medium800/makecode_spinner_done.jpg?1541624126) Pass the battery cable from the back to the Circuit Playground Express on the front. Attach the battery pack on the back and the Circuit Playground Express on the front. It is suggested you use an adhesive method that allows you to remove them if necessary, like BluTack or double-sided tape. Enjoy! ## Featured Products ### Circuit Playground Express [Circuit Playground Express](https://www.adafruit.com/product/3333) **Circuit Playground Express** is the next step towards a perfect introduction to electronics and programming. We've taken the original Circuit Playground Classic and made it even better! Not only did we pack even more sensors in, we also made it even easier to... In Stock [Buy Now](https://www.adafruit.com/product/3333) [Related Guides to the Product](https://learn.adafruit.com/products/3333/guides) ### 3 x AAA Battery Holder with On/Off Switch and 2-Pin JST [3 x AAA Battery Holder with On/Off Switch and 2-Pin JST](https://www.adafruit.com/product/727) This battery holder connects 3 AAA batteries together in series for powering all kinds of projects. We spec'd these out because the box is slim, and 3 AAA's add up to about 3.3-4.5V, a very similar range to Lithium Ion/polymer (Li-Ion) batteries and have an on-off switch. That makes... In Stock [Buy Now](https://www.adafruit.com/product/727) [Related Guides to the Product](https://learn.adafruit.com/products/727/guides) ### Alkaline AAA batteries - 3 pack [Alkaline AAA batteries - 3 pack](https://www.adafruit.com/product/3520) Battery power for your portable project! These batteries are good quality at a good price, and work fantastic with any of the kits or projects in the shop that use AAA's. This is a pack of **3 AAA batteries**. These batteries are Alkaline (MnO2) chemistry, with a... In Stock [Buy Now](https://www.adafruit.com/product/3520) [Related Guides to the Product](https://learn.adafruit.com/products/3520/guides) ## Related Guides - [Adafruit Circuit Playground Express](https://learn.adafruit.com/adafruit-circuit-playground-express.md) - [Glue Stick Light Pipe Sculpture](https://learn.adafruit.com/glue-stick-archway.md) - [Adabot Operation Game](https://learn.adafruit.com/adabot-operation-game.md) - [Make It Glow - Your First NeoPixel Project](https://learn.adafruit.com/make-it-glow-your-first-neopixel-project.md) - [Sparky the Blue Smoke Monster Automaton](https://learn.adafruit.com/sparky-automaton.md) - [Adafruit Circuit Playground TFT Gizmo](https://learn.adafruit.com/adafruit-tft-gizmo.md) - [Circuit Playground Express Sugar Glider](https://learn.adafruit.com/cpx-sugar-glider.md) - [Affordable HAL 9000 Replica](https://learn.adafruit.com/hal-9000-replica.md) - [Anatomical 3D Printed Beating Heart with MakeCode](https://learn.adafruit.com/anatomical-3d-printed-beating-heart-with-makecode.md) - [Distance Measurement with Ultrasound](https://learn.adafruit.com/distance-measurement-ultrasound-hcsr04.md) - [CircuitPython Hardware: ILI9341 TFT & FeatherWing](https://learn.adafruit.com/micropython-hardware-ili9341-tft-and-featherwing.md) - [Giant Mechanical Keyboard](https://learn.adafruit.com/giant-control-alt-delete.md) - [Scratch 3 Walkthrough and Demo](https://learn.adafruit.com/guide-to-scratch-3.md) - [Crickit Carnival Bumper Bot](https://learn.adafruit.com/crickit-carnival-bumper-car-bot.md) - [CRICKIT WobblyBot](https://learn.adafruit.com/crickit-wobblybot.md) - [Easter Egg Light Stand](https://learn.adafruit.com/easter-egg-light-stand.md)