Movement
Programming Scratch Maze Games - Lesson 1
Objectives
- Design and write a simple program for an on-screen sprite to create simple movements.
- Use logical reasoning to explain how a simple algorithm works
- Solve programming problems by decomposing them into smaller parts
- Detect and correct errors in algorithms and programs
Lesson Resources
Lesson 1 - Movement
Lesson 2 - Conditions
Lesson 3 - Debugging, variables and sound
Lesson 4 - Levels
Lesson 5 - Collecting objects
Lesson 6 - Evaluating the game
Before you start
This unit contains guidance for using Scratch 3.0 which was released in January 2019. Scratch can be used online at scratch.mit.edu. An offline version can also be downloaded for free HERE if you would like it installed on your network.
Everything included is also possible with previous versions of Scratch although you may find there are some layout and feature differences with older versions.
You can set up a Scratch Teacher Account which provides educators with additional features to manage student participation on Scratch, including the ability to create student accounts, organise student projects into studios, and monitor student comments.
Scratch is a project of the Scratch Foundation, in collaboration with the Lifelong Kindergarten Group at the MIT Media Lab.
This unit is packed with ideas for content that could be included in this type of maze game. The age and experience of your students is likely to dictate how far you get through it all. Please don’t feel you need to cover every single part of the plan, just try to ensure you cover the key concepts demonstrated through these lessons, and feel free to be creative with the rest! Equally, if the students are happy and able to include their own ideas independently in the later lessons that’s great and shows that they are able to apply the things they are learning.
Versions of Scratch
Scratch 1.4 - Released July 2009
Offline only. The version most schools began using as they adopted teaching and learning with Scratch.
Other previous versions were available.
Newer Scratch projects are not backwards compatible with this version, but files from v1.4 will open with newer versions of Scratch.
Scratch 2.0 - Released May 2013
Online editor was released for the first time. Offline editor was also made available later.
Lots of new features made available. Online community and sharing of projects became much easier.
Older Scratch projects can be opened in Scratch 2.0
Scratch 3.0 - Released Jan 2019
New Online editor that has been completely rewritten in HTML5 to make it compatible with all modern web browsers on most devices.
Scratch 2.0 projects will be compatible with Scratch 3.0
Offline editors available for some platforms on launch. iOS and Android versions to follow.
Introduction
Begin by introducing the following key terms and gauge the children’s understanding of them from previous computing lessons:
Program - (verb) To give a series of instructions to a machine so that it will perform a task automatically
Algorithm - A series of precise instructions to solve a problem
Test - See if it works
Debug – to detect and correct the errors in a computer program.
Recap previous coding work that the children may have done with things like Logo, 2Simple, Bee-Bots, Scratch Jr, Kodu or other Scratch projects.
- What have you done?
- What can you remember?
- How did you apply these terms when using x?
(Re-) Introduce Scratch. Scratch is a visual programming language which uses blocks. The blocks can be put together to create sequences of instructions (algorithms) for elements in a project. Sprites (characters or objects) and the Stage (backgrounds) in your project can all be programmed using the coding blocks.
You can access Scratch online at scratch.mit.edu (choosing Create from the top of the screen), or you can use an offline version that doesn’t rely on having an internet connection by downloading the software for free from HERE. Then ask your technician to install it on your school network.
Have a look at the main layout and features of the coding editor in Scratch 3 with the students:
Explain that in this project we will be learning some basics about coding with Scratch while making our very own video game. It will be a ‘maze game’ where we must carefully guide a character around a maze path.
We are going to begin by designing the background for the game, and this should be done in a particular way for the game to work well, however there is plenty of scope for your own design ideas and for linking it to topics and themes that you might be studying with your class.
Design the game’s background
To get started, click on the Stage section in the bottom right of the screen, then select the Backdrops tab in the top left of the screen. Here you will find the paint editor for backgrounds in your projects.
Click the blue Convert to Bitmap button at the bottom of the screen.
Choose the Fill tool from the drawing tools and pick a colour from the colour mixing tool. Note that it’s important they use a solid fill, not one of the fade effects shown below! The reason will become clear later.
Fill in the background with your colour of choice.
Next select the Paintbrush tool and set it to size 100. Pick another colour and, starting in one of the corners, draw one long winding path that uses as much of the screen as possible. Do not overlap any parts of the path you have already drawn.
Finally, choose a third colour, reduce the brush size to approx 30 and draw a finish line across the very end of your path.
If students have time, they can add some extra details to their path and background to make it look a little more realistic or to help them match it to a theme. The only rule they must stick to is don’t use the colours used for the background, or the finish line anywhere else on the screen. Other shades of the same colour are fine, but not the exact colour. Also try to ensure the main background colour continues to border the path all the way round, this will be important for the function of the game later.
Here’s an example, different shades of green and blue have been used on the plants and water:
This extra detail doesn’t have to be added at this point, the simple maze we’ve made will work fine if you are short on time. You can proceed with making the rest of the game and students can return to the Stage > Backdrops tab and edit their design if they get time at another point.
Here are some other examples of themed backgrounds:
Create your character
The next step is to create the main character Sprite for the game. This is the character that your player will control while playing the game and should match your background and theme.
If you don’t want to use the cat sprite that is provided at the start, you can delete it by clicking on the small cross in the corner of the sprite thumbnail, at the bottom right of the screen.
There is a fantastic collection of Sprites to choose from in the Scratch sprite library, you can also edit those sprites and even design your own, so the possibilities are endless.
The ‘Choose a Sprite’ button in the bottom right gives you the following options:
The library is the best place to start as there is usually something there that will do the job, look great and save the time taken by drawing your own sprites, you can decide what options you give your students though.
The library has a search box and categories at the top to help you find what you want quickly.
Many of the sprites in the library also have a variety of costumes (appearances). If you hover your mouse cursor over them, the ones that have multiple costumes will scroll through all the sprite's possible looks, like these examples with the ‘Ben’ and ‘Fish’ sprites.
Click the sprite to use it in your game. Once selected go up to the Costumes tab and select the costume you want to use for your character from the list of available options.
You can use the paint tools to edit any of the sprites. Use the fill tool to change their colours or the brush tool to add to the picture.
If you import an image of your own to use as a sprite you will probably need to remove the background. You can rub-away the background or bits you don’t want with the eraser tool or by using the fill tool (if it’s one solid colour) and the diagonal red line icon to fill it as transparent.
e.g:
Once you have chosen a sprite, drag it to the beginning of you maze path and resize it to fit inside your path with no part of the character touching the edges. You can do this by changing the size number in the character settings below the stage. The number you choose will depend on the size of the original sprite, but 30 is probably a good starting point to try, and then adjust as needed. This fish sprite is quite small to start with and so size 40 works well.
Start at the start - coordinates
So we have a maze background and a character, ask the students; what’s the first thing that should happen in our game? It’s rare that the students come up with the correct answer to this question as it’s something that we take for granted when we play computer games. When someone comes to play the game and presses ‘go’ the first thing we (as the game maker) want to happen is that everything is in the right place for the game to start. We want our character to be at the beginning of the maze ready to play. It would be a real pain if the player had to manually reset everything themselves before they could play the game wouldn’t it?!
So how do we tell the character exactly where to be? We can use coordinates for this.
What is a coordinate? Explore your students’ knowledge of coordinates based upon what they have studied in maths. They may well have experienced using them in other contexts as well, such as with maps or perhaps the game of Battleships.
Coordinates describe the position of something on a grid, and are commonly used in video games to specify where a sprite should be in the game.
In a 2D game (and in the Scratch environment) this is done with a four quadrant coordinate grid like the one below, (0,0) being the centre of the screen. The Y axis governs the sprite’s vertical position from 180 (the top of the screen) to -180 (the bottom). The X axis governs the sprite’s horizontal position, from -240 (on the left edge of the screen) to 240 (the right edge of the screen):
3D video games, like Minecraft or Kodu games also use coordinates but add a third (Z) axis to describe the depth position on the screen, in addition to the horizontal and vertical positions, so a coordinate might look like this (124, 87, -89).
There are a number of ‘Motion’ blocks in Scratch that make use of coordinates and affect a sprite’s position on the screen, but the first one we need is the ‘go to x y’ block:
Our first lines of code are going to tell our sprite to start at the start of the maze. There’s a helpful feature of these coordinate blocks, but it’s also one that can cause problems if the students don’t understand it. When you select the block it will already contain the coordinates for your sprite’s current position, which is great if you’re sprite is in the correct position, but can be confusing if not.
So ask the students to place their sprite at the start of their maze, in the centre of the path, small enough not to touch any edges and then find the following two blocks:
The green flag block is called a ‘hat’ block, as it must sit at the top of your code, these blocks are all in Events and require inputs to start the code running. This is the most commonly used of them as it turns the green flag button above the stage to become a start button, which works even when in full screen mode.
The coordinate numbers above are correct for our example game below and show the fish’s current position in the top left of the screen at the start of the maze.
You can also see your sprite’s current coordinate position in the sprite information box below the stage. This is useful if you need to adjust the ‘go to x y’ block (if the students make a mistake). Place the sprite in the place you want it to go to, take a note of these coordinates and then type them into the ‘go to x y’ block. Test it by dragging the sprite away from the position and clicking the flag and it will jump back to the start of the maze path.
Let’s get moving
There are a number of ways to control a sprite for a game in Scratch. We need an input device such as a mouse or keyboard to do this, and for this game the simplest method is to use the mouse and the following code:
The forever block is called a loop and will infinitely repeat any code blocks that are put inside it, from top to bottom at a rate of approximately 30 times per second. The other motion blocks here tell the sprite which way to face (wherever the mouse pointer (cursor) is) and to move forwards by 10 steps.
Give the students the blocks that are needed and ask them to work out how to put them together to make the sprite follow the mouse cursor.
You need to always stay a little bit ahead of the sprite with your cursor for this to work well, lead it round the screen.
Ask - How could you change the speed of the character’s movement? The number of steps in the ‘Move ... steps’ block dictates the speed of the sprite. 10 is usually too fast, so reducing it down to 3 or 4 usually works well.
Let the children build and experiment with this code to ensure their character starts at the beginning of their game and then follows their cursor around the screen.
Plenary
Finish off by recapping what we have created so far.
- What is working well so far?
- Have you noticed any problems?
The controls should now be working well but you’ve probably noticed that the character can go anywhere on the screen and doesn’t need to stick to the path we made, which allows cheating and doesn’t pose much of a challenge. Our finish line also has no effect on the sprite. We’ll fix both of these things next time with more code!
- Has anyone got any ideas for how our Sprite will know when it reaches the edge of our path (the walls)?
- What are coordinates?
- How did we use x and y coordinates today?
Saving your game
Depending on whether you are using the desktop or online versions of Scratch 3, saving may be slightly different.
Offline working
In the offline desktop version saving is very simple. Just go to File > Save to your computer and browse to wherever you would like to save your work, name your file appropriately and click Save.
Online working
Using the online version can make things slightly trickier. When you save your work, most web browsers instantly download the file by default to the downloads folder on your computer. The problem with this is that access to this folder is sometimes blocked for students on school networks, and also it doesn’t give you the opportunity to name your work when saving.
Solutions to this are:
Option 1 - Ask your technician to adjust the allowed settings for your browser so files are not saved automatically to the downloads folder. In Google Chrome, go to Settings, search for Downloads and scroll down until your see the options below. Turn on the Switch for the option ‘Ask where to save each file before downloading’. This will allow students to browse for a folder and name their work.
Option 2 - If this isn’t possible we would advise setting up a class folder on your shared area for the students to save into. Within that, create another named folder for each student.
Ask the students to minimise their browser window and browse for and open their named folder. This is usually available from the File browser tool or from the Start button > Computer and then finding the folder on your network. Resize the window so it’s not full screen. Maximise your browser window again and resize that so that both windows are visible at the same time.
Then save your work in Scratch from the File menu > Save to your computer.
When the file downloads it should also be visible at the bottom of the screen. You can drag and drop it from there to the named folder at the side of the screen. Their work is then saved and in their named folder ready for the next lesson. If you still want to rename the file, a single click on the name of the file in the folder should let you edit it or right click and choose rename.