Activity 2.9: Score, Lives, and a HUD

The Idea

Right now touching an enemy wipes the entire board and silently zeroes your score. It is a placeholder, and it has the worst property a punishment can have: you cannot tell it happened. The screen simply empties.

This activity gives you three lives, a moment of safety after being hit, and a heads-up display that shows both. No new LÖVE concepts are involved — every piece is a number, a countdown, or a loop you have already written.

A timer is a number; a state is a question

You want the player to be untouchable for two seconds after a hit. The tempting design is a countdown and a boolean saying whether it is running. Resist it.

-- Storing the answer: now two things can disagree
if invuln > 0 then
  isInvulnerable = true
else
  isInvulnerable = false
end

-- Asking the question: there is nothing to disagree with
if invuln > 0 then
  -- still flashing, still safe
end

The first version has two facts that must agree, and they will not: forget one assignment on one branch and the player is permanently immortal. The second stores one number and derives the answer on the spot, which cannot drift because there is nothing to drift from.

Note that nothing stops the countdown. Subtract dt every frame and after a minute it is sitting at -60, which answers "am I invulnerable?" perfectly well. A countdown you never have to remember to stop is simpler than one you do, and it is why the test is invuln > 0 rather than invuln ~= 0. The second version would go wrong on the first frame that overshoots zero, which is every frame.

Why the grace period is not a nicety

Task 1 adds lives without it, and the result is worth feeling before you fix it. Enemies arrive about eight tenths of a second apart, and each one that reaches you takes a life. Three lives are gone in under two seconds, in a stretch where nothing you press changes the outcome.

With a two-second window the second and third arrivals pass straight through you, and the next life you lose is the one you had time to see coming. The rule generalizes: a penalty that can repeat before the player can react is not a penalty, it is a deletion.

The flash is how the player knows

Invulnerability the player cannot see is indistinguishable from a bug. The fix is one line:

local blink = invuln > 0 and math.floor(invuln * 10) % 2 == 1

Read it right to left. invuln * 10 counts tenths of a second, math.floor turns that into a whole number, and % 2 asks whether it is odd. The answer flips every tenth of a second, so the ship blinks five times a second for as long as the timer runs. The modulo operator from Activity 1.4 is doing all of the work.

Skip the drawing, not the updating. The instinct is to guard the movement code too, and it is wrong: an invulnerable ship still flies, still shoots, still clamps to the screen. It is invisible for a tenth of a second at a time, not absent.

The HUD is drawn last

Everything in love.draw paints over what came before it, so drawing order is layer order. The HUD has to be last or an enemy at the top of the screen will slide over your score.

function love.draw()
  -- The world, in world coordinates
  drawPlayer()
  drawBullets()
  drawEnemies()

  -- The HUD, in screen coordinates, last so nothing can cover it
  drawHud()
end

The HUD is also the one thing on screen that does not live in the game world. An enemy at x = 400 is somewhere in the level; the score at x = 10 is glued to the window. That difference matters the moment you add a camera, and it is worth keeping the two kinds of drawing in separate functions from the start.

Draw the lives, do not count them

for i = 1, lives do
  local x = love.graphics.getWidth() - 24 - (i - 1) * 30
  love.graphics.draw(ship, x, 24, 0, 1, 1, ship:getWidth() / 2, ship:getHeight() / 2)
end

Three small ships in the corner read faster than the text "Lives: 3", and the loop has a quiet virtue: the number of icons is the value of lives, not a copy of it. There is no way for the display to disagree with the game, which is the same principle as the timer, applied to pixels.

The x is measured backwards from love.graphics.getWidth() rather than hard-coded, so the icons stay in the corner if you ever change the window size in conf.lua. The rest of the call is the centering idiom from Activity 2.4, at scale 1 instead of 2.

Fonts are loaded, not typed

The default font is small. A bigger one is a file LÖVE has to build glyphs for, which puts it in the same category as newImage from Activity 2.4: make it once, in love.load.

-- Wrong: builds a brand new font sixty times a second
function love.draw()
  love.graphics.setFont(love.graphics.newFont(20))
end

-- Right: build it once, keep it forever
function love.load()
  font = love.graphics.newFont(20)
  love.graphics.setFont(font)
end

setFont is sticky in exactly the way setColor is — the state machine from Activity 2.2 again. Set it once in love.load and it is still set on frame forty thousand.

Build

Your enemy.lua and collision.lua do not change in this activity. Everything below happens in main.lua.

Task 1: Lives instead of a wipe

Add local lives = 3 to your state block.
Change the player collision so it removes the enemy that hit you and takes one life, instead of emptying the board. The enemy is destroyed in the crash too, so it should not survive it.
When lives reach zero, reset lives, score, and both tables. This is a stand-in: Activity 2.10 replaces it with a real game-over screen.
Print the lives under the score for now, so you can watch the number move.
Play it and lose on purpose. Stand still in a column of enemies and count how long three lives last. That is the problem Task 2 solves.

