Materials from the Teach Computing Curriculum created by the National Centre for Computing Education

You can only choose artwork when coding.

Algorithm design can be used to describe what some or all of program will do.

Designing before coding helps you to think through what's needed for your program and how it will work.

Designing a game

﻿Hello, and welcome to Lesson five of our "Variables in Games Unit." I'm Andy and in this lesson, you're going to look at turning your design into code. As with previous lessons, you'll need a web browser and access to the Scratch website. If you'd like to save your work, you'll need to have a Scratch account. If you don't have a Scratch account, you'll need to get a parent, carer or teacher to set an account up for you. You'll also need something to write on, and something to write with, and your designs from last lesson. So if you'd like to clear away any distractions, then we can start. In this lesson, you'll use your design to create a project. You'll add artwork to your project. You'll name variables, with names that identify their roles. And you'll test the code that you write. We're going to start by thinking who uses plans or instructions? I'll give you a moment to think of where plans and instructions are used. Plans and instructions are used by lots of people in their jobs. We might, for example, think of architects who design buildings. Builders then follow those plans to make sure the building is what the architect wanted, what the architect had designed. In programming, your algorithm determines the code that you will need to create your project. So we're going to think about variables in a programme first of all. A variable is something that can be set and changed throughout the running of a programme. You're going to look at a simple chatbot programme. Think about what is being set and changed during the running of the programme. So there's a link that you'll need to go to to look at a project, try the project out, and think about where variables might be being used. You don't need to look at the code of the programme yet. So, please pause your video now. So this is the Scratch project I asked you to have a look at. So if I click on the robot, it'll ask me a question, "What's your name?" So I can type my name in, Andy. "Hi, Andy." it says. "How old are you?" Well, I'm 21 of course. "Are you 21 years old?" Well of course I am, "Yes." "Oh good, I've used variables well." Okay, so the robot programme was using variables, using them in such a way that it means that anybody can use it and different people can type in different names and different ages, but the robot can talk back by using those variables. So in a moment, I'd like to go back and have a look inside the programme. I'd like to see if you can find the variables and see what their names are. And think about whether the names of the variables help you understand what that variable does. If those aren't helpful, see if you can think of better names. So for the task, you need to go back to the project and have a look inside it and answer the questions on the worksheet. So please pause the video now. I hope you found the variables. So have a look inside now and see where they were and what they do. So this is the code, and if I look down the code, I've got set variable B, and it's there again. Set variable A. I can also go and look into the variable panel of Scratch. If I go and click down there, I can see the two variables. So, we can read through the code and see what it does. We've got, "Ask, what is your name?" And variable B becomes that answer. And it says, "Hello, name." And variable A is the answer to "How old are you?" And it's used there where it says, "Are you, variable A, years old?" If I tick these two boxes, we can actually see the variables on the screen. And we could just run this again so we can see them working. So, "What is your name?" I'll be Fred this time. "Hi, Fred." And we can see here, variable B has changed to Fred. And I can put in an age and we can see variable A has changed. So in terms of the names of the variables, do you think these are helpful names? I'm not sure they are. Variable B is for the person's name. Perhaps it could have just been called Name. And variable A is for the person's age, perhaps it could have just been Age. So we might just change these two variable names to be Name and Age. In fact, I can go over here and change them. I'm going to rename B to "Name." And I'm going to rename A to "Age." And actually we can see them on the screen, which is helpful. And if the program's not running, we can also see them in the code. So if you look at the code side by side, we have A, which was the original code, with variable B and variable A. And we have the right-hand side labelled B, and that's got the variable names changed to Name and Age. I'll give you a moment to look at the two. Which do you think is easier to read? I think B is much easier to read. When I can see the variable name as Name and Age, it's far easier for me to understand what the code does. So, I'd like you to look back at your designs from the previous lesson. What variable will you need in your code? It's something that's set and changed in your game. What is set and changed in your game? I'll give you a moment to think, and if you've got designs, you can look at them. Okay, I think the key thing is the score. As the game runs, you're catching different things, and it's the score that changes. As you're looking at the rest of this lesson, I'd like you to think about other variables that could be added to your project, and it's something we'll visit next time. So, what you're going to do is you're going to create your catching game, which is going to include a score and at least three falling things. And ideally, each thing could fall at a different speed. Firstly, you're going to add your own artwork. That's the sprites in the background. There's a template provided that you can use. So add your artwork to the project template and then you can come back to this. So pause the video now. Hopefully you've now added your artwork. This was my artwork I chose last lesson. So I have to falling star, the ghost, the beach ball, and the blue sky. And I'm going to go and add that now. Here I am, ready to add my artwork. So I need to go down to the bottom of the screen and click on the little choose sprite icon or the magnifying glass. Click on that, and I'm looking for- Oh the beach ball, there it is. That's one of them, I'll add that. There's one new sprite. And I need to go and add the ghost still. Where's the ghost? There's the ghost. That's the ghost added. So I've got my images here. And the stage, I need to go and look for- Oh I chose the blue sky. So there's the blue sky. So that's it, I've now got my sprites. And I've got my sky. I'd like to think about the size of these a little bit. So the ghost is very big. I might choose to make that small. I can just quickly put in a smaller amount. Let's just try half the size, that's pretty good. And the ball, I go and click on the ball. And I think that should be smaller too. I'll try half the size and see if that looks okay. Yeah, that's okay. Maybe a little bit bigger. I can go back and change that if I want to. There we go. So here's my algorithms from the last lesson. I've got the falling star, and the ghost, and the beach ball. And each one does slightly different things. So the star, it falls down the screen. It moves down the screen from a random position at the top. If it touches the bowl, it adds five points to the score. If it touches the bowl or the bottom of the screen, it falls again from the top. So I've got the key things I need to put into my code. It falls and it comes back to the top, and the bowl catching it adds five points. So I can now start turning my algorithms into code. So I've got my artwork down here. There's the screen bottom. There's the bowl that was already in there. And there's its code to make it move. There's the star, it already has some code with it. And I've added the beach ball, there's no code on that. And I've added the ghost. So the first thing I think I'd like to fix is I'd like to get the score working. So I said that when the star is caught, it adds five to the score. So I need a score. I don't have a score yet, that will be a variable. And I can go to Make Variable, and it's going to be Score. And so now I've got my score, and I can see it up here at the top of the screen. So I need to think about where that goes. So I'm on the star, this is it's code. I can check it there. And I said it got five points if it was caught. So this is the bit I want changed. I need to just work out where it goes and change how much. So, here's the loop. This is the speed the star falls at, eight steps each time. If it touches the bottom of the screen, go back to the top. If it touches the bowl thing, then go- But yes, the bowl is the bit I want to add to. So I need to just snap that bit in there. So when it touches the bowl, go back to the top and add to my score. And I chose it would be five. So best thing to do when you're coding is to test as you go. So if I now run the programme, the only thing falling is the star. And I can straight off see that my score is increasing. So that bit is definitely working. There we are, I've got 15 points already. I press Stop. I can reuse that code for the other sprite. It will be similar with some little changes. So the falling speed might be changed. And how many points you get could be changed. I can duplicate the code by dragging it. So if I take, this is the star's code, if I take that code and drag it down to the beach ball and let go, that's the star's code still. If I click on the beach ball, there's the beach ball's code. So they now both have code. I can even check that it just works. Ah, so the ball now moves, but it's moving at the same speed as the star. I'd like that to be different. So I'll need to make some amendments and changes here. So nearly time for you to start coding. Okay, so remember your task is to create a catching game. You've already got the artwork added. Ideally, you should have three things falling, which give different scores, and they fall at different speeds. So you're looking at implementing your algorithm as code. You should have your algorithms in front of you 'cause they're your guide. That's what you're going to follow. So the task now is to start doing some of your coding and follow your algorithm to make that code. So please pause the video now and start coding! Hopefully you've made some good headway with that. I've just gone back to my algorithms to check what I decided to do. So the star falling added five points. The ghost took off five points. And the beach ball added one point. So, I need to go and add a little bit more to my code. So I've got some of my code. I need to make sure it matches my algorithm. So this is the ball's code, and it's got Change Y By minus eight. That was the same speed as the star. I'm going to go back and change that in a little bit. I didn't put it in my algorithm but I've got a feeling I'll need to change it. And the score, the ball was worth one. So I'm going to change the ball to be worth one. So as I've said before, you should always check your code as you go along. So I can run it. And the ball, there we are, I've got one point for the ball. And the star, I've got five points. Okay, so that's good. But the ball is falling at the same speed as the star and it's only worth one point so it should be easier to catch. So I'm going to try slowing it down. Minus four, so that's four steps at a time down the screen. We'll just try that again. That looks better straight off. I can see the ball is a bit more catchable because it's moving more slowly. So, the ghost isn't doing anything. And the ghost should take points off. It was take five points off. So I can reuse the same code again. I'm going to drag that onto the ghost. And there we are, that's the ball's code. This is the ghost's code. And if we run it again, the ghost is now moving. It's moving at the same speed as the ball but at the minute it's adding points, and I want it to take points off. So I'm going to change it so that it takes five points off the score 'cause ghost is a meanie. And I'm going to make the ghost move faster so it's harder to avoid. So let's try that. There we go. So I'm trying not to- Alas! I'll just check it. Yep, it's taking points off quite quickly. There we go. So, I have code on all of my sprites. Their points that they add or take off matches my algorithms. And the last thing I need to do for now is I've got a score here but I want it to start at zero every time. If I press the green flag, it just carries on. I can click on this, but the green flag is the start and it's not actually changing anything. So I think on the screen bottom sprite, which doesn't really do anything, just sits there, I'm going to add a set score to zero to that. So when the game starts, it goes to zero. Perfect, I can see the points changing. Press Stop, try it again. It goes to zero. So there we are, we've added a little bit more code. And you'll need to go back and test your programme now or make a few tweaks and changes to make sure it matches your algorithm. So your last task in this lesson is to go and test your code. Check it does what your algorithms defined it would do. And check everything works as you intended it to. And then maybe one or two little tweaks you want to make. So pause the video now. So in this lesson, you considered the programming task. You thought it through, what needed to be done. You worked from your design and you created code. So you looked at the artwork and you added that. And then you added the code to make it do what you wanted. And then you ran the code and you tested it. And you tested it again to ensure that the code did what you wanted it to. So that's the end of this lesson. If you'd like to share your work with Oak National, that would be great. You can share screenshots, those kinds of things. If you'd like to share it, please ask your parent or carer to share your work on Instagram, Facebook, or Twitter, tagging @OakNational and using the #LearnWithOak. That was the end of this lesson. Looking forward to seeing you next time.

Lesson overview:Design to code

Core Content

Variables in Games: