A list per level

Keep what changes from level to level in a list, and look it up with the level as the place, counted from 0.

Faster ghosts, a new colour, more aliens: each level is a row in a table. A list is one column of that table.

Last lesson the level was one number. Now each level has its own speed. A list (in Arrays) holds them in order: speeds is 40, 70, 100. get value at looks one up by its place: speeds[level].

Places in a list are counted from 0. So the level now starts at 0, and the splash shows level + 1, because players count from 1. destroy all sprites of kind (Sprites) clears the old level's enemy.

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 list holds one speed for each level · Sound on for the voiceover

A list holds what changes per level: speeds[level] is the speed for this level.

Places are counted from 0, so the level starts at 0 and the splash shows level + 1.

startLevel clears the old enemies, splashes the level and sets up the new one.

Show as code

let enemy: Sprite = null
let speeds = [40, 70, 100]
let level = 0
let goal = 5
function startLevel () {
    sprites.destroyAllSpritesOfKind(SpriteKind.Enemy)
    game.splash("Level " + (level + 1))
    enemy = sprites.create(img`
        a . . a
        a a a a
        a 1 1 a
        a a a a
        `, SpriteKind.Enemy)
    enemy.setPosition(80, 10)
    enemy.setVelocity(speeds[level], speeds[level])
    enemy.setBounceOnWall(true)
}
let player = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
controller.moveSprite(player)
player.setStayInScreen(true)
let coin = sprites.create(img`
    . 5 5 .
    5 5 4 5
    5 4 5 5
    . 5 5 .
    `, SpriteKind.Food)
coin.setPosition(randint(10, 150), randint(10, 110))
info.setLife(3)
startLevel()
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    otherSprite.setPosition(randint(10, 150), randint(10, 110))
    info.changeScoreBy(1)
    if (info.score() >= goal) {
        level += 1
        goal += 5
        if (level == 3) {
            game.gameOver(true)
        } else {
            startLevel()
        }
    }
})
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
    info.changeLifeBy(-1)
    otherSprite.setPosition(80, 10)
})

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

let enemy: Sprite = null
let speeds = [40, 70, 100]
let level = 0
let goal = 5
function startLevel () {
    sprites.destroyAllSpritesOfKind(SpriteKind.Enemy)
    game.splash("Level " + (level + 1))
    enemy = sprites.create(img`
        a . . a
        a a a a
        a 1 1 a
        a a a a
        `, SpriteKind.Enemy)
    enemy.setPosition(80, 10)
    enemy.setVelocity(speeds[level], speeds[level])
    enemy.setBounceOnWall(true)
}
let player = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
controller.moveSprite(player)
player.setStayInScreen(true)
let coin = sprites.create(img`
    . 5 5 .
    5 5 4 5
    5 4 5 5
    . 5 5 .
    `, SpriteKind.Food)
coin.setPosition(randint(10, 150), randint(10, 110))
info.setLife(3)
startLevel()
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    otherSprite.setPosition(randint(10, 150), randint(10, 110))
    info.changeScoreBy(1)
    if (info.score() >= goal) {
        level += 1
        goal += 5
        if (level == 3) {
            game.gameOver(true)
        } else {
            startLevel()
        }
    }
})
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
    info.changeLifeBy(-1)
    otherSprite.setPosition(80, 10)
})

Read startLevel, then the Player–Food overlap.

The game starts and startLevel runs with level 0. What speed does the enemy get?04070100

RunRun it and compare the result with your prediction.

Run

Collect coins and dodge the purple enemy. Press A (space) to close each splash. Can you win?

Show as code

lesson.ts

let enemy: Sprite = null
let speeds = [40, 70, 100]
let level = 0
let goal = 5
function startLevel () {
    sprites.destroyAllSpritesOfKind(SpriteKind.Enemy)
    game.splash("Level " + (level + 1))
    enemy = sprites.create(img`
        a . . a
        a a a a
        a 1 1 a
        a a a a
        `, SpriteKind.Enemy)
    enemy.setPosition(80, 10)
    enemy.setVelocity(speeds[level], speeds[level])
    enemy.setBounceOnWall(true)
}
let player = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
controller.moveSprite(player)
player.setStayInScreen(true)
let coin = sprites.create(img`
    . 5 5 .
    5 5 4 5
    5 4 5 5
    . 5 5 .
    `, SpriteKind.Food)
coin.setPosition(randint(10, 150), randint(10, 110))
info.setLife(3)
startLevel()
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    otherSprite.setPosition(randint(10, 150), randint(10, 110))
    info.changeScoreBy(1)
    if (info.score() >= goal) {
        level += 1
        goal += 5
        if (level == 3) {
            game.gameOver(true)
        } else {
            startLevel()
        }
    }
})
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
    info.changeLifeBy(-1)
    otherSprite.setPosition(80, 10)
})

Try it yourselfYour edits are saved in this browser.

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

I reached level 2 (or further) and compared with my prediction.

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

Investigate

Show as code

lesson.ts

let enemy: Sprite = null
let speeds = [40, 70, 100]
let level = 0
let goal = 5
function startLevel () {
    sprites.destroyAllSpritesOfKind(SpriteKind.Enemy)
    game.splash("Level " + (level + 1))
    enemy = sprites.create(img`
        a . . a
        a a a a
        a 1 1 a
        a a a a
        `, SpriteKind.Enemy)
    enemy.setPosition(80, 10)
    enemy.setVelocity(speeds[level], speeds[level])
    enemy.setBounceOnWall(true)
}
let player = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
controller.moveSprite(player)
player.setStayInScreen(true)
let coin = sprites.create(img`
    . 5 5 .
    5 5 4 5
    5 4 5 5
    . 5 5 .
    `, SpriteKind.Food)