1
-- main.lua
2

3
local Enemy = require("enemy")
4
local collision = require("collision")
5

6
local ship
7
local player = { x = 400, y = 500, size = 40, speed = 300 }
8
local bullets = {}
9
local fireCooldown = 0
10
local enemies = {}
11
local spawnTimer = 0
12
local spawnEvery = 0.8
13
local score = 0
14
local lives = 3
15

16
function love.load()
17
  love.graphics.setBackgroundColor(0.05, 0.05, 0.1)
18
  math.randomseed(os.time())
19
  ship = love.graphics.newImage("ship.png")
20
end
21

22
function love.update(dt)
23
  if love.keyboard.isDown("left", "a") then
24
    player.x = player.x - player.speed * dt
25
  end
26
  if love.keyboard.isDown("right", "d") then
27
    player.x = player.x + player.speed * dt
28
  end
29

30
  local half = player.size / 2
31
  player.x = math.max(half, math.min(love.graphics.getWidth() - half, player.x))
32

33
  fireCooldown = fireCooldown - dt
34
  if love.keyboard.isDown("space") and fireCooldown <= 0 then
35
    table.insert(bullets, { x = player.x, y = player.y - 30, size = 6, speed = 500 })
36
    fireCooldown = 0.15
37
  end
38

39
  for i = #bullets, 1, -1 do
40
    local b = bullets[i]
41
    b.y = b.y - b.speed * dt
42
    if b.y < -20 then
43
      table.remove(bullets, i)
44
    end
45
  end
46

47
  spawnTimer = spawnTimer - dt
48
  if spawnTimer <= 0 then
49
    table.insert(enemies, Enemy.new(math.random(40, love.graphics.getWidth() - 40)))
50
    spawnTimer = spawnEvery
51
  end
52

53
  for i = #enemies, 1, -1 do
54
    local e = enemies[i]
55
    e:update(dt)
56
    if e.y > love.graphics.getHeight() + 20 then
57
      table.remove(enemies, i)
58
    end
59
  end
60

61
  for i = #enemies, 1, -1 do
62
    if collision.overlaps(enemies[i], player) then
63
      table.remove(enemies, i)
64
      lives = lives - 1
65
      if lives <= 0 then
66
        lives = 3
67
        score = 0
68
        enemies = {}
69
        bullets = {}
70
      end
71
      break
72
    end
73
  end
74

75
  for i = #enemies, 1, -1 do
76
    for j = #bullets, 1, -1 do
77
      if collision.overlaps(enemies[i], bullets[j]) then
78
        table.remove(bullets, j)
79
        enemies[i].hp = enemies[i].hp - 1
80
        if enemies[i].hp <= 0 then
81
          table.remove(enemies, i)
82
          score = score + 1
83
        end
84
        break
85
      end
86
    end
87
  end
88
end
89

90
function love.draw()
91
  love.graphics.setColor(1, 1, 1)
92
  love.graphics.draw(ship, player.x, player.y, 0, 2, 2, ship:getWidth() / 2, ship:getHeight() / 2)
93

94
  love.graphics.setColor(1, 0.9, 0.3)
95
  for _, b in ipairs(bullets) do
96
    love.graphics.rectangle("fill", b.x - 2, b.y - 8, 4, 16)
97
  end
98

99
  for _, e in ipairs(enemies) do
100
    e:draw()
101
  end
102

103
  love.graphics.setColor(1, 1, 1)
104
  love.graphics.print("Score: " .. score, 10, 10)
105
  love.graphics.print("Lives: " .. lives, 10, 30)
106
end

Task 2: Two seconds of grace

Add local invuln = 0 and count it down beside fireCooldown. They are the same pattern, so put them together.
Wrap the whole player collision loop in if invuln <= 0 then. While the timer is running, enemies pass straight through you and are not removed.
Set invuln = 2 at the moment you take the hit.
Skip the ship's draw on alternating tenths of a second. Do not touch the update.
Lose a life and watch the clock. The next one you can lose is two seconds later, and you will see every frame of the wait.

1
-- main.lua
2

3
local Enemy = require("enemy")
4
local collision = require("collision")
5

6
local ship
7
local player = { x = 400, y = 500, size = 40, speed = 300 }
8
local bullets = {}
9
local fireCooldown = 0
10
local enemies = {}
11
local spawnTimer = 0
12
local spawnEvery = 0.8
13
local score = 0
14
local lives = 3
15
local invuln = 0
16

17
function love.load()
18
  love.graphics.setBackgroundColor(0.05, 0.05, 0.1)
