Workshop › Pinball › Step 3 of 42

A list of walls

What we are doing

The whole table is made of straight pieces: a curved top of short slanted lines, the launch lane on the right, two slopes down to the flippers. We keep them all in one list, WALLS, and draw every one with the same four lines.

```js
// The walls, as line segments [x1, y1, x2, y2].
const WALLS = [
  [20, 470, 20, 120], [20, 120, 60, 55], [60, 55, 140, 22], [140, 22, 260, 22], [260, 22, 340, 50], [340, 50, 390, 120],
  [390, 120, 390, 590], [360, 590, 360, 170], [360, 590, 390, 590], // the launch lane
  [20, 470, 128, 530], [360, 470, 272, 530], // the slopes down to the flippers
]

for (const [x1, y1, x2, y2] of WALLS) {
  ctx.beginPath()
  ctx.moveTo(x1, y1)
  ctx.lineTo(x2, y2)
  ctx.stroke()
}
```

What it means

WALLS is an array of arrays: each inner [x1, y1, x2, y2] is one wall, from (x1, y1) to (x2, y2).
for (const [x1, y1, x2, y2] of WALLS) takes each wall in turn and unpacks its four numbers into four names.
The body is the same drawing as before, with names instead of fixed numbers.

Your turn

Under const ctx = ... leave an empty line and write the comment and the WALLS list.
At the bottom, replace the four lines from ctx.beginPath() to ctx.stroke() with the for loop.

Skills: Arrays and objects, Drawing on a canvas

← Draw one wall The game loop →

All steps