8a Move sprite with keys

Exercise 8a: Move the sprite using the keyboard

In this exercise you will build the program below. Use the up arrow to speed up, the down arrow to slow down, and the left and right arrows to turn.

If you are using Chrome and the Java applet does not display, then go to the Java control panel, open the Security tab, make sure that Java is enable and that the security level is set to Medium (you might want to set it back to High when you have finished visiting this site).

Before we do the scripts, import the image below into the background of the stage, or make your own as described in the next paragraph. If you choose to use the below image, first save the image into your personal folder. Then select the icon marked 'stage' in the lower right corner of the Scratch window, click the Backgrounds tab in the centre panel, then click the import button. Import the picture you just saved into your Scratch project. Delete the white background by clicking the X next to it.

Make your own racetrack if you like - simply select the stage icon in the sprite list in the bottom right corner of Scratch, then click the Backgrounds tab at the top of the scripts area (the middle panel) then click the Edit button of the existing white background. Be careful not to edit a sprite costume by mistake, since that's not the same as editing the background of the stage.

Now you can import this picture to use as the car. First download a copy of the picture to your folder. This picture is in GIF format, not the usual JPEG format. An advantage of the GIF format is that the image can have transparent parts and that is the case for this image - the car is surrounded by a transparent area. If we had used a JPEG image then we would be importing a picture of a car embedded in a very obvious rectangle of colour which we would then have to erase in the Scratch image editor. Once you have saved a copy of this image into your personal folder you can import it into Scratch as a new sprite by clicking the button 'Choose new sprite from file'.

Rename the car sprite as 'car' at the top of the scripts area. Shrink the sprite using the 'shrink sprite' tool or, to make sure your sprite is the same size as mine, open the 'Looks' group in the left panel, insert the value 28 in the 'Set size to ... %' block and then click this block once to set the size of the sprite to 28% of its original size.

Once you have imported the car image into Scratch you will notice a slight problem - the car is not pointing in the forward direction; You can tell that by looking at the top of the scripts area - you will see this: and we note that the car is not pointing in the blue (forward) direction. Solution: open the car image for editing (click 'Edit' in the costumes tab). The problem is that the 'forward' side of the image is the right side of the sprite in the editor window so you will need to rotate the sprite 90° clockwise using the relevant tool. Also click the 'Set costume centre' and click in the centre of the car - this 'centre' is the point about which the car will turn. Delete the cat sprite (right-click and choose delete) since we won't be using it.

Now we can work on the scripts for the car sprite, which should still be selected. The program uses a variable called speed (it's just a name - we could just as well have called it 'hedgehog' as far as Scratch is concerned), so you will first need to create this variable by opening the variables group and clicking 'Make a variable'. Name the new variable 'speed' and make it available to this sprite only. Now you can create the following five scripts. Try to understand how each script works. This program uses a 'forever loop' which continues looping forever or until you click the red flag. Inside the forever loop is a block that makes the car move forward 'speed' steps, so the higher the speed the bigger the jumps that the car moves forwards. I'm not sure the next line is really needed - I saw it in someone else's program so I thought I should include it too. Maybe it is there to reduce the speed of the car, or maybe to ensure that the program behaves the same way no matter how fast the computer the computer is that you run it on? Anyway, it seems to work ok with this line in.

You are also using for the first time an 'if' block. In this case the 'if' block checks whether the speed is greater than zero and only runs the 'change speed' block if this condition is true. So the speed is only reduced if it is greater than zero, to make sure the car never goes backwards (negative speed).

If you open the 'variable' group in the left panel then you can check the box next to the 'speed' variable to display its value on the stage. Try double-clicking this display on the stage several times to see the different appearances that are possible.

Click the green flag to run the program and check that the car moves ok. Of course the car pays no attention to the track at the moment because we have not written that into our program but Scratch is very good at detecting collisions so it should be easy to detect a 'collision' of the car with the green grass. This feature of Scratch is good news but it is important to know that collision detection is much more difficult in normal programming languages such as Visual Basic or Java.

Scratch can detect collisions in several different ways:

• when one sprite collides with another
• when a sprite touches a certain colour
• when two selected colours touch.

We will use the second method here and detect when the car sprite touches the green colour like this (leave the other stacks unchanged):

There are two changes here: a 'reset timer' block has been added near the top and an 'if' block has been added to deal with the collision. To set the colour in the 'touching colour' block first click the coloured square then click the green colour on the stage with the colour picker that appears.

The 'if' block simply sets the speed of the car to 1 every time it detects that the car is touching the grass.

Also open the 'sensing' group in the left panel and check the box next to the 'timer' variable to display its value on the stage. The timer will be reset to zero each time the green flag is clicked.

Try the program now. I find it playable enough but I'm sure you can think of many ways to make it better. Indeed your grade will depend largely on how much you can improve the basic game. Here are some suggestions:

• Add appropriate sounds.
• You could make you own racetrack design. It's quite easy to edit the background of the stage.
• You can fine tune the game (play with the numbers) to make it play better.
• You could make the game stop when the car hits the red line (but then you would have to start the game with the car just in front of the line?)
• You would like the timer to freeze when the game ends but it won't do that. To get the same effect you would need to make a new variable (you could call it 'time') and copy the timer value into the time variable continuously until the car reaches the finish. The 'time' variable would be displayed and the 'timer' would not.
• You could set up a lap counter variable that keeps track of how many laps have been completed. The problem would be that the lap counter might keep adding laps several times as the car passes over the line.
• One problem with the game is that when you hold down any key on the keyboard it sends a character then pauses for a short while then begins sending characters in rapid succession (you've noticed this for example in Microsoft Word). Thus if we hold down the up arrow to increase the speed it increases slightly then pauses then begins increasing very rapidly and uncontrollably. I don't think there is an easy solution for this but maybe you can find one?
• I hope you will improve this game in ways I have not thought of...