Jump & Run! Build a Platformer in Scratch

1

🐱

Set Up Your Project

Open Scratch, name your project and set up the backdrop

Active

🎯

Goal for this step

Get a fresh Scratch project open with a platform-style backdrop and your player sprite ready.

👨‍👧

Parent note: This workshop is a step up from Episode 1. It introduces gravity a variable that constantly pulls the player down — and colour-based collision to land on platforms. Take your time on Steps 3 and 4!

Create the project

1Go to scratch.mit.edu and click Start Creating.
2Name the project "Jump and Run Platformer".
3Delete the Scratch Cat sprite (right-click → Delete).
4Click the Stage backdrop area and choose a backdrop. Pick "Blue Sky" or "Colorful City" — something with a sky feel.

💡

For a platformer, the backdrop should be a plain sky or simple background the platforms will be sprites drawn right over it.

🧠

Knowledge Check

+15 XP

Why should a platformer's backdrop be a simple sky or plain background?

ABecause Scratch can only use one colour as a backdrop

BBecause complex backdrops make the code harder to write

CBecause the platforms will be drawn as separate sprites on top of the backdrop

2

🧑

Create Your Player Sprite

Draw or choose a character and position them on screen

Locked

🎯

Goal for this step

Add a player sprite that sits at the left side of the screen ready to move.

1Click Choose a Sprite and search for "Pico", "Tera" or any character you like. Add it.
2Set the Size to 60 in the properties area.
3Drag the sprite to the bottom-left of the stage. This is the starting position.
4In the sprite's Costumes tab, check it has at least 2 costumes (for walking animation). If not, you can duplicate the costume and flip it.

🧠

Knowledge Check

+15 XP

Why does the player sprite need at least 2 costumes?

ASo the sprite can change colour when hit

BSo we can create a walking animation by switching between costumes

CScratch requires every sprite to have at least 2 costumes

3

⬅️

Add Left & Right Movement

Make the player walk using arrow keys with a walking animation

Locked

🎯

Goal for this step

The player moves left and right, faces the right direction, and plays a walking animation.

1Select the player sprite. Drag in a "when 🏳 clicked" block, then a "forever" loop.
2Inside forever: add "if key [right arrow] pressed? then". Inside: "change x by (5)" and "point in direction (90)" and "next costume".
3Add another if: "if key [left arrow] pressed? then". Inside: "change x by (-5)" and "point in direction (-90)" and "next costume".

🧑 Player — Movement

when 🏳 clicked forever if key [right arrow] pressed? then change x by (5) point in direction (90) next costume end if key [left arrow] pressed? then change x by (-5) point in direction (-90) next costume end end

💡

Set Rotation style to "left-right" in the sprite properties so your character doesn't flip upside-down!

✏️

Fill in the Concept

+15 XP

To move the player right we use "change x by ". To move left we change x by . The "next costume" block creates a animation.

💻

Code Challenge

+20 XP

Fill in the blanks to make the player move left with animation:

if key [] pressed? then change x by () point in direction () next costume end

💡 Hint: Moving left means negative x change and direction -90.

🧠

Knowledge Check

+15 XP

What does "next costume" do in the movement script?

AIt makes the sprite bigger

BIt switches to the next costume to create a walking animation

CIt creates a new sprite on the stage

4

⬇️

Add Gravity & Jumping

The most important part — make the player fall down and jump up

Locked

🎯

Goal for this step

A gravity variable pulls the player down each frame. Pressing up arrow adds upward velocity to jump.

👨‍👧

Parent note: Gravity in Scratch works by having a variable (YVelocity) that changes y position every frame. We add -1 each tick to simulate gravity pulling down. When jumping, we set YVelocity to a positive number to go up.

Create variables

1Make two variables: YVelocity and OnGround. Uncheck both so they don't show on stage.

Add the gravity script (separate script stack)

2Drag a new "when 🏳 clicked" block. Set YVelocity to 0. Add a forever loop.
3Inside forever: "change YVelocity by (-1)" (gravity pulls down), then "change y by (YVelocity)".
4Add: "if touching color [green]? then" we'll draw green platforms next step. Inside: "set YVelocity to 0" and "set OnGround to 1" and "change y by 2" (push out of floor).
5Otherwise (else): "set OnGround to 0".

Add jump (inside your first forever loop)

6Inside your movement forever loop, add: "if key [up arrow] pressed? and OnGround = 1 then set YVelocity to 12".

🧑 Player — Gravity Script (separate stack)