19
  math.randomseed(os.time())
20
  ship = love.graphics.newImage("ship.png")
21
end
22

23
function love.update(dt)
24
  if love.keyboard.isDown("left", "a") then
25
    player.x = player.x - player.speed * dt
26
  end
27
  if love.keyboard.isDown("right", "d") then
28
    player.x = player.x + player.speed * dt
29
  end
30

31
  local half = player.size / 2
32
  player.x = math.max(half, math.min(love.graphics.getWidth() - half, player.x))
33

34
  fireCooldown = fireCooldown - dt
35
  invuln = invuln - dt
36

37
  if love.keyboard.isDown("space") and fireCooldown <= 0 then
38
    table.insert(bullets, { x = player.x, y = player.y - 30, size = 6, speed = 500 })
39
    fireCooldown = 0.15
40
  end
41

42
  for i = #bullets, 1, -1 do
43
    local b = bullets[i]
44
    b.y = b.y - b.speed * dt
45
    if b.y < -20 then
46
      table.remove(bullets, i)
47
    end
48
  end
49

50
  spawnTimer = spawnTimer - dt
51
  if spawnTimer <= 0 then
52
    table.insert(enemies, Enemy.new(math.random(40, love.graphics.getWidth() - 40)))
53
    spawnTimer = spawnEvery
54
  end
55

56
  for i = #enemies, 1, -1 do
57
    local e = enemies[i]
58
    e:update(dt)
59
    if e.y > love.graphics.getHeight() + 20 then
60
      table.remove(enemies, i)
61
    end
62
  end
63

64
  if invuln <= 0 then
65
    for i = #enemies, 1, -1 do
66
      if collision.overlaps(enemies[i], player) then
67
        table.remove(enemies, i)
68
        lives = lives - 1
69
        invuln = 2
70
        if lives <= 0 then
71
          lives = 3
72
          score = 0
73
          enemies = {}
74
          bullets = {}
75
        end
76
        break
77
      end
78
    end
79
  end
80

81
  for i = #enemies, 1, -1 do
82
    for j = #bullets, 1, -1 do
83
      if collision.overlaps(enemies[i], bullets[j]) then
84
        table.remove(bullets, j)
85
        enemies[i].hp = enemies[i].hp - 1
86
        if enemies[i].hp <= 0 then
87
          table.remove(enemies, i)
88
          score = score + 1
89
        end
90
        break
91
      end
92
    end
93
  end
94
end
95

96
function love.draw()
97
  local blink = invuln > 0 and math.floor(invuln * 10) % 2 == 1
98

99
  if not blink then
100
    love.graphics.setColor(1, 1, 1)
101
    love.graphics.draw(ship, player.x, player.y, 0, 2, 2, ship:getWidth() / 2, ship:getHeight() / 2)
102
  end
103

104
  love.graphics.setColor(1, 0.9, 0.3)
105
  for _, b in ipairs(bullets) do
106
    love.graphics.rectangle("fill", b.x - 2, b.y - 8, 4, 16)
107
  end
108

109
  for _, e in ipairs(enemies) do
110
    e:draw()
111
  end
112

113
  love.graphics.setColor(1, 1, 1)
114
  love.graphics.print("Score: " .. score, 10, 10)
115
  love.graphics.print("Lives: " .. lives, 10, 30)
116
end

Task 3: A real HUD

Add a font local, build it at size 20 in love.load, and set it there. Never in draw.
Move the score and lives into their own drawHud function, defined above love.draw so the locals it reads already exist.
Replace the lives text with one ship icon per life, in the top right corner, positioned from getWidth().
Call drawHud() as the last line of love.draw, and start it with a white setColor — the enemies left the color red.

1
-- main.lua
2

3
local Enemy = require("enemy")
4
local collision = require("collision")
5

6
local ship
7
local font
8
local player = { x = 400, y = 500, size = 40, speed = 300 }
9
local bullets = {}
10
local fireCooldown = 0
11
local enemies = {}
12
local spawnTimer = 0
13
local spawnEvery = 0.8
14
local score = 0
15
local lives = 3
16
local invuln = 0
17

18
function love.load()
19
  love.graphics.setBackgroundColor(0.05, 0.05, 0.1)
20
  math.randomseed(os.time())
21
  ship = love.graphics.newImage("ship.png")
22
  font = love.graphics.newFont(20)
23
  love.graphics.setFont(font)
24
end
25

26
function love.update(dt)
27
  if love.keyboard.isDown("left", "a") then
28
    player.x = player.x - player.speed * dt
29
  end
30
  if love.keyboard.isDown("right", "d") then
31
    player.x = player.x + player.speed * dt
32
  end
33

34
  local half = player.size / 2
