04 car race track game

ScratchLet’s Motor!!!

Today we are going to start to learn to program a very simple race track game.

Reminder - Open Scratch. You will see a very simple interface as learned previously.

Sprite PreviewSprite Editor

Sprite Selection and Creation

Tool Box

Sprite Preview lets you preview a project.

Sprite Selection and Creation lets you select an existing Sprite or create a new Sprite.

Sprite Editor lets you edit a Sprite’s Scripts, Costume, and Sounds. Tool Box provides single script blocks for building combo script blocks.

Let’s get started.

We are first going to make our race track. Open Scratch and Select the Stage image.

Change the background name to Race Track and then click the edit button.

The Paint Editor window should now be open. Click on the paintbrush, choose the largest brush size, choose grey and then draw your track (the larger the better).

The next step is to change the white background to green. Select the Fill tool, choose green and then fill in the white areas.

Finally we want to draw our Start (white dotted) and Finish (yellow straight) lines. Click OK when finished.

Now we are going to change the cat into a car – honest!

Click on Sprite1 andThen select the EditTab.

Click the Clear tab and draw a red car. I have used black for the tyres with brush size 4. I have used two squares length for each of the tyres with a one square gap between them. Click OK when you are finished.

Note: You can draw your own car if you like –

but keep it small!

Don’t worry about the position of the car at the moment that will come later.

What we want to do now is to get the car to move and to do that we need to add some scripts.

Make sure that the sprite (Sprite1) of the red car is selected and do what follows on the next slide.

Don’t worry about the position of the car at the moment that will come later. Change the name of the sprite to Red Car, change the costume name to Red Car 1, delete costume2, then select the Scripts tab.

We want the car to control the car using OUR input. We shall need to move the car left, right and forwards so we will choose the control programming tab and drag the when space key pressed command from the tool box into the sprite editor window.

Now we do not want to use the space bar as we first want to move the car left so, from the drop-down menu to the right of space, choose left arrow.

The next thing we want the car to do is actually turn left when we press the left arrow key on our keyboard. To turn is, as you will know a motion so, select the motion tab and drag the turn 15 degrees command below the previous command. They should fit together like a jigsaw piece.

Be careful to choose the correct turn

symbol – one is left the other is

right.

Now check that your left-arrow key works by testing your program using the left arrow key.

Now you ‘write’ the script to turn the car right.

Not too arduous I hope!

The next step in our program is to move the car forward.

As the car will be moving forward all the time on the track we will need to make sure our program reflects this.

Go back to the control function tab and drag into the sprite editor the when [green flag] clicked command.

So, when we click the green flag we want the car to move forward a certain distance each time.

Not only do we want the car to move forward we also want it to do that forever.

So, from the control command list, drag in the forever command and ‘fit it’ under the when [green flag] clicked command.

The final bit of this command is to decide on how fast we want the car to move forward.

As moving is a motion, we choose the motion tab.

Now drag across the move 10 steps command, place it in the slot under forever and change 10 steps to 1 step.

Now check to make sure that your program actually works!

Don’t forget to click the green flag!

As you can see the car can go anywhere, even onto the grassy area, without anything happening. Well, in real life that is not always the case.

We are going to make the car explode if it encroaches onto the green area.

So, we need to ask ourselves a question – “if the car touches the green area then we want something to happen …”

Make sure the control command tab is selected and drag the ‘if’ statement into the sprite editor (the one with just ‘if’ on its own).

Now we know that if the car touches the green area then it will explode. So we now need to select the sensing tab (as to touch is one of our 5 senses) and drag the touching color* command into the hexagonal box next to the if statement.

*Color – USA spelling as it’s a USA program

As you can see, the touching colour may not match the green of our grass so we need to change it.Click on the colour in the touching color command box and a pipette will show. Drag the pipette to the green on your track and click on it. The colours should now match!

oldnew

Now, what do we want to happen when the car touches the green?

Well, the first thing we want to happen is that the car explodes.

So, making sure you have the Red Car selected, choose the costumes tab and click on the copy button. Red Car2 should appear underneath.

Click on the edit button for Red Car2 and make the car look as though it has exploded and is on fire. When you are happy with the effect click on the OK button.

Now we need to go back to the scripts tab and tell the program what to do when the Red Car1 touches the green grass.

What is now going to happen is that the original Red Car1 is going to change its looks when it touches the grass.

