Workshop › Blackjack › Step 21 of 22

Buttons

What we are doing

A bar of four buttons at the bottom: Hit, Stand, Double, Deal. A button you can use right now is bright, the others are dim. Clicking or touching one calls the same press as the keys.

```js
const BAR_Y = 404
const BUTTONS = ['Hit', 'Stand', 'Double', 'Deal']
const BUTTON_W = canvas.width / BUTTONS.length

canvas.addEventListener('pointerdown', (event) => {
  const rect = canvas.getBoundingClientRect()
  const x = ((event.clientX - rect.left) * canvas.width) / rect.width
  const y = ((event.clientY - rect.top) * canvas.height) / rect.height
  if (y >= BAR_Y) press(BUTTONS[Math.floor(x / BUTTON_W)])
})

  BUTTONS.forEach((label, i) => {
    const active = label === 'Deal' ? phase === 'done' : phase === 'player' && (label !== 'Double' || player.length === 2)
    ctx.fillStyle = active ? '#f8fafc' : '#4b7a5a'
    ctx.fillRect(i * BUTTON_W + 6, BAR_Y, BUTTON_W - 12, 44)
    ctx.fillStyle = '#14532d'
    ctx.font = 'bold 18px sans-serif'
    ctx.textAlign = 'center'
    ctx.fillText(label, i * BUTTON_W + BUTTON_W / 2, BAR_Y + 29)
  })
```

What it means

Each button is a quarter of the width; Math.floor(x / BUTTON_W) turns a click position into the button number.
The click position is scaled to canvas pixels, in case the canvas is shown bigger or smaller.
Deal is active when the round is done; the others on your turn, Double only with two cards.

Your turn

Under DELAY, write the three button constants.
Above drawCard, write the pointer listener.
At the end of draw, draw the buttons.

Skills: Keyboard and mouse input, Drawing on a canvas

← Long hands fit Build it yourself: six decks →

All steps