Scratch Tutorial: Making a Scoreboard

When making a game in Scratch, programmers might want to create a visual scoreboard to keep track of points—say, the number of coins you’ve collected, or baddies that you’ve vanquished.

This tutorial assumes you are have already used Scratch a little bit, and know how sprites, costumes, data variables, and broadcasting work. I‘ve put links in for the wiki pages of those topics if you haven’t, but it still might be confusing.

The easiest way to keep score is to create a data variable that you update whenever a point is scored. To show the score, just check the box next to that variable in your toolbox so that the value appears in the program.

That’s it! You’ve got a scoreboard in your game.

But…what if you want to make your scoreboard look like part of your game design, instead of just showing the Scratch version? And how do you make the score change? That’s where the fun begins, and I’ll show you how to do it. You can make your very own scoreboard, or do many other things with numbers in Scratch using what you’ll learn here.

Any time we want to show characters or graphics in a Scratch program, we’ll use sprites. If you don’t know how to use sprites yet, have a look at one of the Scratch starter lessons.

To make a basic scoreboard, I am going to use the built-in sprite images that come with Scratch. Inside the included sprite library are all of the letters in the English alphabet, and the digits zero through nine. We’ll be using the “pixel” versions so it looks like a video game scoreboard. If you want to find or draw your own digits zero through nine, you can do that too.

Costumes

The first thing we are going to do is open the “0-pixel” sprite into our project. Then, go to the costumes tab and load every other digit until you have zero through nine loaded as costumes for your sprite. Make sure they stay in order—0, 1, 2, 3, 4, 5, 6, 7, 8, 9—because we’ll tell Scratch to automatically flip through them to show the score as it increases.

Costumes are just a way to change the picture that shows for a sprite — so you can change how it looks during the game without having to make a whole new copy. For our scoreboard, we use the digits zero through nine as costumes so that we can change the scoreboard to look like a higher score whenever the data variable goes up. When there are zero points, we use the zero costume, when there is one point, we use the one costume, all the way up to nine. What about if you want to go past nine—to ten, one hundred, or one million? We’ll get to that later…

Updating your score

Once you have your costumes ready, it is time to start keeping track of the score. Once we are doing that, we’ll come back to the costumes and put in some code to make them change when the score changes.

First, you’ll want to make that data variable that I mentioned at the very beginning. Click on your sprite, then click the “Data” section of the toolbox, and click “Make a variable”. You can name this variable whatever you want, I suggest you name this variable “score”, since that is pretty obvious.

Once you have your variable, you need some code to make it change. The best way to do this in Scratch is to listen for a broadcast. Whenever something happens in your program that would make the score change, you can broadcast a message that the score sprite will receive, and then update the score for you.

Tip: Good programmers always name their variables to be as clear as possible about what data it holds, because when programs get very big there are lots of variables, and it gets hard to keep track of.

In the example project, I added a button sprite to make the score increase.

This sprite only has the following code:

Then, in the scoreboard digit sprite, I added this code:

What’s happening here? Well, whenever you click the button sprite, it will tell the rest of the program that it should increment the score (“increment” is a fancy way of saying “increase the number by one”). The scoreboard sprite is listening for that message, and whenever it receives one, it increases the score data variable by one.

In your game, you can broadcast the “score-increment” message whenever you collect a coin, kill a bad guy, or do any other action that should result in more points. Any sprite in your game can broadcast that message, so there are lots of ways to update your score.

Tip: You don’t need to increase your score by only one point every time. You could make different messages, like “score-plus-one” or “score-plus-ten”, so different game actions can have more or less points.

Math!?

Ok, so we now have a sprite with costumes, and we have a score variable that increments when we tell it to and changes the costume to match. But this only lets us keep track of a score from zero to nine points, which is pretty boring (unless you’re playing soccer!).

If we want to make our scoreboard go really high, we have to use more than one copy of our sprite, and each one needs to change its costume at the right time so the numbers work out. For example, if I want my score to go past nine points, I need to add a second digit next to the first one. When the first one gets to “9”, the next point scored should cause it to change back to “0”, while the digit next to it should change to “1"—which spells “10”:

Yep, going from “9” to “10” is actually kind of complicated, because two different sprites have to work together to show the right numbers!

For the next nine points, the first digit increases as usual, until again when it reaches “9”, and the next point scored should cause it to change back to “0” again while the second digit changes to “2”—for a score of 20. If we get the code right, these two sprites can make a scoreboard that starts at “00” and goes all the way to “99”.

The more sprites we add, the more numeric places we can fill to make our total possible score higher. The image below shows a scoreboard of three digits, which means there is a sprite in the ones place, tens place, and hundreds place. This scoreboard can go to 999!

But how do we make each sprite change at a different rate? This is where the math comes in, and a very special programming function called modulo.