So, click on the Looks tab and drag the switch to costume Red Car2 command into the space under the if touching color ? command.

Now we have told the program what to do when the car touches the grass but what happens next?

Well, we want the program to STOP!

So the next step is to click on the Control tab, scroll down and drag the stop script command immediately under the switch to costume Red Car2 command.

I jigsaw puzzles

Now let’s pause for a moment. Hopefully, as we have gone along we have begun to understand how many of the different commands have worked. We should also make sure, on a regular basis, that our program works.

We should ALWAYS do this after we have written some computer code. If we do not then, if there is a mistake, we might have a lot of code to check over. This checking is called de-bugging.

The next step is to make sure that ALL our coding is in the right place. We now need to move the if touching color ? Command and its component parts.

Click and hold on any orange part of the ‘if’ statement ‘box’ and drag it so it locks under the move 1 steps command.

Let’s debug!

1. Click on the costumes tab and select Red Car1.2. With your mouse, move the car to the start line

and position it so that it is facing the right direction (you need to use the left and right keys here)

3. Press the green flag and make sure that ALL your keys work and the car bursts into flames when it touches the green. The program must also stop.

Voilà! As the French say. So there it is (well, sort of…) . Your program should have worked as expected. If not, then you have some debugging to do!

Respite - a short period of rest or relief from something difficult or unpleasant. Sorry but computing is not difficult or unpleasant – just “Thought Provoking”.

We want the car to start at the start position!

Well, let’s get the car to start at the exact point, as any racing car would have to. Drag your car to the starting grid and make a note, write down, remember its starting co-ordinates.

Make sure you use the left/right keys on your

keyboard to get the car in the correct position.

As you can see, the co-ordinates here are x: -3 and y: 150 and direction: -90)

Your co-ordinates are likely to be different.

What we want to do isto get the red car back to the starting blockwhen we press thegreen flag.

We are now going to modify our code (that on the right) to move our car to the starting grid when we click the green flag. The new code is below.

You can see that we have also told the program to go back to the original car (RedCar1) every time the game starts/restarts - think about why we have done this.

You can see that we have also told the program to go back to the original car (RedCar1) every time the game starts/restarts - think about why we have done this.

The reason is that if the car crashes it changes to a car on fire. If we restart the game we do not want the car on fire to start on the grid (well I certainly don’t!).

Introducing the blue car ….

This is a race track game so we now need to have someone to compete with - the Blue car.

You need to carefully think about the process you have gone through to get the red car working and repeat that process for a new blue car.

The next 2 slides will guide you through the initial process but it is now up to you to get both cars working.

In the sprite window right click on the red car and choose duplicate.

The new car, sprite 2, is going to be a blue car so click on the sprite, go to the costumes tab and change the car’s colour to blue (by using the fill tool). Do the same for the ‘on fire’ version.

Now make any important changes to the script of the blue car - you will need to go back and read through the slides relating to the red car.

Hint: think about • using the ‘a’ key for moving the car anti-

clockwise and the ‘f’ key for clockwise• the car’s position on the grid• the colours of the new car

Well, you should now have two cars that move clockwise around the rack when the various keys on the keyboard are used. When either of the cars touch the grass area then the game stops.

Good so far but not all that exciting - particularly if you keep on driving into the grassy area.

What we need to happen is that, instead of the game stopping when an errant driver leaves the track, we penalise her/him without affecting the other drivers. To do this we are going to make the errant driver wait 5 seconds and then be allowed to carry on her/his journey.

The script we need to write for both the red and the blue cars is similar to the following:

You can see that we have now got rid of the ‘stop script’ command. We have added the wait 5 secs command followed by a return to the car’s colour prior to the crash.

Now play your game and make sure that everything works.

Debug any problems you have encountered!

SCORING

Let’s sort out the score variable for the red car and then you can copy this for the blue car.

For this game we are going to award one point for every time a car passes the yellow line.

Click on the red car sprite, if it is not already selected, and make sure that you have the Scripts tab open.

Select the variables tab:

• Click on Make a variable• Give the variable the name score• Select For this sprite only

So, when the game starts the score returns to zero. Every time the car crosses (touches) the yellow line one is added to the score.

The reason there is a “wait 5 secs” instruction is ……… you try and work out why!

Now do the same for the blue car.

Play the game with a partner and debug any problems you may encounter.

The contents of the slides and the blog would not have been possible withoutthe wonderful work of a colleague who has recently retired from the profession.