We are going to learn to program!

We Are going To Learn To Program!
Using Scratch

With Scratch, you can program your own interactive stories,
games, and animations — and share your creations with
others in the online community.
Scratch helps young people learn to think creatively, reason
systematically, and work collaboratively — essential skills
for life in the 21st century.

Learn to Code, Code to Learn
The ability to code computer programs is
an important part of literacy in today’s
society. When people learn to code in
Scratch, they learn important strategies
for solving problems, designing projects,
and communicating ideas.

You can download a copy of Scratch at ….
http://scratch.mit.edu/scratch_1.4/
Yes, it is FREE!

Today we are going to learn to program a very
simple cat and mouse game.
Open Scratch. You will see a very simple interface.

Sprite Preview
Sprite 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.
The first thing we are going to do is concentrate
on the cat. We want it to move forward,
backward, up and down using the arrow keys.
Just like any game you may play on your
computer.
From our toolbox we are going to use the
motion and control tools.

You can move the cat around the screen just by
clicking on it in the preview window and dragging
it around. Drag it outside of the preview window
and letting go will make it appear back in the
preview window.
Try moving the cat around!

Big Yawn! Let’s use the keys on the keyboard
instead.
Click on the control tab and drag into the sprite
editor block the when space key is pressed block
(look at the next slide as an example).

Don’t think you are always going to get
this kind of help. Soon you will need to
work things out for yourself 

So, when the space bar is clicked we need to
get the cat to do something. Can you guess
what it is from the Tool Box? You have a 1/8
chance of getting it right. You have 10
seconds before the answer is revealed
Motion

So, click on the motion tab in your tool box and drag the
move 10 steps line of code into your sprite editor window.
You will see from the following screen shot that the new
line of code will fit snugly into the when space key is
pressed code (like tiles in a jigsaw puzzle fitting together).
Now press the space bar on your keyboard and see what
happens.

Nice key the space bar but it’s not actually what we want
as it only allows movement in one direction. So, let’s
change the spacebar to (say) right arrow key.
Next to the word space click the
arrow and choose right arrow
from the drop-down menu. Now
try it out using the right arrow key
on your keyboard.

Arduous task (big snigger).
Now, duplicate the code you have just written to make the
cat move backward when the left arrow key is clicked.
Think of negative numbers – you’ll never get
away from maths in computing 

Hopefully you will have done the following…..

Now we need to get the cat to move up and down. Here’s
where your maths comes in again 
The control aspect of the code is easy but what about
moving up and down?
Click on the motion tab and decide
on which of the lines of code will
move the cat up.
Maths: co-ordinates

Hopefully you will have remembered your x and y co-
ordinates!
To move the cat up we need to use
the y coordinate. So you will need
to write a new line of code so that
when the up arrow is pressed the
cat will change y by 10.
Try it out and see if you are
correct.

Now, let’s finish off the cat (not literally
but metaphorically)
Can you write the
last line of code so
that the cat moves
down when the
down arrow is
clicked?

For those mathematicians amongst
you (which is ALL I hope). For the
first two lines of code we could
have used an alternative piece of
code for the motion (instead of
move 10 steps or move -10 steps).
What could we have used?

Well, the cat is more-or-less done. Now we need the
mouse.
Click on the choose a
new sprite from file
tab in the sprite
selection and creation
window. From the
animals folder choose
mouse1

Now we have our cat and mouse together on the screen.
As you can see the mouse is
rather large compared to the
cat so we will need to reduce it
in size.

Click on Sprite2 in the sprite
selection and creation window (if
we are going to do anything with a
particular sprite then we need to
select it first).
Go to the sprite editor window and
select the costumes tab. See next
slide.

We are now going to make the
mouse smaller so we need to
click the edit tab.

Click on the shrink button
about 4 times to make the
mouse smaller. Then click the
OK button.

I wonder if any of you noticed
that there is another way to
shrink the mouse without using
the edit tab.
Does anybody know how?
20 seconds before the
alternative method is
revealed.

Now, this is going to be a ‘twist’ on the cat and mouse
game. The mouse is going to chase the cat!
Before we do that let’s tidy things up.
We really need to rename Sprite1 and
Sprite2. After all, Sprite1 is a cat and
Sprite2 is a mouse. So, click on Sprite1
in the sprite selection and creation
window and change its name to cat. Do
the same for the mouse.

Let us first have the mouse follow the cat.
Going back to earlier on. If you click
on the cat sprite and then the scripts
tab you will see the code you wrote a
while back to get the cat to move. If
you do the same for the mouse you
will see nothing (hopefully).
Remember: we must select the
sprite we are going to work with
before we can make ANY changes.

We are now going to get the mouse to follow the cat.
Having selected the mouse sprite and then the scripts tab
we are ready to start.
The first thing we want to do is to get the mouse to do
whatever we want (i.e. to follow the cat for the moment)
when the green flag is pressed.
The green flag is in
the top right hand
corner of the
Scratch window.

Click on the control tab and drag in the when the green
Flag is clicked line of code.
note that we know that we are
programming
the mouse because it appears
at the top of the
scripts window.