First, let’s review how to change the costume whenever the score changes:

This part is pretty easy. The code above is doing two things: (1) whenever we restart the game by clicking the flag, we reset the score to zero, and also set the costume to show a “0” digit; and (2) whenever the score-increment message is received, we update the score by adding 1 to it, and then switch to the next costume. If we’ve put the costumes in order like we were supposed to, the picture will change from 0 to 1 to 2 to 3…all the way to 9.

The next bit of code we’re going to add is where the math comes in. So first I’ll explain what the modulo function does. Modulo is just a shortcut to calculate the remainder of any division. The Wikipedia page gives a good math definition, but it can be confusing so I’ll show some examples.

When you divide 9 by 4, you get 2.25. The remainder of this division is 1. If you remember your school arithmetic, this is because the “whole” part of 2.25 is 2, and when you multiply that by the divisor (4) you get 8. 9–8 = 1, so that’s the remainder. Here are some other examples:

12/6 = 2, and 2 x 6 = 12, leaving no remainder (12–12 = 0).

17/3 = 5.67, and 5 x 3 = 15, leaving a remainder of 2 (17–15 = 2).

122/9=13.55, and 13 x 9 = 117, leaving a remainder of 5 (122–117 = 5).

You can probably see by now that there are multiple steps to calculate a remainder, so the modulo function is very handy. Most programming languages use a “%” symbol to represent modulo; in Scratch they call it “mod” in the list of operators. So we could write 9 % 4 = 1 in program code to get the remainder for our first example in one step.

Whew, sorry about that! I bet you’re wondering how this relates to our scoreboard? Well, one thing that modulo is really handy for is figuring out if one number divides evenly into another. If the remainder is 0, that means the numbers divide evenly. Want your program to check if a number is even or odd? Just use modulo: if x % 2 = 0, then x is an even number, if x % 2 = 1, then x is an odd number. That’s pretty convenient!

Tip: It’s actually kind of important to know your math if you want to be a good coder. Computers are really just fancy math machines, so it helps a lot to remember your basic math.

For our scoreboard, we are using regular old base ten numbers.

In the ones place, whenever the score can be divided evenly by 10 we need to go back to the 0 costume.

In the tens place, whenever the score can be divided evenly by 10 we need to go up to the next costume, but if it can be divided evenly by 100 we need to go back to the 0 costume.

In the hundreds place, whenever the score can be divided evenly by 100 we need to go up to the next costume, but if it can be divided evenly by 1000 we need to go back to the 0 costume.

See where this is going? For each sprite, we can use modulo to make a decision whether we need to flip to the next costume, or reset back to zero.

Here’s the full code for the ones sprite, which is the simplest:

You can see how we are using the modulo (“mod”) operator: whenever the score increases, we need to know if the costume we show should go up to the next number, or if it should reset back to zero. Modulo lets us check if the remainder of (score % 10) is equal to 0, which means we have to reset—otherwise we go up to the next costume.

If this is confusing, don’t worry! This is actually pretty advanced programming stuff, and lots of programmers have a hard time learning it.

Now I’ll show you the code for the tens sprite:

You can see that there are two tests needed: first to see if the score divides evenly by 100, meaning that we need to reset, and second to see if the score divides by 10, meaning that we need to show the next digit costume.

I bet you can guess what the hundreds sprite looks like then:

That’s right, it is almost exactly the same as the tens sprite—we’ve just changed our mod tests to use 1000 and then 100 this time, since we’re working with bigger multiples of ten.

To use these sprites in your own project, just add each one and put it in the place where it belongs — the ones sprite in the far right position, then the tens to the left of that, and the hundreds to the left of that. If you want your scoreboard to go even higher, can you figure out how to copy the sprites and change the modulo tests?

Bonus: The Any sprite

I’ve created one more sprite in the sample project, and I’ll show you the code here. This sprite is called any:

Can you guess what this sprite is for?

The any sprite can be used for, yep, any spot in your scoreboard. What I did was add a second variable called “base”, which allows you to set the mod test value yourself. You can just duplicate this one sprite side-by-side as many times as you want, and change the “base” variable as needed to make as large of a scoreboard as you need.

Compare the “base” variable with the other sprites I already showed you—can you make any act like ones, tens, or hundreds?

This is an example of making a reusable component for your program. By using variables to change the settings of the sprite, a single sprite can be reused over and over again but configured to behave differently as need. That’s pretty efficient!

Conclusion

Well, that was a lot to learn, but I hope it helps you see how powerful the number functions can be in Scratch. There’s so much more you can do, and I’ve only shown you one special function!

I created a sample project in Scratch that has all of these sprites, so you can look at the code and click the button to see how the score changes each time. I have also created a project on GitHub to store the code, so you can download it and import the sprites right into your own project if you want.

Have fun, and happy coding! 😎