scratch starter lesson car race...scratch – starter lesson – car race step 2 – on your marks!...
TRANSCRIPT
What They Will Be Learning
Variables in coding are values that can change. They are used highly in games to vary
how computer controlled opponents behave. It can control factors like where they appear
and how fast they move.
We are going to create a simple code using variables that creates an unpredictable car
racing game.
Scratch – Starter Lesson – Car Race
Step 2 – On your marks!
Scratch does have a built in graphics program for creating your
own sprites, but to be honest it is not the easiest to use and
you are better off using graphic programs such as Gimp &
Inkscape to create them.
Secondly, children spend more time mucking about drawing
squiggly lines that look like rampant tap worms than anything
meaningful and no time on the coding.
So I have included the 3 graphics that you will need for this
game.
Step 1 – Map reading.
If you are new to Scratch
then here is a handy
map to show you the
areas that will be
mentioned in the
following instructions.
Step 4 – Laying the road.
To import the graphic of the road you need to click on the
Upload backdrop from file icon in the stage list area.
Beware that there are 2 identical icons in that area. DO NOT
use the one located at the top of the sprites list area.
Click on the icon and then browse to the location you saved
the road graphic and select it. I have found there is a little
glitch that means the road does not appear the first time.
Just repeat and it appears the second time.
Step 5 – Green car, blue car.
We do the same to import the two images of
the cars. But this time use Upload sprite
from file icon. This is located along the top
of the sprite list window.
Click on the icon and then select the blue or
the green car first. Then repeat to import the
other car.
If the road disappears then it means they have
used the Upload backdrop from file icon
instead from step 3.
Step 3 – Bye bye cat.
The first step is to remove the
default sprite of the cat.
In the sprite list area in the
bottom left of the screen right click
on the cat and then select delete.
The cat should disappear from the
sprite list area and from the
stage area.
Step 7 – Ready, steady!
The very first bit of code we need to drag from
the blocks palette area is under the Events
tab.
It is the when the green flagged clicked
block. Simply drag it onto the script area.
This block is nearly always the first one you will
need. It means that when the green flag at the
top of the stage area is clicked the script will
start running.
Step 6 – Pre race checks.
It does not matter if the cars are not in the
right places. We are going to correct that
using coding.
The coding is nearly the same for both cars so
we are going to write the code for the blue
car and then copy it to the green car and
make a few changes.
But to start with we need to make sure we
are writing the script for the blue car. So click
on the blue car in the sprites list area so it
is highlighted blue.
Step 8 – Racers to the grid.
To make things easier we are going to get the
coding to put the cars in the right starting
position when we click the green flag.
If you click on Motion in the blocks palette
area you will see a block that says go to x:00
y:00. Drag this so it locks onto the first block.
Then on the new block click in the white box
after x: and change it to -175, then in the
white box after y: change it to 93.
Step 9 – Understand X & Y.
Ry
Imagine a grid on the stage area with 0 in
the middle. The X axis runs left and right and
the Y axis runs up and down.
Anything up and right is a positive number
and anything down and left is a negative
number.
Using these co-ordinates in the code we can
position objects or sprites exactly where we
want them.
Step 10 – And their off!
Ry
We need to now make the car move
forward. There is an option in Motion to
move 10 steps, but if we put that in on its
own the car will only move 10 steps forward
then stop.
So in Control there is a block that says
repeat until with a hexagon groove. Put
this block in first and then from Motion put
the move 10 steps in the middle of it.
Now the code will keep repeating the 10
steps until the instructions we place in the
hexagon groove take place.
Step 11 – Finish line in sight.
We need to tell the repeat until
block when to stop repeating.
In Sensing the top block says
touching with a drop down box.
Drag this into the hexagon
groove in the repeat until block
and then click on the little black
arrow to show a drop down list
and then click on edge.
This now means that when the car touches the edge of the screen it will stop
repeating the move 10 steps.
Step 12 – Put your foot down.
At the moment the car will move 10
steps every time the code is run. This
means if both cars have the same code
then they will both go at the same
speed.
What we need to do is get the code to
create a random number that takes the
place of the number 10 in the move 10
steps. This is where we use a variable.
Click on Data in the blocks palette
and then click on Make a Variable.
In the new window that appears click on For this sprite only and then give the
variable a name. I suggest keeping the name simple such as blue or blue speed.
Step 13 – Why name it?
Why do we give the variable a name?
In this code we are going to be using two variables. Some codes can use hundreds or
thousands of variables. We do not need to know what random number the variable
has chosen and tell the coding that value, we just need to tell the coding the name of
the variable we want it to use and it can find the value itself.
Step 14 – Time for speed.
Once you create the variable you will see
some new blocks appear in the Data tab.
The top one is a rounded rectangle with the
name of the variable you just made.
Under that is block that says set (your
variable name) to 0. Drag this block
between the first and second block in the
scripts area.
This block tells the coding what value we
want the variable of that name to be.
Step 15 – Pick a number.
At the moment the coding say that
our variable is set at 0. We need to
allow the coding to be able to
change this number every time we
start the code.
If we go to Operators there is a
block that says pick random 1 to
10. Drag this into the white slot in
the set (variable name) to block.
This now means that each time we
run the code it picks a random
number between 1 and 10.
Step 16 – How fast?
So the coding is now picking a random
number for the speed, but we have not
told the coding what to do with it.
Go back to the Data tab in the block
palette and drag the rounded rectangle
with the variable name into the white
space with 10 in it on the block that says
move 10 steps.
What we have now done is told the coding
to pick a random number between 1 & 10
and then use that number as the amount
of steps to move the car each time.
Step 17 – Going the extra mile.
We could just copy that code over to the green can and make the changes and it
would work. The race will be random with both cars in with a chance of winning. But
what if the race is really close or we take our eyes off it. Who really won?
So we are going to add some extra touches to make our game even better.
Step 18 – I won!
What better way to find out who
won than by letting the sprites tell
you?
Go to the Looks tab in the blocks
palette and drag the block that
says say Hello! onto the bottom of
our code.
Now click in the white box that says
“Hello!” and change it to “I win!”
Now if the car touches the edge
that message will appear on the
screen.
Step 19 – Tell everybody.
If copied the code to both cars they
would race, but the losing car would
carry on until it reached the end and
would also display the message “I
win!”
So we need the coding to tell the
other car to stop.
To do this the blue code is going to
broadcast a message that the green
car will hear and then know to stop.
Go to Events in the block palette
and choose the block labelled
broadcast message 1 and drag it
to the end of our script.
Then click on the little back triangle
and click on new message in the
drop down menu.
Type in the Message Name “blue
wins” and click OK.
Step 20 – What if I lose?
There is always a chance the blue car
might lose, so we need to make sure the
code is listening for the message from the
green car to say it won.
In the Events block palette drag the block
labelled when I receive message 1
under the main script so it starts a new
one.
We can’t change the message yet as we
have not created the script for the green
car, but do not worry, we can come back
and do that later.
Step 21 – Race over!
Once the coding knows the other car has won
we want it to stop this car.
In the Control tab there is a block that says stop
all. Drag this under the new block in our script
area that says when I receive message 1.
Click on the drop down box in the new block and
change it to other scripts in sprite.
Now when the code receives the message it will
stop the main script running, which means the car
will stop moving any further.
Step 23 – Everybody equal.
Now we have all the coding in place we can copy
the code we have written into the green car.
Firstly, drag the smaller code that starts with
when I receive message 1 by dragging the top
block down onto the green car in the sprite list
area. Then click on the green car and the copied
code should be there. Drag it about halfway down
out of the way.
Now click on the blue car and do the same with the main script. Drag it by the top
block on to the green car again and then click on the green car to make sure it is there.
Step 22 – Surprise!
Now this a small thing, but makes the game more fun.
You will notice that since we created our first variable a little window has appeared at
the top of the stage area. It shows what the number is for our variable.
When we create the code for the green car another one will appear for the green car.
The problem is that at the start the race the one with the larger number will win and
we can see that as soon as the green flag is clicked!
Luckily we can do something about this. Click on the Data tab in the block palette
and drag the bottom block called hide variable (variable name) and place it under
the first block in our script. Now when we start the code the window will be hidden.
Step 25 – It’s me, green!
At the bottom of the script click on
the drop down box on the
broadcast blue wins block.
Select new message and type in
the Message Name window green
wins and press OK.
Then under that change When I
receive message 1 to blue wins
by clicking on the drop down box.
Step 24 – A few tweaks.
We now have to just create a variable for
the green car and change a few bits in the
script to make it work correctly.
Just like we did for the blue car go to the
Data tab and click on make a variable.
Again click For this sprite only, but this
time call it “green.”
Then on the main script drag the variable
block called Blue in the move steps to the
block palette and let go to remove it.
Then drag the new variable for green to
replace it.
Then in the block hide variable blue click on the drop down section and you can now
choose green. Do the same with the block under it for set blue to pick random 1 to
10.
Step 27 – Blue ready!
One more last bit to change. Now that we have created the code for the green car we
can finish the last bit of the code for the blue car.
Click on the blue car in the sprite area and then on the block When I receive
message 1 use the drop down box to change it to green wins.
Step 26 – Green ready!
Last bit to change for the green car is the starting location.
The x co-ordinates will stay the same at -175 because we
want the cars to be level at the start, but we need to change
the y co-ordinates so that the green car is on the other track.
Change it to -77.
Step 28 – Lets race!
We are now ready to race!
Clicking on the green flag in the stage
area will start the race. When a car
reaches the end it should announce “I
win!” and the other car should stop.
If both cars say “I win!” then it means it is
a tie.
Simply click the green flag to start the
race again.
Taking It Further
The children can now play with the script to see how any changes they make affect
how the program works.
But remind them, they break it, they have to fix it! That’s what programmers do.
The most obvious changes they can make is to the two numbers that the variable
uses. Ask the children what happens is they make the second number bigger? Ask
them what happens if the make the difference between the two numbers larger or
smaller?
For those more adventurous children maybe they could make a third sprite for a
finish line and then see if they can change the code so the cars stop when they touch
the finish line.
Or maybe they could change the sprites for maybe a hare and a rabbit?