Now what we want to do is to get the mouse to point
towards the cat forever. So, staying in the control tab drag
the forever code and join it to the existing when green
flag is clicked.
Pointing towards the cat is
a motion command so,
click on the motion tab
and look for the point
towards line of code.

Drag this point towards line of code into the forever
block – it fits together just like a jigsaw!
To the right of the point towards
line of code is an arrow. If you click
on the arrow you have 2 choices.
Choose mouse-pointer and see
what happens.
Note: If nothing happens then you
are not following the code. See
next slide

If you are going to learn to think creatively, reason
systematically, and work collaboratively (remember slide
2?) then you MUST understand what is going on. The
command block says …….
When green arrow
clicked – did you
click it?
Well done to those
who did get it
correct.

Now go back to the point towards command and change it
to cat.
Now drag the cat around the sprite preview window and
see what happens.
Try it with the arrow
keys.

I wonder how may people forgot to click the green flag 
Now we want to get the mouse to move towards the cat.
The move command, of course, is a motion command so,
with the motion tab open drag the move 10 steps line of
code and place it beneath the point towards cat code.
You may see something weird happening i.e. the mouse
moving at a fast rate. If this is the case then just stop the
program by clicking the red circle next to the green flag.

With the new line of code inserted, change the number
of steps to one.
Now run your code (don’t
forget the green flag) and play
with the left/right/up/down
keys.

Let’s ….. read through the code and ask if there
is anything you do not understand.

Now let’s edit our cat.
1. Click on the cat
sprite first
2. Click on the
costumes tab
3. Click on the edit
button
1
2
3

Hopefully, the paint editor window will have opened.
We are going to replace our cat in another view.

Click on the clear button and this will remove the cat
from our window..

Now click on the import button as we are going to import a
new cat from our library of images.

Find the animals folder and click on the cat2 image and
then click the OK button.

Click 3 times on the grow button and then click OK.

OK. We know what you are thinking (or may have already
said): “Cats DON’T move backwards like that”. So let’s
change that.
Click on the cat sprite (bottom right-hand side of the
Scratch window) and make sure the scripts tab is
selected.
Delete ALL your lines of code by dragging them to the
left (into the tool box area). You should have no scripts.

Now click on the control tab and drag in when up arrow
key pressed.
I bet someone says that there is no such code – well there
is but it says (at first) when space key pressed but you have
been following the instructions earlier on without taking
any notice of the what they actually mean.

Now add to your code …. move 10 steps (it is a motion so
what tab should you be choosing?)

Now, when the left arrow key is pressed we want the cat
to start moving around so we will now choose when left
arrow key pressed and drag in turn left 15 degrees (as the
cat it turning left then logically we should be choosing the
anti-clockwise icon).

Well, it’s not really some cataclysmic,
mind-boggling challenge but we can’t
have everything, can we!
Write the code for the when the right-hand key is pressed.

Was it really that boring? 

Hopefully you have been trying out your code as you
go along. If not then you have 30 seconds now before
the next slide.

OK. So what? Well we want something to happen when
the mouse catches the cat. There are two things we can
do. The first one is simply for the cat to say meow.
So….. what we want to do is to write some code so that
when the mouse touches the cat it says meow (the cat
that is, not the mouse). So here goes.

The first thing we need to do is to drag in a when green flag
clicked command line. This will ensure that our code will
always run when the green flag is chosen.
The second thing we need to do is make sure that the cat
sprite is selected. In the scripts area we need to drag in a
forever command (think about it, we want the cat to say
meow every time that it is touched by the mouse).
Join the two together.

So far everything has been easy 
but now we need to start thinking
logically. So, what do we want to
happen? (a rhetorical question –
unless you are clever enough to
know the answer).
We want the cat to say meow if it is
touched. The if command is
important in programming so take
note!

Go to the control tab and drag in the if line of code ( there
are three options with if in them – we only want the one
that just says if on its own). Place the if command in the
forever block (see, doing jigsaw puzzles does help).

Now we want to tell the program what to do if the mouse
is touching the cat.
To touch is one of our five senses so we need now to select
the sensing tab and drag the touching code into our if
command block

To the right of the touching word is an arrow, click on it
and choose mouse.
Now, the next part is logically illogical! Perhaps you might
not agree.
Anyway, we want the cat to say meow when it is touched
by the mouse so we go to the looks tab (duh! why the
looks tab – don’t ask me as I said, it’s logically illogical!
But it is a lovely purple colour )

From the looks tab choose the say hello for 2 secs block
and drag it into the if command block. Change the text to
say meow! for 1 second. Run your program.

Well, we are nearly at the end of this first session. Let’s
get the cat to actually say meow.
Meow is a sound (duh! really ) so, click on the sound tab
(such a lovely pink colour) and select the play sound line
of code. Surprisingly it will actually have the sound meow
already there. Drag it underneath the say meow! for 1
secs line of code. Run the program.

Well that’s it for the moment. Save
your work in your folder as “cat and
mouse” – if you have time then play
with the program. Maybe you could
change it to cat and dog or cat and
bird or something of your own.

We are going to learn to program!

More Related Content

Similar to We are going to learn to program!

Recently uploaded

We are going to learn to program!