 I've been spending around 10 minutes each morning practicing my touch typing, then I thought, hey, why not just make a game? So in this tutorial, I'm going to show you how I went about making a typing speed test game that also includes some advanced clone usage. Stick around till the end as well, and I'll share with you how to store your score in the cloud, all this coming your way. Hello world, Surfing Scratchy here, teacher, server programmer, and on this channel, I make how-to coding videos for curious learners and educators. If you dig in this content, then consider hitting that subscribe button down in the bottom corner to stay in the loop. Hey, if you're an educator in the house and you want news and resources sent straight to your inbox, then consider joining the Surfing Scratchy mailing list linked below in the description. But hey, let's get stuck into this touch typing speed test game. All right, here we are in the typing speed test game. In this game, you will press the green flag, and we'll use some clones to duplicate a character to type this sentence. If you click the screen, you will need to start typing this, and the characters will turn green. Our time increments, and if we make an error, we will add that to the time at the end. We also use cloud variables here to log the fastest time. Currently, that's me, and I challenge you to try and better that. We'll discuss cloud variables in a future video. For now, let's jump into the Scratch Project Editor. As always, I'll link to a startup project where you can go and grab that, and you'll find that in the description. Okay, let's have a little walkthrough of the Scratch Project. I've just got a background here that I found on becdeasy.com in the backdrops, and I've also got one sprite here called character. If we jump into the costumes, you'll see that I've just got a text field, and I've inputted every single character, or lowercase, as a costume. The names correspond to the letter that it represents, so if I click X here, you'll see that the costume name is X, and this name is going to be important for us to reference later. Back over here in the code tab, I've got a comment block here with a bit of a guide that we're going to go through. The first thing that we need to do is generate this sentence. It's the quick brown fox jumped over the lazy dog, and we're going to generate that quite simply as just a text field. Just gone ahead and copy pasted that sentence into this field, and the length of it is 44. We're going to loop through this string and add each character to a list, and that list is going to be called sentence. So let's go create that list. Just going to click make a list, and we're going to call it sentence. Press enter, sentence is now up on the screen. Okay, so we're going to repeat for the length of this sentence, and what we want to repeat is adding a thing to sentence. Now, before we even go ahead and do this, let's make sure that we delete everything in the list sentence. That's so we've just got a fresh copy of it before we start working with it. If I click this now, you guessed it, 44 things, but that's not what we want. So let's go ahead and delete that. In order to loop through every character of this sentence, we're going to need a counter variable, and we're going to call that variable i. So make a variable and i. And i stands for index, and index just refers to the position of the character in this string here. So position one will be one. When we start this sequence, we actually want to set i to be equal to one, and that's so we can reference the first spot. And every time we loop through this, we need to change i by one. And the thing that we're going to be adding is we want to be finding the letter of the current index, which is one of this sentence. So now if I click this block of code, we should have all the characters of that sentence listed in our list here, and we do. I like to do one more thing with this block of code because it performs one single action. And when we have a block of code that performs a specific action, I like to create a block out of it. And we're just going to call this block generate sentence, because that's what it actually does. It generates the sentence. And now what we can do is we can connect that together. And whenever we call generate sentence, we know that we're going to generate this sentence here. Okay, so I'm just going to refer to our plan here, and I've ticked off generate sentence, because that is what we've done. The next thing that we need to do is take this sentence and we need to print it on our computer screen here. And the way we'll do that is we're going to be using clones to first position the first character and then duplicate it on the screen. So let's go do that. Print sentence is going to look a little similar. We're going to use a repeat block. And we're going to repeat for the length of sentence. And the action that we want to repeat is to create a clone of itself. Now if I press this, it's very hard to see. There's a purple X here. What are we going to do to make this a bit clearer? Set the brightness effect to 100. So if I click this, our character becomes white. Now we've just gone and created all these clones and we can see them all here now. But that's not what we want. We don't want them all in this position. We want to scatter them across the screen. So we're going to need to jump into our motion category and check out some motion blocks. Okay, I've just got our character in a starting position. So I'm going to get the go to X and Y block just to make sure that it always goes to that position. After we've created the clone, we need to move the sprite across. How far should we move it? Well, we're going to create a mono space font. That means it's going to have the same distance. And I recommend you going into the costume and looking at these dimensions here. Got 14 by 31. 14 meets the width and 31 meets the height. So if we change the X by 14, we'll have the same distance every single time. And we know that's the width of these characters. Now I've scrolled down this list and checked for the sprite that has the greatest width. And that is 16. So we're going to change the X by 16 after we've created the clone. This code isn't finished yet because if we click it, this X is just going to print in one long line and we don't want that. So we need to keep track of how many characters we've created. We've already got a variable to use and that is the I variable. So we're going to set I to 1. And we want to check if I is equal to some number. Now this number I'm just going to put in as 16. We're going to grab that and put it inside that if condition there. If I is equal to 16, we want to reset the X back to its starting position. That means we're just going to set X back to 80. Then we need to change the Y going down. Do you remember the height of this sprite from a moment ago? If you don't, it's cool. It was 31. So we're going to change the Y, not by 31 because that would be going up. We want to change the Y by negative 31. There's just a couple of more additions that we need to do to our block of code here. We need to change the value of I by 1. Now if we click this, see what happens? Yes, the first row is great. We stop at 16, but then the second row is over. And that's because I is only ever equal to 16 once. So what we need to do is in multiples of 16, we need to start a new line. And the block that we're going to use to do that is the mod block. Remember the mod block is just division. So if we divide by 16, we'll get the remainder. And if it's 16 divided by 16, there'll be no remainder. And that'll give us the clue to go to our next line. So when I mod 16, so I basically divided by 16, we get the remainder. If there is no remainder, then we want to start a new line. Okay, let's test that out. Boom, there we go. Okay, I'm pretty happy with this block of code. So what I've done is just wrap that inside of a custom block called print sentence and I've ticked it off. But you'll notice that we've got X's over here in our characters. So we actually need to do one more thing here and create the when I start as a clone and change every character to the corresponding character that's in the sentence list. Let's go do that now. We're going to need a way to reference each letter or each character in this sentence list. And I recommend the best way that we do that is to use this i, this index variable that we've got in the print sentence method. So what we can do is switch to costume, the item of sentence, and the item that we're looking for is i. So this reporter block will give us the name of the character. And remember in our costumes, when we went through and named them, we gave them all these names. So this will return the name and we will switch to that costume. So if I go ahead and print the sentence now, you'll see that the sentence prints on the screen but we've got a little bit of a bug here. And the reason for that is where we're changing i. So this is slight delay between us changing i and when the clone is created. So rather than changing the value of i in our print sentence, I recommend that we just change it when we start as a clone. Just like this. Now if we print sentence, the quick brown fox jumped over the lazy dog. If you don't want this X showing, you can just go into the costumes, scroll all the way to the bottom and hit space. And there you go. It disappears. So we've just about finished our when I started as a clone and we're ready to move on to user input. And that means changing these keys to a different color when the user hits that key on the keyboard. We're going to need to create a reference to each of the clones. And the way that we're going to do that is by creating a variable. Now this is important. We're going to call this variable char ID and it's going to be for this sprite only. We want each clone to have its own version of char ID. So when we start as a clone, we want to set char ID to the current value of I. And you notice that we'll change our every time a clone is started, which means every clone will have its own ID. Okay. Now we need to respond to some user input. I've gone ahead and dragged out the when the key is pressed block and I've gone and accounted for every single letter that is on the keyboard. I've also created a custom block called validate letter and I'll pass in the letter that was pressed. So when M was pressed, I'm going to call validate letter and pass in the letter M. I've done that for every letter that's on the keyboard. And you can see back up here that I've got my custom block defined validate letter and my letter as a parameter. To help us validate the user input, we're going to need another list. And I'm going to call this list user attempt and it is going to record the user's attempts. I'm going to use the length of user attempt which is currently zero. And I'm going to add one to it. This will now return one. So this is always going to return the next position of the item in the sentence. So I can check to see if the item of sentence is equal to this index here. So I'll place that in. So if the item currently one of sentence, this will return the T in the sentence list if I click it and it does. So now we can check to see if letter is equal to the next value that we're passing in. There we go. I just do some zooming out so you can see that block in its entirety. So this block here is the condition for our success. So if a success has occurred, then we can add the letter not to sentence but to the user attempt. Then user attempt will have an item in its list and we'll be checking for the next item in sentence. But connect this up now. It should work. I'll press T. There we go. We've just got a T inside user attempt. If I press a different button, say Y, it doesn't work. But now I press H and boom and it comes. So now we need to signify some success. What I've done is add a couple of looks blocks. I'm setting the color to this green color which you can't tell and I'm resetting the brightness back to zero. If I start typing the sentence, you'll see that my user attempts are filling in but it's only this character sprite that's actually changing. I've also got a say block in here just for some feedback. So what's going on here? If I drag these blocks outside of the if statement and I continue with my sentence, you'll see that they all go. So we've got a bit of an issue here. The way that we're going to get around it is by using the character ID, the char ID of the character sprite so we can just target the individual clone. So if this char ID is going to be equal to the length of user attempt plus one. If I reset this here, you'll see that we've got no user attempt. So that's why we need to add one to the initial one. So these will always be on par. Let's chuck that inside of an if statement and then we can wrap this if statement that's already in the validate letter in the one that we just created. Then if I hit the T, there we go. The H and the E, we're in business. I'm going to get rid of this say block because that's a little bit annoying. I hope this underscores the importance of using local variables for clones and being able to reference them individually. Okay, I've just added a couple of blocks here. I'm just going to go through them to finish off this tutorial. So when the green flag is clicked, we delete the user attempt. We generate the sentence and we print it. We wait a second and then we start a clock ticking sound and then we start the game. In start game, we reset the timer and we repeat until the length of the user attempts is equal to the length of the sentence because that means that we've entered in every single character of sentence. We're going to set the time variable to the timer and then when that's finished, we're going to play the win sound. 7.392, not bad. I haven't included the errors, but if you wanted to include errors, you would do that logic inside here. Instead of an if statement, you would have an if, else statement and then log the errors. But I'm not going to do that. That could be a challenge set for you. And comment down below to let me know what time you scored on this project. We've also got the cloud variables to set up. We're going to do that in a new video, which is coming your way shortly. It's time for a scratchy question. And if you're up for it, I'd love for you to post the time that you got in the comment section down below. But even better, I'd love for you to track your PB over a few days and then we can celebrate the changes and the growth that you've made. Thanks for checking out this typing speed test game tutorial. If you found it useful, then smash that like button. If you're loving this content and you're an educator, consider joining the surfing scratchy method, link below in the description. Down there, you can also find a link to my funky red bubble tea if it's of interest to you. But until then, I'm off to go find a wave. I'll catch you in the next one.