Here's a step-by-step guide to how I created this code, tested, and debugged it. Follow along for a fun ride through MakeCode Land!
Go to MakeCode.com and choose the Circuit Playground Express. Click New Project, and give your project a name. I called mine "Game Clock".
You'll see an emulator on the left, some tabs in the middle, and some open workspace on the right. Drag an instance of
on start from the LOOPS tab into your workspace. Anything inside this block will run just once, when the Circuit Playground boots up. Anything inside the FOREVER loop (which is probably already on your workspace) will run over and over, forever -- so that's where the bulk of our code will go.
Next, we'll set up our variables. These will allow us to set up things like duration and color choices right at the top, so if we want to change them later we don't have to hunt through all our code.
We're also adding a few variables we'll use for our timer:
counter, and one called
timerRunning so we can stop and start the timer. I'll talk more about what these all do later on.
Click the VARIABLES tab and create all the variables shown, then drag an instance of
set <variable> to 0 into the
on start loop for each one.
Good question. When I first wrote this code, I started with just one variable called
timer and made the rest as I discovered they were needed. You can always add more variables. These are the ones I ended up with after a bunch of experimentation. It's really hard to break anything in MakeCode so, please, feel empowered to experiment and try stuff -- that's the very best way to learn.
The cool thing about using variables is that now we can set them to whatever we'd like, and refer to them throughout the code. I can just ask for
color1 at any point, and if I change
color1 later on, it will automatically change everywhere. Nifty!
Choose a couple colors for
color2. You can find a color block in the LIGHT tab. Also, let's set our timer to 15 seconds for the moment, just for testing purposes.
We want our lights to come on one at a time when the timer is running, to count off the seconds. For this, we'll need a conditional statement. This is a bit of code that says: "If the timer has been started, Then (do these things)".
Click the LOGIC tab and drag the top
if/then statement into your FOREVER loop. Then, drag a
comparison block to replace the
true. Drag your
timerRunning variable into the first space, and change the second space to
1. Now, whatever we put inside will only happen if
timerRunning is set to
(So, to stop it happening later on, we'd just need to set
Now click the LIGHT tab and choose
set pixel color at 0 to red and drag that into your conditional if/then block.
Now go up to your on start block and change
1. Check your emulator. Look! The first pixel (at position 0) has lit up in red! It's working. Muahahaha...
For now, let's leave
1 so we can test our code on the emulator. Later, we'll set it back to 0 in
on start, and use the buttons to change it back to
1 to start the timer.
Now, let's assign it a color and see if we can make it count off the seconds.
0 with your
index variable (from the VARIABLES tab), and change the
red to your
color1 variable. Then, drag an instance of
change index by 1 right underneath the
set pixel color block.
Then, drag an instance of
pause 100 ms from the LOOPS tab, and change it to 1 second (
Check your emulator. The lights are counting up, one per second. Hooray!
What is happening here?
The FOREVER loop runs over and over, forever. So whatever's inside this block is running over and over (as long as
timerRunning = 1 as we specified in the last step).
Every time it runs, the index variable is increased by 1, thanks to
change index by 1. By adding the
pause loop and setting it to 1 second, we've got our index variable counting up by 1 each second, and lighting up the next light in the series each time it does that.
Now, let's tell it to count up until it reaches the number we chose for the timer variable, and figure out what we want it to do when the timer limit is reached.
Drag another conditional
if/then statement into your FOREVER loop. Make sure it's placed as shown: inside the
if timerRunning block but below the code you just wrote for lighting up the lights.
Add another comparison block, and set it up as shown so it reads
if index = timer then...
Anything we put in this block will now run if the count for the
index variable reaches the number we chose for
If the timer count is reached, it means that player lost the game! I want a sad sound to play, and the lights to all blink on and off in that player's color. Drag
play sound ba ding until done into this conditional block and choose your favorite "you lost" sound. Then, add
set all pixels to black,
set all pixels to red,
pause below that to make the lights blink on and off.
Test it with the emulator by letting the timer run for 15 seconds.
It's looking good, but when the timer runs out I'd like it better if the lights blink three times instead of just once. We can tweak this by adding a
repeat 3 times block around our blink code. This is found in the LOOPS tab.
It's working! The sound plays at 15 seconds and the lights all blink on and off. We're getting closer!
However, we've run into a bit of a bug. Our timer is set to 15 seconds, but there are only 10 lights on the Circuit Playground. So the last 5 seconds of the timer doesn't appear to do anything.
It'd be better if all the lights went off after 10, and started counting up from 1 again, wouldn't it?
We can rearrange our code a bit to make this work.
We need a variable that can count up to 10, then be reset to 0, then count up again. But we can't use the
index variable -- we need that one to be able to count up to whatever the
timer variable is set to. If we keep resetting
index to 0, we'd never reach 15.
Let's use our
counter variable instead.
We can think of
counter as indicating which of the 10 lights is being lit, and
index as counting off seconds.
Drag another conditional loop into your FOREVER loop, placed as shown. Add a comparison block, and make it read
if counter = 10 then. Anything inside this block will happen only if the
counter variable reaches 10.
set all pixels to black to turn all the LEDs off, and then add a
set counter to 0 block to reset counter to 0 so we can count up a second time (or a third time, for a 30 second timer, etc).
You'll also need to change the
set pixel color at index block to read
set pixel color at counter, and add
change counter by 1 so it counts up along with
Test it again on the emulator. It works great... once. But we want it to reset itself so we're ready to play again.
set index to 0 into the bottom of your
if index = timer conditional block, to reset the index count to 0 after the sound and lights play, so the timer is ready for the next round.
Lastly, I want the timer to stop running when the time runs out, and wait for a button press. So I've added
set timerRunning to 0 at the end of this bock.
Let's move on and set up the button triggers.
We want to trigger the timer by pressing a button or touching a capacitive touch code. For now let's start with pressing button A.
All the sensors and buttons can be reached from the INPUT tab. Drag on button a click into your workspace. Anything we put in this block will trigger whenever we press button A on the face of the Circuit Playground.
Take a minute and look through all the different inputs. There are so many ways to trigger your lights! Maybe come back and play with this more later.
First, let's assign
timerRunning to this button instead of having it run on startup. Change the
set timerRunning block in
on start back to
0, and add
set timerRunning to 1 to your button input block.
Now your timer will wait until someone presses a button to begin running.
Let's make a few more things happen when we press the button. We'll reset our
index variable (so it starts counting from 0 seconds again), and also reset our
counter variable (so it starts lighting pixel #0 again). We'll also
set all pixels to black so we're starting from a dark canvas each time.
Next we want to add in our
color2 variables, so we can easily customize colors for each player.
We'll want to make one more variable for this: I added a new variable and called it
whichColor. That way we can specify as many color variables as we want, and use
whichColor to quickly pick from the list.
whichColor is our friend because we can set it with the button press and then call it in our FOREVER loop, and whichever color was set by the button will automatically populate to our LEDs.
set whichColor to color1 block into your button A input loop. Then, change all the calls for a color in your FOREVER loop to call
Test it again on your emulator. See if changing your
color1 variable from red to another color in your on start loop actually changes the color on the LEDs. Try changing your timer length as well. This is a great time to hunt down and squish any bugs you find.
Granted, this does seem like a super complicated way to choose a color. However, since we did it this way, the next few steps become incredibly easy. Drumroll please... it's time to add more players!
Let's set up button B to be player two. You can simply select your
button A block, and copy/paste it onto your workspace. Change the dropdown to read
button B, and change your color to
color2, and voila! We've created a second timer. Test it out on the emulator to be sure you like how it works.
I added a sound to each of these blocks as well, to give a little more user feedback when the timer starts for each player.
Add more timers if you like! I added two more, and hooked them up to touch pad A2 and A5. Now the timers will reset whenever someone touches either of those copper pads on the Circuit Playground -- and it's fun to hook up alligator clips to capacitive touch pads and turn everyday objects into buttons. More about that on the Assembly page. For now, just make as many timers as you want!
Notice I also added a
color4 variable for these two players. Remember to also add those to the
on start block so you can define what colors you'd like them to be.
If you're hungry for even more lights, you can clip a NeoPixel strip onto your Circuit Playground with alligator clips, and get the strip to light up along with the timer as well. Here's how:
Start by telling the Circuit Playground that we have a NeoPixel strip on pin A1. This block is under the NEOPIXEL tab (you may need to click the LIGHT tab to see this one).
Anything in the NEOPIXEL tab will apply to the NeoPixel strip you've attached, whereas anything in the LIGHT tab applies to the lights on the face of the Circuit Playground.
set strip to create strip on A1 with 30 pixels into your
on start loop. If your strip has more than 30 pixels, change this block to reflect the number you have.
Now we'll set up another counter variable (let's call it
stripCounter) and repeat some of the steps above to make the code apply to the NeoPixel strip. Basically the only difference is that we're dragging blocks from the NEOPIXEL tab (that say
set strip..) instead of the LIGHT tab (that say
Here's a screenshot of how my code looks once I've added all the calls to
Take a look at the code you just wrote. It's complicated! Congratulations. It's doing a whole lot of things. From here, there are so many ways to tweak and customize the code. Some fun ideas:
- Try triggering the timer with a loud sound or a shake of the Circuit Playground instead of a button.
- See if you can get the colors to light up in a rainbow instead of a solid color.
- Try adding a five-second warning beep before the timer finishes.
- See if you can light up multiple NeoPixel strips, one for each timer.
Have fun playing!