Are you interested in creating your own games, launching your own apps, or even building your own robot? You can do that with coding! It’s actually much easier than you might think. During our Code From Scratch workshop, we’ll be releasing weekly coding tutorials for you to try out at home. Each tutorial will explain the project in simple terms and provide step-by-step instructions on how to finish the project. During our first few projects, we’ll be coding with apps that can be found on Windows, Mac, and Linux systems like the Raspberry Pi, but eventually we’ll be creating real world projects with breadboards, wiring, LEDs, motors, and more!
Project 12: Candy Catch!
For this weeks Code From Scratch tutorial, we’re going to be creating a Halloween themed game called Candy Catch!
To follow along with this tutorial, open up a new project using the button below…
What's Our Goal?
We’re going to break down this project into a few simple steps…
Goal #1: Create Sprites & A Background
Goal #2: Move The Candy Bowl Sprite
Goal #3: Make The Candy Appear
Goal #4: Make The Candy Fall
Goal #5: Make The Bowl Catch The Candy
Goal #6: Score Points For The Candy
Step 1: Create Sprites
For Goal 1 of the project, we need to create the graphics for our game. To do this, we’re going to delete the cat that Scratch adds to every project. Once the cat is gone, we can select new sprites to represent our Candy & Candy Bowl. We will also pick a background.
Select Delete Sprite: Click on the Trash Can icon to delete the old sprite (the cat).
- Why: Scratch automatically adds a cat to every project. Since we don’t need the cat as our main character, we can delete it.
Select Choose A Sprite: By hovering your mouse over top of the “Choose A Sprite” button (which looks like a blue circle with a cat icon on it), you can either choose a pre-made sprite (by selecting the magnifying glass icon) or draw your own sprite (by selecting the paint brush). For this tutorial, you need to select two sprites: The Bowl and The Candy. You can change the size of these sprites by adjusting the “Size” number in the Sprite Selection area.
- Why: We’re going to want to add a bowl (or other item) to catch the candy with and the candy! We’ve decided to go with the pre-made bowl, but if you want to create Jack O’ Lantern bowl then you can use the paint brush to draw your own!
Select Choose A Backdrop: By hovering your mouse over top of the “Choose A Backdrop” button (which looks like a blue circle with a picture frame icon on it), you can either choose a pre-made backdrop (by selecting the magnifying glass icon) or draw your own backdrop (by selecting the paint brush).
- Why: We’re going to want to add a bit of color to our background, so choose a backdrop from the pre-made list (magnifying glass icon) or draw your own (paint brush). We’ve decided to go with the pre-made “Woods” backdrop, but you can use the paint brush to create a custom backdrop if you want!
Step 2: Move The Bowl
In this section we show you how to code your bowl. We want the player to be able to move the bowl left and right by clicking the arrow keys on their keyboard…
Select the Bowl sprite: By clicking on the Bowl sprite, you will be able to add code to it.
- Why: Since we want our Bowl sprite to catch candy, we will add code to it so it can move side to side. In Scratch, you need to choose which sprite you want to code before choosing any code blocks.
Select When Green Flag Clicked: Drag over the “When [Green Flag] Clicked” block (Events)
- Why: When the player clicks the Green Flag, any code connected underneath “When Green Flag Clicked” will run. We will use this to start our game. By adding blocks underneath “When Green Flag Clicked”, we will be telling the game what to do whenever the player clicks the Play (Green Flag) button.
Select Forever: Drag & connect the “forever” block (Control).
- Why: The “forever” block is a loop that will run constantly until it is told to stop. In other words, any code added to a forever loop will run for the entire game. Since we want to control the bowl for the entire game, we will put all of the movement code inside a “forever” block.
- If we added movement code without a forever loop, our bowl would only be able to move once because the code blocks would only run once. Since we do use a forever loop, our movement code can be used as many times as we want during the game.
Select If () Then (): Drag and connect the “if () then ()” block (Control) in between the two orange bars of the “Forever” loop that we added in the previous step.
- Why: This block will be used to determine whether or not the player is pressing a key. For example, if the player holds the right arrow key, we will make the candy bowl move to the right. We do this by using the “If () Then ()” block – if the arrow key is pressed, then the sprite moves. Now we need to fill in the two spaces of our If () Then () block…
Select Key (Space) Pressed: Drag and drop the “key (space) pressed” block (Sensing) into the dark orange space of the “If () Then ()” code block that we added during the previous step. Use the dropdown menu to select right arrow. The code block should now say “Key (Right Arrow) Pressed”. The two code blocks should now read “If Key (Right Arrow) Pressed, Then…”.
- Why: This block will detect if a key is actually being pressed. Now we need to code what happens when the key is pressed by adding a block after the word “then”…
Select Change X By (): Drag & connect the “change x by ()” block (Motion) in between the two orange bars of the “If () Then ()” block.
- Why: This code block will move your sprite along the x-axis (right or left) – a positive number will move right, while a negative number will move left. Now we need to code the left arrow…
Select If () Then (): Drag and connect the “if () then ()” block (Control) in between the two orange bars of the “Forever” loop, but underneath the “If () Then ()” code block that we added in the previous step (which contains our right arrow code).
- Why: This block will be used to determine whether or not the player is pressing a key. For example, if the player holds the right arrow key, we will make the candy bowl move to the right. We do this by using the “If () Then ()” block – if the arrow key is pressed, then the sprite moves. Now we need to fill in the two spaces of our If () Then () block…
Select Key (Space) Pressed: Drag and drop the “key (space) pressed” block (Sensing) into the dark orange space of the “If () Then ()” code block that we added during the previous step. Use the dropdown menu to select left arrow. The code block should now say “Key (Left Arrow) Pressed”. The two code blocks should now read “If Key (Left Arrow) Pressed, Then…”.
- Why: This block will detect if a key is actually being pressed. Now we need to code what happens when the key is pressed by adding a block after the word “then”…
Select Change X By (): Drag & connect the “change x by ()” block (Motion) in between the two orange bars of the “If () Then ()” block. Change the (10) to (-10).
- Why: This code block will move your sprite along the x-axis (right or left) – a positive number will move right, while a negative number will move left.
Step 3: Candy Appears!
In this section we show you how to make candy appear at the top of the screen…
Select the Candy sprite: By clicking on the Candy sprite, you will be able to add code to it.
- Why: In Scratch, you need to choose which sprite you want to code before choosing any code blocks. In our example, we’re using the pre-made Donut sprite – we will refer to this as our Candy.
Select When Green Flag Clicked: Drag over the “When [Green Flag] Clicked” block (Events)
- Why: When the player clicks the Green Flag, any code connected underneath “When Green Flag Clicked” will run. We will use this to start our game. By adding blocks underneath “When Green Flag Clicked”, we will be telling the game what to do whenever the player clicks the Play (Green Flag) button.
Select Go To Random Position: Drag over the “Go To (Random Position)” block (Motion)
- Why: This block is used to randomize the position of the sprite on your screen. We will use this sprite to send each piece of candy to a random position on both the X and Y axis. Although, since we want the candy to appear at the top of the screen, we will add another code block to make sure the Y value (up and down) always stays the same…
Select Set Y To 0: Drag over the “Set Y To (0)” block (Motion). Change the number to 180.
- Why: This block is used to set the Y value of the sprite to whatever number is in the white circle. The X value controls how close the sprite appears to the left or right of the screen, while the Y value controls how close a sprite appears to the top or bottom of the screen. We will use the “Go To Random Position” block to make sure our X is always random (meaning it can appear anywhere between the left and right of the screen), but we will use “Set Y to 180” to make sure our sprite always appears at the top of the screen. In Scratch, the Y value of 180 is the top of the screen.
Step 4: Candy falls!
In this section we show you how to make your candy fall from the top of the screen. We also have code to teleport candy back to the top of the screen after it either hits the ground or gets caught by the bowl. By teleporting candy back to the top of the screen after it reaches the bottom, we only need to code one sprite…
Select the Candy sprite: By clicking on the Candy sprite, you will be able to add code to it.
- Why: In Scratch, you need to choose which sprite you want to code before choosing any code blocks. In our example, we’re using the pre-made Donut sprite – we will refer to this as our Candy.
Select When Green Flag Clicked: Drag over the “When [Green Flag] Clicked” block (Events)
- Why: When the player clicks the Green Flag, any code connected underneath “When Green Flag Clicked” will run. We will use this to start our game. By adding blocks underneath “When Green Flag Clicked”, we will be telling the game what to do whenever the player clicks the Play (Green Flag) button.
Select Forever: Drag & connect the “forever” block (Control).
- Why: Any code added to a forever loop will run for the entire game. Since we want our candy falling code to run during the whole game (to make sure it reaches the ground), we will put all of the movement code inside a “forever” block.
Select Change Y By (): Drag & connect the “change y by ()” block (Motion) in between the two orange bars of the Forever block. Change the (10) to (-5).
- Why: This code block will move your sprite along the y-axis (down) – a positive number will move up, while a negative number will move down.
Select If () Then (): Drag and connect the “if () then ()” block (Control) in between the two orange bars of the “Forever” loop, but underneath the “Change Y By -5” block that we added in the previous step.
- Why: This block will be used to determine whether or not the candy is at the bottom of the screen. The top of the screen is Y = 180, while the bottom of the screen is Y = -180. If we check when the candy reaches around -170, we can make the candy disappear…
Select () < (): Drag & drop the “() < ()” block (Operators) into the dark space inside the “If () Then ()” block. Change the number in the white space on the right side of the block to “-170”.
- Why: We will use this block to determine if the position of the candy is less than (aka lower than) -170. If the candy is lower than -170, that means it’s at the bottom of the screen and can disappear.
Select Y Position: Drag & drop the “Y Position” block (Motion) into the white space on the left side of the green “() < ()” operator block we added in the previous step.
- Why: We will use this block to determine if the position of the candy is less than (aka lower than) -170. If the candy is lower than -170, that means it’s at the bottom of the screen and can disappear.
Select Go To Random Position: Drag over the “Go To (Random Position)” block (Motion)
- Why: This block is used to randomize the position of the sprite on your screen. We will use this sprite to send each piece of candy to a random position on both the X and Y axis. Although, since we want the candy to appear at the top of the screen, we will add another code block to make sure the Y value (up and down) always stays the same…
Select Set Y To 0: Drag over the “Set Y To (0)” block (Motion). Change the number to 180.
- Why: This block is used to set the Y value of the sprite to whatever number is in the white circle. The X value controls how close the sprite appears to the left or right of the screen, while the Y value controls how close a sprite appears to the top or bottom of the screen. We will use the “Go To Random Position” block to make sure our X is always random (meaning it can appear anywhere between the left and right of the screen), but we will use “Set Y to 180” to make sure our sprite always appears at the top of the screen. In Scratch, the Y value of 180 is the top of the screen.
- You may have noticed that these last two code blocks are identical to the code blocks we created during “Step 3: Candy Appears!”. This code is important to duplicate here. The code in Step 3 only triggers one time when the game starts (remember, it’s not in a forever loop), so it’s only used to set the starting position of the candy. The code in Step 4 (that we just placed) triggers every single time the candy hits the floor.
Step 5: Catching Bowl!
In this section we add code to let the bowl actually catch the candy…
Select the Candy sprite: By clicking on the Candy sprite, you will be able to add code to it.
- Why: In Scratch, you need to choose which sprite you want to code before choosing any code blocks. In our example, we’re using the pre-made Donut sprite – we will refer to this as our Candy.
Select When Green Flag Clicked: Drag over the “When [Green Flag] Clicked” block (Events)
- Why: When the player clicks the Green Flag, any code connected underneath “When Green Flag Clicked” will run. We will use this to start our game. By adding blocks underneath “When Green Flag Clicked”, we will be telling the game what to do whenever the player clicks the Play (Green Flag) button.
Select Forever: Drag & connect the “forever” block (Control).
- Why: Any code added to a forever loop will run for the entire game. Since we want our candy catching code to run during the whole game (to make sure we can always collect the candy), we will put all of the code inside a “forever” block.
Select If () Then (): Drag and connect the “if () then ()” block (Control) in between the two orange bars of the “Forever” loop.
- Why: This block will be used to determine if the candy is touching the bowl.
Select Touching (): Drag and drop the “Touching ()” block (Sensing) into the dark orange space of the “If () Then ()” block. Use the drop down menu to select the name of your bowl sprite.
- Why: This block will be used to determine if the candy is touching the bowl.
Select Start Sound (): Drag and connect the “Start Sound ()” block (Sound) in between the orange bars of the “If () Then ()” block. Use the drop down menu to select the name of your sound.
- Why: This block will be used to play a sound every time candy is collected. We chose to use the “Collect” sound, but you can use any sound you want!
- Tip: To add new sounds to your game, click the “Sounds” tab in the top left of the screen:
- Inside the Sounds tab, you can select the “Choose A Sound” button in the bottom left of the screen.
Select Go To Random Position: Drag over the “Go To (Random Position)” block (Motion)
- Why: This block is used to randomize the position of the sprite on your screen. We will use this sprite to send each piece of candy to a random position on both the X and Y axis. Although, since we want the candy to appear at the top of the screen, we will add another code block to make sure the Y value (up and down) always stays the same…
Select Set Y To 0: Drag over the “Set Y To (0)” block (Motion). Change the number to 180.
- Why: This block is used to set the Y value of the sprite to whatever number is in the white circle. These last two code blocks will only trigger when the candy is collected. That means that the candy sprite will teleport back to the top of the screen whenever it is collected.
Step 6: Score!
In this section we add code that will keep track of how many candies we caught and add that number to the scoreboard…
Select the Candy sprite: By clicking on the Candy sprite, you will be able to add code to it.
- Why: In Scratch, you need to choose which sprite you want to code before choosing any code blocks. In our example, we’re using the pre-made Donut sprite – we will refer to this as our Candy.
Make A Variable called Score: In the panel on the left, go to the Variables section and click “Make A Variable” – call the new variable “Score” (For All Sprites).
- Why: Variables are used to store information that can change during the game. Since your score will keep going up as you collect candy, we will save the number of candies collected inside the variable called “Score”. Now, we are going to add our new variable into the code that we created in our last step (“Step 5: Catching Bowl”).
Select Change My Variable By 1: Drag & connect the “Change my variable by (1)” block (Variables) in between the orange bars of the “If () Then ()” that we created in our last step (add it right above the “Start Sound” block).
- Why: This code block will make our variable “Score” increase by 1 every time we collect a candy. This is because we put it inside the “If (Touching Bowl) Then…” loop.
Select Set My Variable To 0: Drag & connect the “Set My Variable To 0” block (Variables) underneath the “When (Green Flag) Clicked” code block at the top of the script we created in the previous step.
- Why: This code block will make sure that our Score variable always starts at 0 whenever the game starts. Without this code block, the game may remember the score from previous rounds.
CONGRATULATIONS!
Congratulations! If you made it this far, you’ve successfully created your own Candy Catch game!
Visit us every other week for a new beginner-friendly coding tutorial!
OTHER PROJECTS
Part 3 of our "Unity Game From Scratch" tutorial. This week we'll look at a few commands you can experiment with to add new mechanics to your game!
This is Part 2 of our simple guide to teach you the basics of the Unity game engine. This week we'll be looking at some code that you can add to your game!
Follow this easy guide to learn the basics about the Unity game engine. Over this two part tutorial, we'll be creating a simple game from scratch!
Today we're going to be learning about the Unity game engine. By loading up the Lego Microgame that comes with Unity, we'll learn the basics about this game engine!