Score and lives

Give the player lives, make a hit cost one, and let the engine end the game.

Three hearts in the corner and a game that can end: that is what turns moving sprites into a game you can win or lose.

Last lesson the score went up and down, but the game never ended. Arcade's Info blocks keep a score and lives (hearts) at the top of the screen, and they end the game by themselves.

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

Info keeps score and lives for you · Sound on for the voiceover

The Info blocks keep score and lives:

set life shows hearts, and when the lives reach 0 the engine ends the game by itself.
An overlap runs every frame while two sprites touch.
So destroy the enemy (or move it) when it hits, or one touch takes every life.

Show as code

info.setLife(3)
let mySprite = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
mySprite.setPosition(20, 60)
controller.moveSprite(mySprite)
mySprite.setStayInScreen(true)
let heart = sprites.create(img`
    2 2 . 2 2
    2 2 2 2 2
    . 2 2 2 .
    . . 2 . .
    `, SpriteKind.Food)
heart.setPosition(80, 100)
let rock = sprites.create(img`
    . e e .
    e e e e
    e e e e
    `, SpriteKind.Enemy)
rock.setPosition(160, 30)
rock.vx = -40
let rock2 = sprites.create(img`
    . e e .
    e e e e
    e e e e
    `, SpriteKind.Enemy)
rock2.setPosition(240, 60)
rock2.vx = -40
let rock3 = sprites.create(img`
    . e e .
    e e e e
    e e e e
    `, SpriteKind.Enemy)
rock3.setPosition(320, 90)
rock3.vx = -40
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
    info.changeLifeBy(-1)
    otherSprite.destroy()
})
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    info.changeLifeBy(1)
    otherSprite.destroy()
})

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

info.setLife(3)
let mySprite = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
mySprite.setPosition(20, 60)
let rock = sprites.create(img`
    . e e .
    e e e e
    e e e e
    `, SpriteKind.Enemy)
rock.setPosition(160, 60)
rock.vx = -50
let rock2 = sprites.create(img`
    . e e .
    e e e e
    e e e e
    `, SpriteKind.Enemy)
rock2.setPosition(240, 60)
rock2.vx = -50
let rock3 = sprites.create(img`
    . e e .
    e e e e
    e e e e
    `, SpriteKind.Enemy)
rock3.setPosition(320, 60)
rock3.vx = -50
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
    info.changeLifeBy(-1)
    otherSprite.destroy()
})

There is no game over block in this program. Lock in what you think happens.

The player has 3 lives and cannot move. Three rocks fly at it. What happens?Nothing ends the game, because there is no game over blockThe first rock takes all 3 livesThe player loses all 3 lives, then the game ends by itselfThe lives go to 0, then -1, -2, and the game keeps going

RunRun it and compare the result with your prediction.

Run

Watch the hearts at the top of the screen. Use the restart button under the simulator to play again.

Show as code

lesson.ts

info.setLife(3)
let mySprite = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
mySprite.setPosition(20, 60)
let rock = sprites.create(img`
    . e e .
    e e e e
    e e e e
    `, SpriteKind.Enemy)
rock.setPosition(160, 60)
rock.vx = -50
let rock2 = sprites.create(img`
    . e e .
    e e e e
    e e e e
    `, SpriteKind.Enemy)
rock2.setPosition(240, 60)
rock2.vx = -50
let rock3 = sprites.create(img`
    . e e .
    e e e e
    e e e e
    `, SpriteKind.Enemy)
rock3.setPosition(320, 60)
rock3.vx = -50
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
    info.changeLifeBy(-1)
    otherSprite.destroy()
})

Try it yourselfYour edits are saved in this browser.

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

I watched the rocks and the hearts, and compared what happened with my prediction.

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

Investigate

Dodge the rocks with the arrow keys and collect the heart. Lose on purpose once, too.

Show as code

lesson.ts

info.setLife(3)
let mySprite = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
mySprite.setPosition(20, 60)
controller.moveSprite(mySprite)
mySprite.setStayInScreen(true)
let heart = sprites.create(img`
    2 2 . 2 2
    2 2 2 2 2
    . 2 2 2 .
    . . 2 . .
    `, SpriteKind.Food)
heart.setPosition(80, 100)
let rock = sprites.create(img`
    . e e .
    e e e e
    e e e e
    `, SpriteKind.Enemy)
rock.setPosition(160, 30)
rock.vx = -40
let rock2 = sprites.create(img`
    . e e .
    e e e e
    e e e e
    `, SpriteKind.Enemy)
rock2.setPosition(240, 60)
rock2.vx = -40
let rock3 = sprites.create(img`
    . e e .
    e e e e
    e e e e
    `, SpriteKind.Enemy)
rock3.setPosition(320, 90)
rock3.vx = -40
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
    info.changeLifeBy(-1)
    otherSprite.destroy()
})
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    info.changeLifeBy(1)
    otherSprite.destroy()
})

Sam's overlap event:

Show as code

sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
    info.changeLifeBy(-1)
})

Try it yourselfYour edits are saved in this browser.

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

