Workshop › Battleship › Step 27 of 35

See the heat map

What we are doing

It is fun to see what the computer is thinking. When showHeat is on, your small sea is painted orange: the hotter a square, the brighter.

```js
let showHeat
  showHeat = false

function drawSea(origin, size, shotsGrid, fleet, showShips, heat) {
  const max = heat ? Math.max(1, ...heat.flat()) : 1

      // The heat map: brighter where the computer thinks a ship is more likely.
      if (heat && heat[r][c] > 0) ctx.fillStyle = `rgba(249, 115, 22, ${(0.15 + (0.85 * heat[r][c]) / max).toFixed(2)})`

  drawSea(SEA, BIG, myShots, enemyFleet, false, null)
  drawSea(HOME, SMALL, theirShots, myFleet, true, showHeat ? heatMap() : null)
```

What it means

• heat is a heat map or null (no colors). max is the hottest value, at least 1.
• The see-through orange goes from 0.15 (cool) to 1.0 (the hottest square): heat / max is between 0 and 1.
• Backticks make a template string: ${...} puts a value inside the text.

Your turn

1. Under let shots, write let showHeat; in reset, under shots = 0, write showHeat = false.
2. In drawSea, add the heat parameter, the max line and the two heat lines.
3. Pass null for the enemy's sea and showHeat ? heatMap() : null for yours.

Skills: Drawing on a canvas

← Hunt around a hit H for heat →

All steps

1. A 10 by 10 sea
2. A function for any sea
3. Your own sea
4. Draw again and again
5. Grids and ships as lists
6. A random fleet
7. Two fleets
8. Which ship is here?
9. Fire at a square
10. Show the shots
11. Your shot
12. Tap to fire
13. A message line
14. Hit or miss?
15. See your own fleet
16. Sinking ships
17. Darker hits on a sunk ship
18. Outline sunk ships
19. Win in as few shots as you can
20. A record of their shots
21. Take turns
22. The computer shoots back
23. You can lose too
24. A heat map
25. Shoot the hottest square
26. Hunt around a hit
27. See the heat map
28. H for heat
29. Show their ships at the end
30. A keyboard cursor
31. Move with the arrows
32. Fire with Enter, play again
33. Your best game
34. A side panel
35. Build it yourself: ships apart