Workshop › Zelda-style Dungeon › Step 14 of 22

Blinking and hearts

What we are doing

While safe, the hero blinks: shown for 5 frames, hidden for 5. The top strip shows three hearts, red for the ones you still have, gray for the lost ones.

```js
// The player blinks while it cannot be hurt.
if (hurt === 0 || Math.floor(hurt / 5) % 2 === 0) {
  ctx.fillStyle = '#16a34a'
  ctx.fillRect(player.x, player.y, SIZE, SIZE)
}

for (let i = 0; i < 3; i++) {
  ctx.fillStyle = i < hearts ? '#e11d48' : '#44403c'
  ctx.fillRect(12 + i * 26, 14, 20, 20)
}
```

What it means

• Math.floor(hurt / 5) % 2 switches between 0 and 1 every 5 frames: shown on 0, hidden on 1.
• Heart i is red when i < hearts: with 2 hearts, hearts 0 and 1 are red.
• The hearts are drawn after ctx.restore(), in the top strip.

Your turn

1. Wrap the hero's drawing in the blinking check, with its comment.
2. After ctx.restore(), draw the three hearts.

Skills: Drawing on a canvas, Game states

← Ouch Keys and hearts →

All steps

1. A room
2. The hero
3. The game loop
4. Walk
5. Walls
6. A touch pad
7. Next room
8. The sword
9. Enemies
10. Strike!
11. They chase you
12. They wander
13. Ouch
14. Blinking and hearts
15. Keys and hearts
16. A world that remembers
17. The locked door
18. A timer
19. Game over
20. The stairs out
21. Best time
22. Build it yourself: cleared rooms