35
  player.x = math.max(half, math.min(love.graphics.getWidth() - half, player.x))
36

37
  fireCooldown = fireCooldown - dt
38
  invuln = invuln - dt
39

40
  if love.keyboard.isDown("space") and fireCooldown <= 0 then
41
    table.insert(bullets, { x = player.x, y = player.y - 30, size = 6, speed = 500 })
42
    fireCooldown = 0.15
43
  end
44

45
  for i = #bullets, 1, -1 do
46
    local b = bullets[i]
47
    b.y = b.y - b.speed * dt
48
    if b.y < -20 then
49
      table.remove(bullets, i)
50
    end
51
  end
52

53
  spawnTimer = spawnTimer - dt
54
  if spawnTimer <= 0 then
55
    table.insert(enemies, Enemy.new(math.random(40, love.graphics.getWidth() - 40)))
56
    spawnTimer = spawnEvery
57
  end
58

59
  for i = #enemies, 1, -1 do
60
    local e = enemies[i]
61
    e:update(dt)
62
    if e.y > love.graphics.getHeight() + 20 then
63
      table.remove(enemies, i)
64
    end
65
  end
66

67
  if invuln <= 0 then
68
    for i = #enemies, 1, -1 do
69
      if collision.overlaps(enemies[i], player) then
70
        table.remove(enemies, i)
71
        lives = lives - 1
72
        invuln = 2
73
        if lives <= 0 then
74
          lives = 3
75
          score = 0
76
          enemies = {}
77
          bullets = {}
78
        end
79
        break
80
      end
81
    end
82
  end
83

84
  for i = #enemies, 1, -1 do
85
    for j = #bullets, 1, -1 do
86
      if collision.overlaps(enemies[i], bullets[j]) then
87
        table.remove(bullets, j)
88
        enemies[i].hp = enemies[i].hp - 1
89
        if enemies[i].hp <= 0 then
90
          table.remove(enemies, i)
91
          score = score + 1
92
        end
93
        break
94
      end
95
    end
96
  end
97
end
98

99
local function drawHud()
100
  love.graphics.setColor(1, 1, 1)
101
  love.graphics.print("Score: " .. score, 10, 12)
102

103
  for i = 1, lives do
104
    local x = love.graphics.getWidth() - 24 - (i - 1) * 30
105
    love.graphics.draw(ship, x, 24, 0, 1, 1, ship:getWidth() / 2, ship:getHeight() / 2)
106
  end
107
end
108

109
function love.draw()
110
  local blink = invuln > 0 and math.floor(invuln * 10) % 2 == 1
111

112
  if not blink then
113
    love.graphics.setColor(1, 1, 1)
114
    love.graphics.draw(ship, player.x, player.y, 0, 2, 2, ship:getWidth() / 2, ship:getHeight() / 2)
115
  end
116

117
  love.graphics.setColor(1, 0.9, 0.3)
118
  for _, b in ipairs(bullets) do
119
    love.graphics.rectangle("fill", b.x - 2, b.y - 8, 4, 16)
120
  end
121

122
  for _, e in ipairs(enemies) do
123
    e:draw()
124
  end
125

126
  drawHud()
127
end

Challenge (Optional)

Give an extra life every ten points. The obvious test, score % 10 == 0, is a trap — it is true on every frame you spend at ten points, which is most of them. Keep a nextExtraLife number and raise it when you pass it. The general lesson is that "when it changes" and "what it is now" are different questions, and only one of them survives a game loop.
Cap lives at five and make the sixth pickup worth points instead. Your icon loop needs no change at all, which is the payoff for deriving it from the value.
Draw a thin damage bar under each enemy from its hp. It belongs in Enemy:draw, not the HUD — it moves with the enemy, so it is world, not screen.
Make the blink fade instead of flicker by passing a fourth alpha argument to setColor computed from invuln. Remember to set the alpha back to 1 afterwards.

Check Your Work

Gameplay with Score 4 top-left and a single remaining life icon top-right

Score on the left, lives on the right. Two icons have gone because the loop draws one per life and there is one life left — nothing erased them.

Three small ships sit in the top right corner and the score is in the top left, in a noticeably larger font than before.
Touching an enemy destroys that enemy, removes one icon, and starts the ship flashing. The rest of the board keeps falling.
For the next two seconds enemies pass through you harmlessly, and you can still move and shoot the whole time.
After the third life everything resets with no announcement. That is expected — the announcement is Activity 2.10.

If the ship never comes back, your invuln = invuln - dt is somewhere that does not run every frame — check it is not inside an if. If you lose all three lives at once, the collision loop is not actually wrapped in the invulnerability check. If the score turns red, the HUD is missing its white setColor; if it disappears entirely, it is being drawn before the enemies rather than after.

Previous Next: Game States