coin.setPosition(randint(10, 150), randint(10, 110))
info.setLife(3)
startLevel()
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    otherSprite.setPosition(randint(10, 150), randint(10, 110))
    info.changeScoreBy(1)
    if (info.score() >= goal) {
        level += 1
        goal += 5
        if (level == 3) {
            game.gameOver(true)
        } else {
            startLevel()
        }
    }
})
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
    info.changeLifeBy(-1)
    otherSprite.setPosition(80, 10)
})

Work out each level from the list.

Match each block with its job.

Try it yourselfYour edits are saved in this browser.

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

speeds is 40, 70, 100. Fill in what startLevel does at each level.

level	splash shows Level …	enemy speed
0	1
1
2

Kai starts his level at 1, not 0. What goes wrong?The enemy never appearsThe first level is already fast (70), and there is no place 3 for the last levelNothing: lists start at 1The splash says Level 0

Match each block in this game with its job.

destroy all sprites of kind Enemy

speeds[level]

change level by 1

if level = 3 then game over (win)

ModifyChange the code on purpose and check the result.

Modify

Give each level its own background colour, from a new list. Set it in startLevel.

Need a hint?

Make a new list, colours, with three numbers, in on start. Arrays has the list block.

Another hint

In startLevel: set background color to (get value at level from colours).

Add a fourth level with the fastest enemy yet. What else must change?

Need a hint?

Add a fourth speed to the list.

Another hint

The win now comes at level 4.

Try it yourselfYour edits are saved in this browser.

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

Each level has its own background colour, set in startLevel from a list.

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

A fourth level: a fourth speed, and the win moved.

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

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

Mix it up

goal starts at 4, and each level-up changes goal by 4. At what score does the third level-up happen?

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

Make

This dodger scores a point for every rock. Give it three levels:

each level has its own background colour and rock speed (faster each level), from lists,
startLevel clears the old rocks, sets the colour and splashes the level,
every 10 points, the level goes up (where the score changes),
after level 3, the player wins (game over, win).

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?

In on start: a list of three rock speeds (negative, they fly left), a list of three colours, and a goal of 10. Call startLevel.

Another hint

startLevel: destroy all Enemy sprites, set the background from the colours list, splash the level.

Another hint

In the timer, set rock vx to the speed for this level. After change score: if score ≥ goal, change level by 1, change goal by 10, then if level = 3 game over (win), else startLevel.

Three levels, each with its own background colour and rock speed, started by startLevel, and a win after level 3.

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

ModifyChange the code on purpose and check the result.

Change a fishing game

Catch fish with the net. Every 5 fish the water gets deeper and the fish swim faster. Add a fourth level (both lists need a fourth item, and the win must move), then make the deepest level's fish the fastest yet.

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 keep per-level settings in lists, look them up with the level as the place (counted from 0), start each level with a startLevel function, and build a three-level dodger with a win. About 50 minutes.

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

Students will be able to

I can keep what changes per level in a list.
I can look up the value for this level, knowing places start at 0.
I can write a startLevel function that clears the old level and sets up the new one.

Before class

A list such as speeds (40, 70, 100) holds what changes per level; speeds[level] (get value at) looks up the value at that place, counted from 0, so level 0 uses 40. That is why the level now starts at 0 (last lesson it started at 1), and the splash shows level + 1 with join, labelled copy-for-now.

A function startLevel sets up a level: destroy all sprites of kind Enemy clears the old one, a splash, and a new enemy at speeds[level]. The win checks level = 3 before startLevel, since a list of 3 has no place 3.

The Make is the biggest program so far (about 25 blocks): try it yourself first.

Running the lesson

Predict: students who answer 70 count from 1. Kai's question returns to it. Let the 40 and 70 camps argue; the Run settles it.
Investigate: the trace practises places from 0; the match names each block's job.
Modify: a second list works exactly like speeds. A fourth level needs a fourth item and the win moved.
Mix it up: the moving goal from last lesson.
Make: plan on paper first: which lists, what goes in startLevel, where the level-up goes. Rock speeds are negative because rocks fly left.

The hard part (on purpose)

Places start at 0. When a level is off by one, ask which place the list starts at.

When students get stuck

The splash says Level 0, or the speed is wrong by one level. Ask: Where does the list start counting? Fix: Places start at 0. The level starts at 0, and the splash shows level + 1.
The enemy stops, or the game breaks, after the last level. Ask: What is speeds[3] when the list has 3 items? Fix: There is no place 3. Check level = 3 and end the game (win) before calling startLevel.
Old enemies stay on the screen at the next level. Ask: What does startLevel do first? Fix: Add destroy all sprites of kind Enemy at the top of startLevel.

Stretch and support

Stretch: Add a third list, the number of enemies per level, and call your function from B3 that many times.

Support: Give students the Make game with the lists and startLevel already made, so they add only the level-up and the win.

Where it leads

Next unit: power-ups, with true or false and things that run out. Skillmap: Jungle Jump Platformer (arcade.makecode.com/skillmaps) builds a level per map. Class idea: design a level table on paper (speed, colour, enemies, goal) before coding it.

What each step is for

Investigate: A list holds what changes per level, looked up with the level as the place, counted from 0; startLevel clears the old level and sets up the new one.
Modify: Anything that changes per level can be another list, read with the same place; one more level is one more item in each list.
Mix it up: A goal that moves up makes the next level further away.

Now you can

Keep what changes per level in a list.
Look up the value for this level, knowing places start at 0.
Write a startLevel function that clears the old level and sets up the new one.

Next lesson8. True or falseA variable that holds true or false remembers whether a power-up is on, so an overlap can ask about it.

Source: content/code/arcade-advanced/arcade-level-list/lesson.md