when 🏳 clicked set [YVelocity] to (0) forever change [YVelocity] by (-1) change y by (YVelocity) if touching color [green]? then set [YVelocity] to (0) set [OnGround] to (1) change y by (2) else set [OnGround] to (0) end end

⚡

True or False — Gravity

+15 XP

YVelocity is a variable that controls how fast the player moves up or down.

Gravity in Scratch is a built-in feature that you don't need to code.

We set OnGround to 1 when the player is touching the green platform colour.

💻

Code Challenge

+20 XP

Fill in the blanks to complete the gravity and ground-detection script:

change [YVelocity] by () change y by () if touching color [green]? then set [YVelocity] to () set [OnGround] to () end

💡 Hint: Gravity pulls down with -1 each frame. When touching the ground, velocity resets to 0 and OnGround becomes 1.

🧠

Knowledge Check

+15 XP

Why do we check OnGround = 1 before allowing the player to jump?

ATo prevent the player from jumping while already in the air (double-jumping)

BTo make the jump animation play correctly

CBecause Scratch only allows one jump per game

5

🟩

Draw Your Platforms

Create a platform sprite the player can land on

Locked

🎯

Goal for this step

Draw a green platform sprite with multiple floor sections so the player has somewhere to land.

1Click Paint (paintbrush icon) in the sprite menu to draw a new sprite.
2In the costume editor, use the Rectangle tool. Set the fill colour to solid green.
3Draw a wide rectangle at the bottom of the costume this is the floor.
4Draw several smaller rectangles at different heights these are your platforms to jump to.
5Name this sprite Platforms.
6In the Code tab, add "when 🏳 clicked → go to x: 0 y: 0" so it stays fixed.
7Press Green Flag — your player should land on the green floor and be able to jump to the platforms!

📖

The gravity script detects touching color green so the platform sprite must be exactly that green. Click the colour in the "touching color?" block and use the eyedropper to pick the exact green you painted.

🔮

Predict What Happens

+15 XP

Scenario: You draw your platforms using blue instead of green, but your gravity script still checks for "touching color green?". What happens when the player lands on a platform?

AThe player lands normally because Scratch detects any platform colour

BThe player falls straight through the platform because the colour doesn't match

CThe game crashes with an error

🧠

Knowledge Check

+15 XP

How does the player sprite know it has landed on a platform?

AIt checks if the y position is exactly 0

BIt uses a "touching sprite" block to check

CIt uses "touching color green?" to detect the green platform colour

6

🪙

Add Coins to Collect

Scatter coins around the level collect them for points

Locked

🎯

Goal for this step

Place coin sprites around the level that disappear when the player touches them and add to the score.

1Make a variable called Score.
2Click Choose a Sprite and search for "Ball" or paint a small yellow circle. Name it Coin.
3Set size to 30. In the Code tab, add: "when 🏳 clicked → show → go to x: (50) y: (20)" — position it on a platform.
4Add a forever loop with: "if touching [Player]? then change Score by 1 → hide".
5Right-click the Coin sprite in the Sprite Panel and choose Duplicate several times. Move each copy to a different platform.

💡

Each duplicated coin is a separate sprite with its own position. Move them onto different platforms by dragging them on the stage.

✏️

Fill in the Concept

+15 XP

When the coin detects it is the Player, it adds to the Score variable and then uses to disappear.

💻

Code Challenge

+20 XP

Fill in the blanks to make the coin disappear and add to the score when collected:

if [Player]? then change [Score] by () end

💡 Hint: We need a Sensing block to detect the player, add 1 to the score, and make the coin disappear.

🧠

Knowledge Check

+15 XP

How do you create multiple coins placed in different positions?

AUse a clone block to stamp copies at runtime

BRight-click the Coin sprite and Duplicate it, then drag each copy to a different platform

CChange the coin's size so it looks like multiple coins

7

💀

Add Hazards & Respawn

Touching spikes or falling off screen sends you back to start

Locked

🎯

Goal for this step

Add red spikes that reset the player's position when touched, and catch them if they fall off screen.

1In the Platforms sprite costume editor, draw some red triangles as spikes on top of some platforms.
2In the player's gravity script, add: "if touching color [red]? then go to x: (-180) y: (-100)" (the starting position).
3Also add: "if y position < -170 then go to x: (-180) y: (-100)" this catches the player if they fall off the bottom.

⚠️

Make sure to use the eyedropper tool to match the exact red colour of your spikes in the "touching color red?" block otherwise it won't trigger!

🔢

