Tip:
Highlight text to annotate it
X
Hey there, Teacher Tanti here
today I'm going to be showing you how to use this application: Scratch.
Now scratch is a programming language which is designed to get kids to learn
how to program
by writing programs which will make cartoonish animations using characters
like this.
There's a link in the description box below to download Scratch and the
inspiration for today's lesson
comes from a website which I also linked in the description box
but the code that I'll be writing is
my own creation. It's not based
on that website.
So, let's get started.
OK, what we're going to be doing today is that we're going to be
writing a game
which involves a cat being chased by a dog
and you have to control the cat to avoid dog for as long as possible.
Now this is the cat that will be controlling
and this white box around him is the environment of the game which means that
neither the cat nor dog can go out of this
white box.
So at the moment the cat is a little too big for environment so we need to make him
small.
We can do that by clicking here,
and then clicking a few times on the cat.
That should do it.
Okay now
what I want to do is to
change the background of the environment so that it looks a little bit nicer than just being white.
To do that
I can click
on stage down here
in order
to change the stage
which is the background basically
and I click on backgrounds and import a picture.
Now, what I'm going to be
choosing as a picture is
a picture of stars
so that it looks like
the cat will be running
in space
OK, so
we have
made the cat smaller and we have given the environment a background.
Now we can start coding.
So the first thing we should do is to make sure that we are
selecting
the cat icon down here
because we want to control the cat.
We also need to make sure that we have
scripts
selected over here.
Now this
is the area in which we will write our program in order to control the cat.
You write a program by
using these blocks
over here
and you can change the blocks
by clicking
on these tabs over here.
Now if we're going to tell the cat what to do, the least we can do is give him a name.
So I'm going to change his name. At the moment it's Sprite1 but I'm going to
change it to ginger.
Okay now,
to tell ginger what to do
we first have to tell him when he should do it.
To do that you use one of these wavy blocks
such as this or this.
And I'm going to say
hey ginger
when the green flag is clicked,
which is this,
when the green flag
is clicked
I want to you to
move
ten steps.
Now, ten steps is just a unit
of measurement
of distance in
Scratch.
The cat won't make
ten steps with his feet, it's just
ten pixels.
So he'll jump from here
to ten pixels in front of him.
I can try that out.
See? He has moved ten pixels forward.
If I clicked that again
he'll move another ten pixels forward.
What I can do
is to tell ginger
to
walk ten steps forward
for ten times.
What this means is: repeat for ten times move
ten steps, so
for ten times
ginger will move
ten steps forward.
How many steps in total will ginger move?
ten for ten times is a hundred. Let's see that work.
See? Now it looks like he's actually
moving smoothly rather than jumping around.
I can drag
ginger back
and try that again.
See? And I can even make him move
further in front
by changing that from ten to twenty.
That way ginger will move two hundred steps forward. See?
Now,
what I want to do
is to make ginger
look like he's moving his little legs
as he moves forward.
Now to do that a Scratch
you can use
costumes.
Costumes are basically different
appearances
of the character.
At the moment ginger has two
costumes.
This is
what we're seeing at the moment and we can change his appearance to this.
By switching between this and this
it can look as if
ginger is moving his legs.
Now how do you change
costumes?
Well you can
go on here
and choose
the next costume block. See?
By the way, you can
remove blocks
and you can delete them
by dragging them outside.
I want to put that there.
Now what will happen is that ginger will
make ten steps
and switch to the next costume
and again move ten steps and switch to the next costume
etc for twenty times. Let's see that work.
Ginger at the moment is moving a little too fast for us
to see his legs
moving clearly, so what we can do is we'll make
ginger wait
for some time before making the next ten steps
and we'll make him wait for
point zero one seconds.
So what will happen now is that
for twenty times
ginger will move ten steps forward,
change costume and wait.
Move ten steps forward, change costume and wait for twenty times.
See? Much better.
We don't want ginger to just walk twenty times forward,
we want ginger to walk forward forever.
To do that
we can use the "forever" loop
rather than the
"repeat" loop.
The "forever" loop will do
whatever is inside it forever.
Not just for ten or twenty times.
Notice that you can't attach anything underneath it
because nothing can happen after it.
"Forever" will keep on repeating forever and you can never
leave
the "forever" loop.
So you can't attach any blocks underneath it.
I'm going to try this.
When ginger will reach the edge
he'll get stuck there basically.
See? And I can drag him back.
Now what I want to do
in order to make ginger
controllable by user to add
some code
which checks if the user is pressing any keys
on the keyboard
and in which case that will change
what ginger is doing in some way.
Now to do that
I use the "if" block
and the "if" block
does what is inside it
if something happens.
What should happen?
If the user
presses a key on the keyboard.
Now I'm going to check
if the user is pressing
the left arrow key
and if the user presses the left arrow key
I want ginger
to rotate
anti-clockwise.
Let's try that.
See? Now it's not just
the left arrow key that should work obviously. We need to also check
right arrow key.
And to do that I can just
right click on that if block,
duplicate it,
insert it underneath,
change this
left arrow key to a right arrow key,
remove this
and turn instead
clockwise.
Now we can make ginger go round
in circles
and basically change the direction that he's
flying in space in.
The challenge of the game is that you can't stop ginger,
you can only change direction that he's going.
Okay now,
it's time to add
an antagonist
to the game, an enemy,
so we'll add a dog.
To do that we click go over here
and find a picture
for the dog.
I'm going to choose this this one.
This is the dog and at the moment the dog is a little too big
so we'll make him a little smaller,
not too small though
he has to look like a real dog,
and I'll change his name to "butch".
Now butch should
have a program
in order to chase ginger.
Now to write a program for butch
we should make sure that
butch's icon
is selected rather than ginger's.
Notice that there isn't any program anymore. Why?
Because this is where you write butch's program.
If you click on ginger
this is ginger's program.
So two different programs control the two different characters.
Okay now
I'll be doing the same thing.
I'll say "Hey butch, when
the green flag is clicked
I want you to forever
point towards ginger
and move forward."
Now obviously,
if I try this,
butch will immediately catch-up
with ginger.
The reason is
because
ginger has to
stop and wait orders zero point zero one seconds
after every ten steps
while butch doesn't.
So I'll make butch look like he's running by adding costumes to him
just like we did with ginger
and this time I have to import the second costume because
we have created
this character ourselves.
And I will find...
Here it is, the second costume.
So now butch will look like
he is moving his legs as he walks.
Again I will
make him change costume
after every ten steps
and
we'll make him wait
for zero point zero one seconds.
Now in order
to make this game a little
easier we should
make butch
move less
after every step so that
it will be easier
to out run butch.
So instead of moving ten steps forward
after every step
instead we move just five.
Great! See? Already a decent game
in just a few minutes.
This is the nice thing about Scratch. You can write
cartoonish
cool games
really easily
without too much
complexity in the code.
See? Everything is easy to do.
At the moment nothing happens
when butch
catches up with ginger
but what we're doing is that we have to drag
butch and ginger apart after every game.
So how about we solve that first?
The first thing that should happen
before the main loop starts
is that both butch
and ginger start
in their initial positions
and you can check
what coordinates
those positions are by
checking what is written down here.
So butch is at
minus hundred fifty x
and zero y
and ginger is
at a hundred and fifty x
and zero y.
I want ginger
to start at
start at
a hundred and fifty x and
zero y
and I also want him
to point
towards butch
to the left.
Butch on the other hand I want him to
start at
minus
hundred and fifty x
and zero y
and I want him
to point
towards the right.
Let's see that work.
So the first thing that will happen when the flag is clicked
is that they start at their initial positions
and then the main loop
starts working in which they start running around.
See? Now even if
butch catches up with ginger
when we start that game again
they will start at
the same position.
Okay now
what I want to do is to
tell butch
to notice
when he is touching ginger
at the stop the game
because in that case the user has lost.
Ginger has been caught.
So I go in
butch's code
and I
insert an "if"
statement
which checks if
butch is touching ginger.
We can use this
and say "Hey butch, if you're touching
ginger
then stop
all execution. Stop
all the programs of every character."
And in that way
you'll notice that you have lost.
Now let's try that.
See? The program stops. We have to start again
and when that happens, when we start again, they'll start back in their
initial position.
See? Okay now,
it's not much fun stopping the game
when you lose.
You need to be able to restart
so that you don't have to reclick the green flag.
So rather than stopping the program,
what I want to do
is to
go back to the initial position
as soon as
ginger has been touched.
I also want ginger
to go to his initial position.
So how will butch tell ginger
that he has been touched and he should go back to the initial position? Now I can make
ginger also check if he's touching butch,
but there's a better way to do that,
and that is to
broadcast messages
to make the characters talk among themselves.
So I want
butch to tell ginger that he has been caught.
I create a new message
and I want butch to give the message
to ginger which is "caught".
"You've been caught."
And I want ginger
to pay attention to that message. To say "Hey ginger,
when you receive the message that you've been caught,
you should
go back to your
initial position."
But the nice thing about messages, about broadcasting messages, is that
the character that sent the message can also listen to it himself.
So butch can also
pay attention to that very same message.
And I'll say "Hey butch, when you
tell yourself
that you have caught ginger,
you should also go back
to your initial position."
The nice thing about this is that you're separating
the concerns of the program, you're separating what the programs should do.
So this program only takes care
of the main activity, what
the character mainly does
and this just says
what the character does in case he has caught ginger.
When this happens,
when the "caught" message has been broadcast,
the main loop will still continue running, but
the x, y and direction
will be
reset to their initial
settings
so although
this will still be working,
both butch and ginger,
although their main loop will be still be working, both of the characters will have
restarted back to their initial position.
And this will continue working, they will continue moving
ten steps forward, change costume, bla bla bla.
So let's see that work. See?
Every time
that butch
catches ginger
they both go back to their initial position.
There's something strangely satisfying about
playing your own game. Hmm...
Now what I want to do is to add
a score of some kind
and a good score for this game would be the time,
the time that has passed
since the game has started, in other words for how long
have you lasted before butch
would have caught you.
Now to do that
we're going to need
something called a variable.
Now what is a variable?
A variable
is a word
which
represents a number. A word which means a number.
An example of this is age.
Your age,
the word "age",
is representing how old you are
and the same word
can mean different numbers on different years.
So if you're sixteen
this year
the word age this year means sixteen, but next year it will mean seventeen
and the year after it will mean eighteen.
Now, in the same way,
we want to create a variable
which
means
the time,
which means how many seconds have passed
since
the beginning of the game.
Now where does this belong?
Does the time belong to ginger or to butch?
It belongs to everyone, so we'll put it in the stage.
So we will create a variable called "time"
and time
starts out as being zero,
but then we'll add one to it every second
so that we keep track of the time,
of the number of seconds that have passed.
We write a program in the stage now
and again we'll say
"Hey stage,
when the green flag is clicked,
I want you to
forever
change
the time
by one.
In other words add one to the time.
So it starts at zero
then it starts adding one, so it becomes a one, a two, a three,
etc.
but we only want that to happen
after waiting for a second.
So every second
the time will add by one.
I also want to make sure
that the time starts
from zero. So I set it at the beginning, before the loop starts, to zero.
Now let's see that work.
Time is one.
Time is two, four, five. See?
We're adding one to time automatically every second.
Now what we want to do
is to make the time
restart to zero
every time that
ginger is caught.
So, we'll make the stage pay attention
to when ginger has been caught,
to the message that
butch broadcasts,
and when that happens
we want to set the time to zero.
Let's see that work.
It starts at zero, one, two, three, four, five,
and it goes back to zero. One, two, three, four, five, six.
It goes back to zero, one, two, goes back to zero.
See?
Okay now,
In order to have a decent game we should keep
the high score
in other words what the best time has been.
In other words, which best time? What's the longest time that you have managed to keep
before butch finally catches up with you.
To do that,
we need to
add another variable
called "besttime"
and we will change this
every time that
the cat has been caught, every time thatginger has been caught.
So what we'll do is
we'll add another variable,
called best time,
the best time will show here, and
I want to
every time that
ginger has been caught
I want to check if
the current time
is better than
the best time
and if it's longer than the best time then
that time should be
the best time.
I'm going to need this,
and this means "greater than",
and I'm going to say "Hey stage,
if the current time is greater than
the current best time
then set the best time to be the current time.
And this will look like this. If the time
is better
then the best time,
then set
the best time to be
the current time.
Does this make sense?
The best time is only set to the current time
if the current time is
greater than the best time.
Let's see that work.
So the best time at the moment is zero.
Now it's six.
It remained six.
Still six.
But if you last for longer than six,
it's seven, eight,
now it's nine, the best time.
So the best time has only been changed because
we have reached a better time.
If we try to play again
the best time is still nine
but that's not what we want is it?
We want the best time to start again to start again from zero.
So, when the flag is clicked, we want to not only set the time to zero
but also set the best time to zero. See?
Isn't this cool?
The best time is two.
Now it's five, etc.
See?
If we start again it starts back from zero.
Okay now,
what if we could also keep a list
of all the times
of the games that have been played.
To do that,
we use a list,
create one called
"times"
and this is where the list will appear.
And what we should do is
that every time that the user loses
we want to add
the current time
to the times, to the list of times.
Add the current time
to the list of times. Notice that it has nothing to do with whether or not
it's better than the best time
because we want to add every time
to the list of times.
Now we also want to
make sure that
the list of times starts out empty. So we delete
everything
from the list of times
and then we can start.
Let's see that work.
Okay so, first game lasted two seconds, second game also lasted two seconds,
third game lasted five seconds, which is the current best time,
fourth game lasted four seconds which didn't beat the best time,
fifth game lasted also four seconds which didn't beat the best time,
sixth games lasted six seconds which is the new best time. See?
Now we can know how many
times we have played,
the times of each game,
and the best time
at this point.
Now, if you had to try to do with this very same game using another programming language,
such as Java,
this would have taken
much, much longer to do
and it would have been much harder as well.
In Scratch all of the instructions are really easy
they're easy to use, they're easy to understand and the programs are
quite fun to do as well
which might not be the case in Java.
You can
add your own features to the game such as
making butch go faster every second
or adding power ups which make ginger speed up
or teleporting or becoming invisible, making
butch stop chasing him or other things like that.
Let me know of any new ideas that you have actually tried yourself in the
comments below, I look forward to seeing them,
and I'll see you next time.