Jump from the ground

Put the jump inside an if that asks whether the player is on the floor, so it only works from the ground.

In every platformer you can only jump when your feet are on something. Without that one rule, the player could climb the sky.

Last lesson the ball could be thrown up and came back down to a floor. Now the player jumps with A. A jump sets vy to a negative number. But where must the player be for a jump to make sense?

Predict: Read the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.
Run: Run it and compare the result with your prediction.
Investigate: Trace how each line of code connects to what you see.
Modify: Change the code on purpose and check the result.
Make: Build something new using what you have learned. Expect a few tries; that is normal.

Explain it to me

A jump only sets vy upwards · Sound on for the voiceover

A jump sets vy upwards. On its own it works on every press, even in mid-air.

So put the jump inside an if that asks whether the player is on the floor: if bottom ≥ 100. The floor keeps the bottom at 100 while the player stands, so the press only counts from the ground.

Show as code

scene.setBackgroundColor(9)
let player = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
player.setPosition(80, 20)
player.ay = 300
controller.moveSprite(player, 80, 0)
game.onUpdate(function () {
    if (player.bottom > 100) {
        player.bottom = 100
        player.vy = 0
    }
})
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
    if (player.bottom >= 100) {
        player.vy = -150
    }
})

The example, as blocks

What it makes (a moment from the game)

PredictRead the code and say what it will do before you run anything. A wrong guess is fine: it shows you what to look for.

Predict

Show as code

lesson.ts

scene.setBackgroundColor(9)
let player = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
player.setPosition(80, 20)
player.ay = 300
controller.moveSprite(player, 80, 0)
game.onUpdate(function () {
    if (player.bottom > 100) {
        player.bottom = 100
        player.vy = 0
    }
})
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
    player.vy = -150
})

Look at the on A pressed block. Does anything ask where the player is?

You press A three times, quickly, one press after another. What does the player do?Jumps three times, landing between eachJumps once; the other presses do nothingJumps higher and higher, and can fly off the top of the screenFalls through the floor

RunRun it and compare the result with your prediction.

Run

Press A (space) once and watch. Then press it again and again, quickly.

Show as code

lesson.ts

scene.setBackgroundColor(9)
let player = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
player.setPosition(80, 20)
player.ay = 300
controller.moveSprite(player, 80, 0)
game.onUpdate(function () {
    if (player.bottom > 100) {
        player.bottom = 100
        player.vy = 0
    }
})
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
    player.vy = -150
})

Try it yourselfYour edits are saved in this browser.

It takes a few seconds to load. Your work in this step is kept.

I pressed A again and again and compared what happened with my prediction.

InvestigateTrace how each line of code connects to what you see.

Investigate

This version has the fix. Try to fly with it.

Show as code

lesson.ts

scene.setBackgroundColor(9)
let player = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
player.setPosition(80, 20)
player.ay = 300
controller.moveSprite(player, 80, 0)
game.onUpdate(function () {
    if (player.bottom > 100) {
        player.bottom = 100
        player.vy = 0
    }
})
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
    if (player.bottom >= 100) {
        player.vy = -150
    }
})

Try it yourselfYour edits are saved in this browser.

It takes a few seconds to load. Your work in this step is kept.

Leo's player flies off the top when he presses A again and again. Why?Nothing checks the player is on the ground, so every press jumps again, even in mid-airay should be negativeThe floor pushes him up-150 is too big a number

This version jumps only if player bottom ≥ 100. Fill in what a press of A does.

player bottom when A is pressed	A does
100 (on the floor)
70 (rising)
95 (falling, nearly down)

Why is the floor's bottom exactly 100 when the player is standing?100 is the bottom of the screenThe jump sets itThe floor if sets it back to 100 every frame the player sinks below itGravity stops at 100

ModifyChange the code on purpose and check the result.

Modify

This is Leo's game. Fix it: A only jumps when the player is on the ground.

Need a hint?

Drag an if into the on A pressed block, around set vy.

Another hint

The question: player bottom ≥ 100 (from Logic, with bottom from Sprites).

Change the jump speed and the gravity. Pick the pair you like best.

Need a hint?

Make the jump weaker or stronger: a smaller or bigger negative vy.

Another hint

Then change ay: try 100 for the Moon, 600 for a heavy planet.

Try it yourselfYour edits are saved in this browser.

It takes a few seconds to load. Your work in this step is kept.

