Workshop › Angry Birds-style Slingshot › Step 23 of 47

Wood and stone

What we are doing

Now the targets. Blocks are bodies too, made of two new materials: light wood and heavy stone. The bird stays a circle; every other body is drawn as a rectangle.

```js
const MATERIALS = {
  wood: { color: '#b45309', density: 1 },
  stone: { color: '#64748b', density: 2.5 },
  bird: { color: '#dc2626', density: 4 },
}

    ctx.fillStyle = m.color
    if (b.kind === 'bird') {
      ctx.beginPath()
      ctx.arc(b.x + b.w / 2, b.y + b.h / 2, b.w / 2, 0, Math.PI * 2)
      ctx.fill()
    } else {
      ctx.fillRect(b.x, b.y, b.w, b.h)
    }
```

What it means

wood and stone get a color and a density (stone is 2.5 times as heavy as wood of the same size).
In draw, if ... else picks the shape: a circle for the bird, the body's own box for everything else.

Your turn

In MATERIALS, above the bird line, write wood and stone.
At the end of draw, wrap the three circle lines in if (b.kind === 'bird') { ... } and add the else with the rectangle.

Skills: Drawing on a canvas

← Drag and let go A level as data →

All steps