How to Make a Character (Sprite) Jump in Scratch

Ryan Barone
May 09, 2022

Creating a platformer game in Scratch is a fun and engaging way to learn coding. Within that, jumping is a key mechanic in such games, allowing characters to move from platform to platform. 

Here's a step-by-step guide to making your Scratch sprite jump.

1. Set Up Your Game Environment

Create the Ground and Platforms

  • Draw a Ground sprite for your character to stand on.
  • Add Platform sprites for your character to jump onto.

TIP: Make sure the top color of the platforms matches the color of the ground exactly. If you look at the example below, both the ground and the platform tops are light purple.

Position and Resize Sprites

  • Arrange your ground, platforms, and character sprite in the game preview window to build your basic game layout.

sprite character jumping onto platforms

Step 2: Prepare the Character Sprite

Add Costumes for Directional Movement

Your sprite should have at least two costumes: Right and Left. This will allow the character to turn when the arrow keys are pressed.

  • Draw the character facing the right side of the screen.
  • Right-click the costume and select Duplicate.
  • Highlight the entire character, then click Flip Horizontal to create the left-facing version.

gif of a scrtch character turning left and right

Step 3: Code Character Movement

Moving Right and Left

Select the character sprite and add the following code:

1. Select the player character sprite and add "when right arrow key pressed" to the code area.
2. Attach a "switch costume to Right" and "change x" block with a value of "20."
3. Right-click and "Duplicate" the code block, and change the key to left arrow.
4. Change the costume to "Left" and the "x" value to "-20."

screenshot of scratch blocks for player movement

Step 4: Code the Jumping Mechanic

Jumping Up

In Scratch, jumping up is achieved by changing the character's y position.

First, add a "when up arrow key pressed" to the code area. Then, attach a "repeat" block set to "15," and place "change y" by "10" inside of it.

Falling Back Down

When jumping in real life, gravity naturally brings you back to the ground. In Scratch, you'll need to code this manually.

Attach a "repeat until <>" block under the previous repeat block.

Before going further, remember the tip above where we said the ground color needs to be the same as the top of the platform color? 

So, click the "color" variable" and then select the eyedropper tool from the "color" menu. From there, hover over the "Ground" color and then click to select it. 

Inside the "repeat until" block, add "change y" by "-10."

gif showing how to use the eyedropper tool in scratch

TIP: If there's a platform directly above your character, you might get stuck on the first jump. This happens because the top of your character is technically touching the ground color, and so it thinks it doesn't need to fall! Here is a fix:

In the "repeat 15" block, attach an "if <> then" block under the "change y" block. Then, add the color to the "if" brackets and select the bottom color of the platform and inside the "if" block, add "change y" by "-10."

And with all of that, your child should be well on their way to completing their Scratch creation—jumping and all! If you're looking to take the next step, check out our many summer camps in ScratchScratch coding classes or Online Private Lessons.  

 

Meet iD Tech!

Sign up for our emails to learn more about why iD Tech is #1 in STEM education! Be the first to hear about new courses, locations, programs, and partnerships–plus receive exclusive promotions! Online camps, Roblox coding classes, coding summer courses, and more. 

By signing up you agree to our Privacy Policy
Subscribe & Save!

Meet iD Tech!

Sign up for our emails to learn more about why iD Tech is #1 in STEM education! Be the first to hear about new courses, locations, programs, and partnerships–plus receive exclusive promotions! Online camps, Roblox coding classes, coding summer courses, and more. 

By signing up you agree to our Privacy Policy