Skip to content

Please update your browser

Your browser version is not supported by this site. CS First may not work properly. Learn more

4. Hop, Skip, and a Jump


This video introduces gravity and jumping!

The hero will be able to fall through the cracks, but it can also jump over them to save itself from an untimely demise.

You may have learned about how gravity speeds up objects in science class.

It’s like accelerating when a stoplight turns green.

You hold your foot down on the gas, and the car keeps speeding up!

The same thing happens in skydiving when you jump out of a plane – you start out slow, then get faster and faster as you fall.

Keep these images in mind as you build the next part.

You’ll program the falling first.

Start the hero near the top-left corner of the stage, then let it fall with gravity and land on the ground.

Drag the hero to the starting place, but make sure it doesn’t touch the edge!

Then, pull out a “go to xy” block, and snap it above the motion loop.

Click the flag, and you’ll see the hero doesn’t fall!

Program the hero to fall, so long as it’s not touching the ground.

The “change y” block, in “motion,” changes a sprite’s up/down position.

Use this at the end of the motion loop to make the sprite come down.

Change the value to a negative number, like negative 10.


The sprite falls and keeps falling.

It should stop when it hits the ground.

Make a variable and call it “up/down speed,” or “y speed” or something similar that makes sense to you.

This variable will keep track of how fast the sprite is moving up or down.

First, place it into the “change y” block.

Next, set it to 0 at the beginning of the game (before the motion loop).

Then, make it change as long as the sprite is in the air (remember, gravity is pulling the hero down!).

For this, add an “if/else” block.

Place it below the other “if” block, then make sure the “change y” block is outside of it, at the bottom of the loop.

For the condition, check whether the hero is touching the ground.

Think for a second about what needs to happen next.

What is the up/down speed if the hero is touching the ground?

If it’s touching the ground, its up/down speed is 0.

Add this to the code.

Drag the “set variable” block into the top part of the “if/else,” and pick your new variable from the dropdown.

That will set the y speed to 0 when it’s touching the ground.

Now, consider what needs to happen when it’s not touching the ground.

The hero should keep speeding up until it reaches the ground.

To do this, change the variable by a small value each time the loop runs, so each time it will move downward faster.

In the “else” part of the block, place a “change variable” block.

Select your variable, and type negative 1 in the blank.

Test it!

Neat – it should fall, then stop when it hits the ground.

Finally, make it jump when you press the up arrow!

The hero can only jump when it’s touching the ground, so the code to jump should go inside the “touching ground” conditional.

Take another “if/else” block, and nest it inside the “touching ground” conditional at the top.

Use the up arrow or any key as the jump control.

Drag a “key pressed” block into the new “if/else.”

Pick “up arrow” from the dropdown.

If the up arrow is not pressed, that’s the same as before!

The hero isn’t moving up or down.

Snap the “set variable” block into the “else” portion of the block.

If the arrow is pressed, the jump starts.

Keep in mind that gravity is already working, so if the hero goes up, it will come back down.

All you have to do is start it going up, which you can do by setting the y speed.

Right click and duplicate the “set variable” block, then snap it into the “if” portion of the conditional.

Then, type a positive number, like 15.

If you start playing around, you’ll notice some code bugs.

And real bugs!

Where’d those come from?

You’ll sort all this out in the next video.

Now, it’s your turn.

arrow_backward Back
Next arrow_forward
  1. Start the hero in the right place.
  2. Move the ground below and make it stay.
  3. Create a variable.
  4. Place this variable in a "change y" block at the bottom of the motion loop.
  5. Make the variable change by negative 1 if the hero is in the air, or set it to 0 if it's on the ground.