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

Swap two neighbours

What we are doing

A move is two clicks. The second one decides: a neighbour of the selected gem swaps with it; the same gem again unselects it; any other gem becomes the new selection.

```js
function swap(a, b) {
  const gem = board[a.r][a.c]
  board[a.r][a.c] = board[b.r][b.c]
  board[b.r][b.c] = gem
}

function trySwap(a, b) {
  if (Math.abs(a.r - b.r) + Math.abs(a.c - b.c) !== 1) return false
  swap(a, b)
  return true
}

  if (selected && trySwap(selected, cell)) selected = null
  else selected = selected && selected.r === cell.r && selected.c === cell.c ? null : cell
```

What it means

swap keeps a's gem in gem, puts b's into a, then the kept one into b.
Two cells are neighbours when their row and column differences add up to exactly 1 (a diagonal is 2). Math.abs drops the minus sign.
In the listener: if something is selected and the swap works, the selection ends. Otherwise the same cell unselects, and any other cell becomes the selection.

Your turn

Above function cellAt(event) { write swap and trySwap.
In the listener, replace selected = cell with the two lines.

Skills: Keyboard and mouse input, Functions

← Show the selection Find every match →

All steps