This workshop will involve the use of the Scratch programming tool. This is a tutorial on how to make a simple drag and drop video game. Fun fact : we’ll be sorting out refuse into different containers, for the good of the planet!
General Objective
Preparation time for facilitator
Competence area
Time needed to complete activity (for learner)
Name of author
Support material needed for training
Resource originally created in
Introduction
We will program a drag and drop style game. Trash will appear at the top of the screen. The player will need to drag and drop it into the right bin. The goal is to correctly sort the most amount of trash possible in the allotted time. Before starting, save the 6 images below to your computer: right-click on each image, then click on ‘save image as…’ then choose your desired folder.
Importing sprites
We will now need to import images to use them as sprites. For this, near the bottom right of the screen, click on the sprite icon, choose ‘Upload Sprite’, and choose the images (one by one) you saved in the previous step:
Click on the field circled in the image above to rename the sprites, making sure to give them clear names such as ‘Glass Bottle’, ‘Trash’, etc. Meanwhile, delete the default cat sprite.
Choosing a backdrop
Place the three bins at the bottom of the screen:
You can click the backdrop icon on the bottom right of the screen to select a backdrop from the library or import a background you have saved to your hard drive which will decorate the stage. You can adjust the size of the sprites by adjusting the value in the field circled below:
Programming trash
We must first define the starting behaviour of the waste by making them visible and setting their departure point. Add the following blocks to each piece of trash: 
When the green flag is clicked, the trash will appear at the indicated coordinate. We don’t need to create the same script three times! You can simply drag the code and drop it into the other sprites’ icons.
Modify the values of x and y to adjust the position of each piece of trash so that they are all visible at the start of the game. Click the green flag to test the result. We will next need to tell the computer that the trash can be dragged towards the bins using the mouse. In order to not have all the trash follow the cursor at the same time, use the block ‘when this sprite clear’, Next, add the conditional loop (‘repeat until’) that verifies that the three bins (‘touching recycling’, ‘touching trash’ and ‘touching packaging’). To add three conditions, insert the ‘…..or…..’ blocks as below. Complete the loop with the moving of the cursor (‘go to mouse pointer’).
We now need to be able to verify that the waste has been placed in the correct bin. If it has, the trash disappears (as if it had been thrown away). For the opposite case, we need to program a message indicating that the wrong choice has been made. As we have several bins, we will have to do the test several times. Add the blocks below to each trash sprite, while modifying the correct bin for each and adjusting the x and y coordinates so they reappear at the right position.
When the player clicks the green flag, the programme constantly checks the following conditions:
If Plastic Bottle (in this case) touches Recycling, then it disappears.
If it touches Trash, then it says indicates in the form of a speech bubble that it’s a wrong answer and moves back to the position indicated.
Adding sound
A good way to liven up the game is to add sound effects that play with certain events occur. In this game, we can add one effect when trash is placed in the correct bin and another in the opposite case. For this click on the ‘Sounds’ tab towards the top right of the screen and then on the speaker icon on the bottom left. Now add two sounds from the library, for example ‘whoop’ and ‘pop’.
For each condition, a sound effect will play. If the response is correct, the ‘whoop’ sound will place, otherwise, ‘pop’.
Adding a scoring system
The score is information (number of points accumulated) that changes throughout the game and that the computer needs to memorise. Go to variables, then ‘Make a new variable’, call it ‘score’ and tick the box ‘For all sprites’. In the trash’s script, add a point to the score when the correct bin is used, as follows:
Place the same block in the same place (depending on the correct bin) for each trash sprite. At the beginning of the game, the score should be at zero. Add the following blocks to the stage’s script:
When the green flag is clicked, the score is set at 0.
Adding a timer
To add rhythm and a little tension to the game, we can add at time limit. Create a second variable called ‘timer’ to be applied to all sprites. Complete the stage’s script with blocks to manage the timer as follows:
When the green flag is clicked, the variable ‘score’ is set to 0 and ‘timer’ to 60. Then ‘timer’ will lose 1 every second until it is equal to 0. Once equal to 0, the program stops.
Adding a 'Game Drop' graphic to appear when the timer runs out
To indicate that the game is finished, we can display ‘game over’ text when the timer reaches 0. Go to the ‘Backdrops’ tab on the top left and add a costume that you will draw yourself. Choose a colour and write ‘Game Over’ with the text tool (‘T’ icon).
Then, in the stage’s code done previously, add the following blocks to make the new costume appear when the game is over and then to make the default backdrop reappear at the start of the game:
When the green flag is clicked, the default backdrop appears. The variable ‘score’ is set to 0 and ‘timer’ to 60. Then ‘timer’ will lose 1 every second until it is equal to 0. Once equal to 0, the backdrop ‘Gameover’, the program stops.
Going further
A couple of ideas to improve the game:
- Add other kinds of trash
- Implement negative scoring if trash goes in the wrong bins