Play this game in your head. Fill in the lives after each thing happens.

what happens	lives after
(start)	3
a rock hits the player
a rock flies past
the player collects the heart
a rock hits the player

Sam's player touches one rock and the game is over straight away, though he started with 3 lives. Why?Rocks always end the gameThe rock is not destroyed, so the overlap event runs again every frame while they touchchangeLifeBy(-1) takes away all the livessetLife(3) only gives one life

Kai wants his game to end when the lives run out. What does he need to add?A game over block in on startA game over block in the overlap eventNothing: the engine ends the game at 0 livesA countdown

ModifyChange the code on purpose and check the result.

Modify

Start the player with 5 lives.

Need a hint?

Change the 3 in set life.

Make the heart give a point as well as a life.

Need a hint?

Inside the Player–Food event, add change score by 1 (Info) next to change life by 1.

Try it yourselfYour edits are saved in this browser.

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

Start the player with 5 lives.

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

Collecting the heart also scores a point.

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

Show as code

lesson.ts

let mySprite = sprites.create(img`
    . 4 4 .
    4 4 4 4
    . 8 8 .
    . 8 8 .
    `, SpriteKind.Player)
mySprite.setPosition(20, 60)
let coin = sprites.create(img`
    . 5 5 .
    5 5 4 5
    5 4 5 5
    . 5 5 .
    `, SpriteKind.Food)
coin.setPosition(150, 60)
coin.vx = -30
sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {
    info.changeScoreBy(1)
    otherSprite.destroy()
})
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function (sprite, otherSprite) {
    info.changeLifeBy(-1)
    otherSprite.destroy()
})

A coin of kind Food moves left towards the player at vx -30. When it reaches the player, which event runs?Neither: moving sprites cannot overlapThe Player–Enemy overlapThe Player–Food overlapBoth

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

Make

The rocks fly already. Make it a game:

the player starts with 3 lives
each rock that hits takes one life, and is destroyed

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: set life to 3 (Info).

Another hint

Add an on overlap for Player and Enemy. Inside: change life by -1, then destroy otherSprite.

A dodge game: 3 lives, and a rock that hits takes one life and is destroyed.

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

ModifyChange the code on purpose and check the result.

Change a dodgeball game

Balls bounce around the court; each hit costs a life. Add a fourth ball, give the player 5 lives, and make the balls a little faster.

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 give the player lives, make a hit cost one life, and see that the engine ends the game at 0 lives and that an overlap runs every frame while sprites touch. About 40 minutes.

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

Students will be able to

I can give the player lives and let the game end by itself.
I can make a hit cost exactly one life.
I can explain why an enemy must be destroyed (or moved) when it hits the player.

Before class

Info blocks keep a score and lives (hearts) at the top of the screen. When the lives reach 0, Arcade ends the game by itself. One important fact: an overlap event runs every frame (about 30 times a second) while the two sprites still touch. If the enemy is not destroyed, one touch takes life after life, and the game ends at once. Timers (a new enemy every second) are next lesson; here the rocks are made at the start and flown in with a velocity.

Running the lesson

Predict: many students expect lives to go below 0, or that a game over block is needed. The engine does it. Ask the 'no game over block' group to run it and watch.
Run: count the hearts aloud as they go.
Investigate: Sam's dodger is the lesson's key bug: an overlap runs every frame while sprites touch.
Mix it up: kinds and velocity, from earlier lessons.
Make: students who forget destroy lose all three lives at once: let them find it.

The hard part (on purpose)

An overlap runs every frame while sprites touch, so one hit takes every life. Ask what happens to the enemy after it touches the player.

When students get stuck

One touch ends the game. Ask: What happens to the enemy after it touches the player? Fix: Nothing, so the overlap runs again next frame. Add destroy otherSprite inside the overlap event.
No hearts at the top of the screen. Ask: Is there a set life block in on start? Fix: Add set life to 3 (Info). Lives appear only once they are set.
Touching a rock does nothing. Ask: What kind are the rocks, and what kinds does the overlap name? Fix: The rocks are Enemy; the event must be Player with Enemy.

Stretch and support

Stretch: Add a coin worth points, so there is something to chase as well as dodge.

Support: Give students the overlap event already placed, and ask them to fill in the two blocks inside.

Where it leads

Next lesson: a timer that sends a new rock every second, for as long as the game lasts.

What each step is for

Investigate: Info keeps lives and ends the game at 0. An overlap runs every frame while two sprites touch, so destroying the enemy makes one touch cost one life.
Modify: set life sets how many hearts the player starts with, and each kind of touch needs its own overlap event.
Mix it up: The engine moves a sprite with a velocity; its kind decides which overlap runs when it arrives.

Now you can

Give the player lives and let the game end by itself.
Make a hit cost exactly one life.
Explain why an enemy must be destroyed (or moved) when it hits the player.

Next lesson6. TimersUse a timer to make a new enemy every second, from a random place, for as long as the game lasts.

Source: content/code/arcade/arcade-score-lives/lesson.md