Order the Steps

+15 XP

Click the steps in the correct order to add hazard respawning:

Add "if touching color red? then go to start position" to the player script

Draw red triangles as spikes in the Platforms costume editor

Add "if y position < -170 then go to start" to catch falling players

Use the eyedropper to pick the exact red colour for the "touching color" block

💻

Code Challenge

+20 XP

Fill in the blanks to respawn the player when they touch a hazard or fall off screen:

if touching color []? then go to x: (-180) y: (-100) end if (y position) < () then go to x: () y: (-100) end

💡 Hint: Spikes are red. The bottom of the screen is around y = -170. The starting x position is -180.

🧠

Knowledge Check

+15 XP

Why do we also check "if y position < -170" in addition to the spike check?

ATo make the game harder by adding an extra hazard

BTo reset the score when the player falls

CTo catch the player if they fall off the bottom of the screen where there are no platforms

8

🏁

Add a Finish Flag

Place a flag at the end — reaching it wins the game!

Locked

🎯

Goal for this step

Place a flag sprite at the end of the level. Touching it shows a win message and stops the game.

1Click Choose a Sprite and search for "Flag". Add it and set size to 80.
2Drag the flag to the far right of the stage, on top of the highest platform.
3In the flag's code: "when 🏳 clicked → forever → if touching [Player]? then say [You Win! 🎉] for 3 seconds → stop all".

🎉

Test the full level — can you collect all the coins AND reach the flag without dying?

⚡

True or False — Finish Flag

+15 XP

The "stop all" block ends the entire game, stopping all sprites and scripts.

The flag sprite needs its own gravity script to stay on a platform.

The flag uses "if touching Player?" inside a forever loop to detect the player reaching it.

🧠

Knowledge Check

+15 XP

What block do you use to end the entire game when the player reaches the flag?

Astop [all]

Bdelete this sprite

Chide

9

⏱️

Add a Timer

Race against the clock to finish the level

Locked

🎯

Goal for this step

Add a 60-second countdown. If time runs out before reaching the flag, it's game over.

1Make a variable called Timer.
2In the Stage's scripts (click the Stage, not a sprite): add "when 🏳 clicked → set Timer to 60 → repeat until Timer = 0 → wait 1 second → change Timer by -1 → end".
3After the repeat: "say [Time's Up! Game Over] for 2 seconds → stop all".

✏️

Fill in the Concept

+15 XP

The timer starts at seconds. Each loop we 1 second, then change Timer by . When Timer reaches 0, the game ends.

💻

Code Challenge

+20 XP

Fill in the blanks to create a 60-second countdown timer:

set [Timer] to () repeat until (Timer) = () wait () seconds change [Timer] by () end

💡 Hint: Start at 60, wait 1 second each loop, subtract 1 from the timer until it reaches 0.

🧠

Knowledge Check

+15 XP

Why do we put the timer script on the Stage instead of a sprite?

ABecause sprites can't use variables

BBecause the timer is a global game feature, not tied to any specific sprite

CBecause the Stage runs code faster than sprites

10

🌍

Test & Share!

Play the full level, polish it up and publish

Locked

🎯

Goal for this step

Complete a full playthrough, fix anything tricky and publish your platformer.

1Press Green Flag and play through the whole level. Try to collect every coin and reach the flag!
2If the jump feels too floaty, lower the jump power (change 12 to 10). Too snappy? Raise it.
3If the level is too easy, move platforms further apart or add more red spikes.
4Click File → Save now then the orange Share button to publish.

🎉

You built a platformer with gravity, jumping, coins, hazards and a timer! That's a real game. Challenge a friend to beat your coin score!

🔮

Predict What Happens

+15 XP

Scenario: You change the jump power from 12 to 25. What happens when the player presses the up arrow?

AThe player jumps at the same height because Scratch limits jump power

BThe game freezes because 25 is too high a value

CThe player jumps much higher, possibly flying off the top of the screen

⚡

True or False — Full Game Review

+15 XP

The Score variable is shared across all coin sprites because it's a global variable.

You need to code gravity separately for every sprite in the game.

The timer script runs on the Stage, not on any sprite.

🧠

Final Knowledge Check

+15 XP

Which of these did you NOT use as a variable in this platformer?

AYVelocity

BScore

CHealth

DOnGround

Jump & Run!Side-Scrolling Platformer

Create the project

Create variables

Add the gravity script (separate script stack)

Add jump (inside your first forever loop)

Jump & Run!
Side-Scrolling Platformer