Workshop › Breakout › Step 14 of 39

A row of bricks

What we are doing

A row has 8 bricks. Rather than write 8 positions by hand, a for loop computes them and pushes each brick into the bricks array.

```js
const COLS = 8
const BRICK_W = 54
const BRICK_H = 18
const GAP = 4
const TOP = 50
const LEFT = 10 // (480 - 8 bricks - 7 gaps) / 2, so the wall is centered

let bricks

function buildBricks() {
  bricks = []
  for (let col = 0; col < COLS; col++) {
    bricks.push({ x: LEFT + col * (BRICK_W + GAP), y: TOP, row: 0, alive: true })
  }
}
```

What it means

The constants: 8 columns, bricks 54×18, a 4-pixel gap, the wall 50 pixels from the top and 10 from the left.
8 bricks and 7 gaps take 460 pixels; the 20 left over make two 10-pixel margins, so the row is centered.
for (let col = 0; col < COLS; col++) runs its body for col = 0, 1, ... 7.
push adds an object to the end of the array. alive will tell us whether the brick is still standing.

Your turn

Under const BALL_R = 7 write the six constants.
Under let ball write let bricks.
Leave an empty line under resetBall and write buildBricks.

Skills: Loops, Arrays and objects

← Aim with the paddle Draw the bricks →

All steps