Workshop › Puzzle Bobble-style Bubble Shooter › Step 2 of 31

One bubble

What we are doing

A bubble is a colored circle. Colors are kept as a number, an index into COLORS, which makes comparing them easy later. drawBubble draws one; we try it with a test bubble in the middle.

```js
const R = 20 // bubble radius
const COLORS = ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#a855f7']

function drawBubble(x, y, color, r = R) {
  ctx.fillStyle = COLORS[color]
  ctx.beginPath()
  ctx.arc(x, y, r - 1, 0, Math.PI * 2)
  ctx.fill()
}

  drawBubble(200, 260, 3)
```

What it means

r = R is a default value: when drawBubble is called with three arguments, r is R.
COLORS[color] turns the color number into a real color.
arc(x, y, radius, 0, Math.PI * 2) is a full circle; r - 1 leaves a thin gap between touching bubbles.

Your turn

Under const ctx = ..., leave an empty line and write R and COLORS.
Above function draw() { write drawBubble, with an empty line after it.
In draw, under the background, leave an empty line and write the test call. Press Run.

Skills: Drawing on a canvas, Functions

← The night sky A grid of cells →

All steps