If, every frame
Put an if inside on game update, so the game keeps checking a question while it runs.
In Pac-Man, go off one side of the screen and you come back on the other. The game is asking 'has Pac-Man gone off the edge?' many times every second.
A game needs to decide: has the car gone off the screen? Is the player in the safe zone? An if block (in Logic) asks a yes-or-no question, such as is car x more than 160? If the answer is yes (true), it runs the blocks inside. If no (false), it skips them.
But when is the question asked? That depends on where the if sits. on game update (in Game) runs its blocks every frame: about 30 times a second, for as long as the game runs.
- 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.
Make your prediction first. Help opens once you've locked it in.
Predict
Show as code
scene.setBackgroundColor(7)
let car = sprites.create(img`
. . 2 2 2 2 . .
. 2 9 9 2 9 2 .
2 2 2 2 2 2 2 2
. f . . . . f .
`, SpriteKind.Player)
car.setPosition(10, 60)
car.vx = 50
game.onUpdate(function () {
if (car.x > 160) {
car.x = 0
}
})
> means "more than". The screen is 160 pixels across.
Run
Watch the car for a few laps. This is called wrap-around.
Show as code
scene.setBackgroundColor(7)
let car = sprites.create(img`
. . 2 2 2 2 . .
. 2 9 9 2 9 2 .
2 2 2 2 2 2 2 2
. f . . . . f .
`, SpriteKind.Player)
car.setPosition(10, 60)
car.vx = 50
game.onUpdate(function () {
if (car.x > 160) {
car.x = 0
}
})
Investigate
Show as code
scene.setBackgroundColor(7)
let car = sprites.create(img`
. . 2 2 2 2 . .
. 2 9 9 2 9 2 .
2 2 2 2 2 2 2 2
. f . . . . f .
`, SpriteKind.Player)
car.setPosition(10, 60)
car.vx = 50
game.onUpdate(function () {
if (car.x > 160) {
car.x = 0
}
})
Work it out from the numbers.
Sam's program (it is in the playground: run it):
Show as code
car.setPosition(10, 60)
car.vx = 50
if (car.x > 160) {
car.x = 0
}
Fix it: drag the if into an on game update block.
The car starts at x 10 and moves 50 pixels every second. After how many seconds does it first jump back to the left?
Modify
Now you drive the car (left and right arrows). Drive off the right: it wraps. Drive off the left: it is lost. Add a second if so the left edge wraps too.
Need a hint?
Drag in a second if, under the first one, inside on game update.
Another hint
Ask 'car x < 0', and set car x to 160 inside it.
Score a point each time the car wraps around the right edge.
Need a hint?
change score by is in Info.
Another hint
Put it inside the first if, under set car x to 0.
Make the car wrap the other way too: off the left edge, it comes back on the right.
This ticks by itself when your blocks do what is asked.
Score a point every time the car wraps around the right edge.
This ticks by itself when your blocks do what is asked.
Mix it up
Show as code
let rock: Sprite = null
game.onUpdateInterval(2000, function () {
rock = sprites.create(img`
. e e .
e e e e
e e e e
`, SpriteKind.Enemy)
rock.setPosition(160, randint(10, 110))
rock.vx = -50
})
This timer runs every 2000 ms and makes one rock each time. How many rocks has it made after 6 seconds?
Make
Make a safe zone at the top of the screen. Move the hero with the arrow keys.
- When the hero is in the top 30 pixels, the background turns a different colour.
- When the hero leaves, the colour goes back (a second if).
Remember: y counts down, so the top of the screen is a small y.
Need a hint?
You need an on game update block with an if inside. The question is about hero y.
Another hint
Near the top is a small y: ask 'hero y < 30'. Inside, set the background colour.
Another hint
A second if, 'hero y ≥ 30', can set the colour back.
A safe zone: when the hero is near the top of the screen (y less than 30), the background changes colour, checked every frame.
This ticks by itself when your blocks do what is asked.
Change a lift
This lift rises up the building and, at the top, goes straight back to the ground floor. Make it slower, and make it go back to the ground floor from the third floor (about y 40) instead of the top.
For teachers
Students put an if inside on game update to make wrap-around and a safe zone, and find that an if in on start is asked only once. About 45 minutes.
Open the teacher guide: answers, solutions, slides and a worksheet.
Students will be able to
- I can put an if inside on game update so the game keeps checking a question.
- I can compare a sprite's x or y with a number using < and >.
- I can explain why an if in on start does not keep checking.
Before class
An if block asks a yes-or-no question (a condition), such as car x > 160. When the answer is yes (true), it runs the blocks inside; when no (false), it skips them.
The new idea is when the question is asked. A game draws the screen again about 30 times a second; each drawing is a frame. on game update runs its blocks once every frame, so an if inside it is asked over and over, and acts the moment the answer becomes yes. on start runs its blocks once, before the game begins. An if there is asked one time and then forgotten: this is the planted misconception (Sam's version).
Remember y counts down the screen, so "near the top" is a small y. The comparison block is in Logic; the car x block is in Sprites. Try the Make task yourself first.
Running the lesson
- Predict: most students expect the car to vanish, or to bounce. Wrap-around is a surprise. Ask how often the question is asked.
- Run: ask 'who moves the car back?' Point at the if: the game asks this 30 times a second.
- Investigate: the number task is 150 pixels at 50 a second. Then Sam's version: let them run it, see the car disappear, and drag the if into on game update. Say: on start is once, on game update is always.
- Modify: the left edge is a second if with < 0. Laps: change score goes inside the first if, so it happens only when the car wraps.
- Make: two ifs, one for in the zone and one for out of it. The colour block is in Scene.
- Lift: no new ideas; the third floor is a bigger y than the top.
The hard part (on purpose)
An if in on start is asked once; in on game update it's asked every frame. When the if never acts, ask which block it is inside.
When students get stuck
- The if never does anything. Ask: Which block is your if inside: on start or on game update? Fix: on start asks once, before anything moves. Drag the if into on game update.
- The safe zone colour comes on at the bottom of the screen. Ask: Which way does y count? Fix: Down from the top, so near the top is y < 30, not y > 90.
- The score shoots up while the car is still on the screen. Ask: Is change score inside the if, or just inside on game update? Fix: Outside the if, it runs every frame. Drag it inside the if, under set car x to 0.
Stretch and support
Stretch: Make the safe zone a box in the middle of the screen: the hero is safe only when x and y are both inside it (an if inside an if).
Support: Give students the on game update block with an empty if already in it, and ask them only to build the question and choose the colour.
Where it leads
Next lesson: else, and an enemy that chases you by comparing its position with yours. Class ideas: a screen where all four edges wrap (like Asteroids); a 'lava floor' that changes colour when the player is near the bottom.
What each step is for
- Investigate: on game update runs its blocks every frame, so an if there keeps asking its question and acts the moment it becomes true; an if in on start is asked once, before the game begins.
- Modify: Each edge needs its own question; anything can go inside the if, such as a point for every lap.
- Mix it up: A timer runs its blocks every so many milliseconds; a smaller number means more often.
- Put an if inside on game update so the game keeps checking a question.
- Compare a sprite's x or y with a number using < and >.
- Explain why an if in on start does not keep checking.