Workshop › Candy Crush-style Match 3 › Step 25 of 29

Show the hint

What we are doing

The selection is outlined white, the hint's two gems yellow. Instead of three if blocks, one loop goes through a list of [cell, color] pairs and skips the empty ones.

```js
// Outline the selected gem, and after five idle seconds, a possible move.
ctx.lineWidth = 3
for (const [cell, color] of [[selected, '#ffffff'], [hint && hint.a, '#fde047'], [hint && hint.b, '#fde047']]) {
  if (!cell) continue
  ctx.strokeStyle = color
  ctx.strokeRect(LEFT + cell.c * SIZE + 2, TOP + cell.r * SIZE + 2, SIZE - 4, SIZE - 4)
}
```

What it means

The list has three pairs: the selection in white and the hint's two cells in yellow.
hint && hint.a is the hint's first cell if there is a hint, otherwise null; writing hint.a with no hint would be an error.
Empty cells (null) are skipped with continue.

Your turn

In draw, replace the whole if (selected) { ... } block with the comment and the loop.

Skills: Drawing on a canvas, Arrays and objects

← A hint after five seconds Twenty moves →

All steps