Fix the flying: A only jumps when the player is on the ground.

This ticks by itself when your blocks do what is asked.

I changed the jump and the gravity, and found a pair that feels right for my game.

InvestigateTrace how each line of code connects to what you see.

Mix it up

Show as code

lesson.ts

scene.setBackgroundColor(9)
let ball = sprites.create(img`
    . 2 2 .
    2 2 2 2
    2 2 2 2
    . 2 2 .
    `, SpriteKind.Player)
ball.setPosition(80, 10)
ball.ay = 200

A sprite starts still with ay 200. What is its vy after 1.5 seconds?

MakeBuild something new using what you have learned. Expect a few tries; that is normal.

Make

Make a runner. The player stays on the left; the world comes to them:

the player has gravity and stands on a floor at y 100,
A jumps, but only from the ground,
a rock slides in from the right every 1.5 seconds,
a hit costs a life (three lives, then game over).

Try it yourselfYour edits are saved in this browser.

It takes a few seconds to load. Your work in this step is kept.

Need a hint?

Gravity, a floor in on game update and a jump from the ground: the same blocks as your fixed jumper.

Another hint

A timer (on game update every 1500 ms) makes a rock at x 160 near the floor, with a negative vx so it slides left.

Another hint

A Player–Enemy overlap: destroy the rock and change life by -1.

A runner: gravity, a floor, a jump from the ground, rocks on a timer, and a hit costs a life.

This ticks by itself when your blocks do what is asked.

ModifyChange the code on purpose and check the result.

Change a kangaroo

This kangaroo hops across a field, but only from the ground. Make it a moon kangaroo: weaker gravity and a gentler jump. Can it still only jump from the ground?

Try it yourselfYour edits are saved in this browser.

It takes a few seconds to load. Your work in this step is kept.

For teachers

Students fix a jump that works in mid-air by putting it inside an if that checks the player is on the floor, then build a runner game. About 45 minutes.

Open the teacher guide: answers, solutions, slides and a worksheet.

Students will be able to

I can make a jump that only works from the ground.
I can explain why a jump needs that check.
I can build a runner with gravity, a floor, a jump and obstacles.

Before class

A jump sets vy to a negative number (up). On its own, it works on every press, even in mid-air, so a player can climb the sky. The fix is an if around the jump: if player bottom ≥ 100 (the floor's height). The floor if from last lesson puts the bottom back at exactly 100 every frame the player sinks, so standing means bottom is 100. In real platformers, tilemaps give a ready-made "is on a wall" test; this is the same idea by hand.

Running the lesson

Predict: let students find the flying in the Run.
Investigate: the trace shows the if saying no anywhere above the floor.
Modify: the fix is two blocks: an if and its question.
Mix it up: gravity, from last lesson.
Make: the runner reuses the fixed jumper; the new parts are the timer and the overlap.

The hard part (on purpose)

Where the check belongs: around the jump, in the A event. Ask where the player must be for a jump to make sense.

When students get stuck

The player can fly by pressing A again and again. Ask: Where must the player be for a jump to make sense? Fix: Put an if around set vy in the A event: only when bottom ≥ 100.
The jump never works now. Ask: Is the question ≥ 100, or > 100? Fix: Standing means bottom is exactly 100, so use ≥.
The rocks float in mid-air, or pass under the player. Ask: What y do the rocks start at? Fix: Near the floor: about 98, so they sit on y 100.

Stretch and support

Stretch: Add a coin in the air that is only reachable with a jump, worth a point.

Support: Give students the jumper (floor and jump done) as their Make starter, so they add only the rocks and the lives.

Where it leads

Next unit: levels, so the runner can get harder. Skillmaps: Jungle Jump Platformer and Monster Truck Racer (arcade.makecode.com/skillmaps) are platformers built with tilemaps, the engine's version of this floor.

What each step is for

Investigate: A jump belongs inside an if: the press only counts when the player is standing on the floor, which the floor if makes true.
Modify: The if around the jump uses the same edge as the floor; changing how a jump feels is two numbers.
Mix it up: Gravity adds ay to vy every second.

Now you can

Make a jump that only works from the ground.
Explain why a jump needs that check.
Build a runner with gravity, a floor, a jump and obstacles.

Next lesson6. Level upKeep the level in a variable and change it where the score changes, with a goal that moves up each time.

Source: content/code/arcade-advanced/arcade-jump/lesson.md