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?

Did you get it?

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 Sprite1in the sprite selection and creationwindow and change its name to cat. Dothe 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 first2. Click on the

costumes tab3. 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.