Intro to Scratch Games 1: Moving a Sprite with the Keyboard

About this lesson

In this lesson we will learn the basics of scratch and moving sprites using cartesian coordinates.

Concepts Reviewed:

Cartesian Coordinates
Step 1
In this course we are going to build an obstacle course game with multiple levels!

This course is going to show you many of the core features of Scratch and give you some practice with them. When you're done you should be able to make your own simple games or move on to our advanced course!

In this lesson we are going to familiarize ourselves with the basics of the scratch environment and add the ability to move the player around the scene using the arrow keys!

Here is a demo version of the game we are going to build.

Click the green flag to start the game and give it a try. Beware, it is very difficult!

Step 2
This is what we are going to make in the first lesson:

In this lesson you will learn the basics of the scratch environment and how to move a sprite around using the keyboard!

When you complete this lesson you should have a basic understanding of cartesian coordinates, order of execution, keyboard input, sprites, and backdrops!

Step 3
Begin by making a new project in Scratch.

Every new game or animation you make will be stored in its own "Scratch Project".

Step 4
Drag the "move 10 steps" block into the scripting area.

Step 5
Click the block to see what it does!
Step 6
Add a "Play Drum" block from the "Sound" section.
Step 7
When you click the top block, it activates all of the blocks in the stack.
Step 8
Grab another "Move" block and change the value to "-10"
Step 9
Add another "Play Drum" block and use the dropdown menu to select the cymbal sound.
Step 10
Click the stack to see what you've made!
Step 11
Next add a "when flag clicked" block to the top of our code from earlier.

This block is called an "event block" or "hat block"

We can use these blocks to activate blocks of code when certain things happen.

Now when we click the green flag above our game, it activates our code!

Step 12
Stacks of blocks perform their actions in order from top to bottom.

In this case the cat moves right, plays a drum beat, moves left, and then plays a cymbal.

This is called order of execution.

Step 13
Replace the "move" blocks with "change X by" blocks

Notice that activating the code blocks does the same thing!

That's because the "move" block moves the sprite in the direction it's pointing, and sprites start out pointing right. This will make more sense once you've done the next few steps.

Step 14
Play this game to practice using X and Y coordinates!

The location of a sprite or the mouse in the game area can be determined by the X (horizontal) and Y (vertical) position.

Step 15
Add a "change y by 10" block to your cat.

Add all four of these movement blocks to your cat.

Using these four blocks we can make the sprite move in any direction we want!

Step 16
Attach a "when up arrow pressed" block to the "change y by 10" block.

The cat moves up when we press up on the keyboard now!

Step 17
CHALLENGE: Make your player respond correctly to the other three arrow keys also!

Try to generalize what you learned in the last step.

Check Your Work
Step 18
If your code is correct, you should be able to move the cat in any direction using the arrow keys!
Step 19
Change our cat's rotation style to "left-right" as shown. This will prevent it from turning upside-down.
Step 20
Now let's try using the "point in direction" block to make the cat change the direction it is facing.
Step 21
Add "point in direction" blocks to the controls for left and right so our cat faces the direction it is moving.
Step 22
Your cat should now turn to face the direction it is moving, like this:
Step 23
Let's make our scene look more interesting by adding a backdrop.

Click the button indicated by the red arrow to select a backdrop from the scratch library.

Step 24
Select any backdrop you want and click "OK"

"school1" is only an example here, you can choose any backdrop you want.

Check Your Work
Step 25
Your scene should now have a more interesting background!
Step 26
The scratch cat is a little boring, let's choose a new sprite to use instead.

This button will allow you to select a new sprite from the scratch library.

Step 27
Select whatever sprite you want to use and click "OK"
Check Your Work
Step 28
You should now have a scene that looks something like this.
Step 29
Notice that our code only makes the cat move, it doesn't do anything to the dog.

This is because the code we build is specific to the sprite it is on, so the code we've done so far is only on the cat sprite. The dog sprite has no code on it because we just created it.

Step 30
Drag these four blocks of code from the cat onto the dog
Step 31
Delete "Sprite1" by right clicking on it and selecting "delete"
Check Your Work
Step 32
You should now be able to move the sprite you've chosen around on the backdrop of your choice!

NOTE: Remember to change the rotation style to left-right for the dog sprite!
Refer to step 19 if you need help remembering what to do.

Step 33
Check your understanding!

Before moving on to the next lesson, grab and instructor and explain the following concepts to them:

1. Order of Execution
2. Cartesian Coordinates (X & Y)
3. Keyboard Input

Step 34
In the next lesson we learn how to draw our own sprites and code our enemies!
Intro to Scratch Games 1: Moving a Sprite with the Keyboard Info



Created By



Intro to Scratch: Game Development

Access Level


For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach