Workshop › Blackjack › Step 12 of 22

The hidden card

What we are doing

In real Blackjack the dealer's second card lies face down during your turn, so you must guess. It is drawn as a blue back, and the dealer's total counts only the first card. When your turn ends it turns over.

```js
function drawCard(c, x, y, hidden) {
  ctx.fillStyle = hidden ? '#1d4ed8' : '#ffffff'

  if (hidden) {
    ctx.strokeStyle = '#93c5fd'
    ctx.strokeRect(x + 6, y + 6, CARD_W - 12, CARD_H - 12)
    return
  }

function drawHand(hand, y, hideSecond) {
  hand.forEach((c, i) => drawCard(c, 20 + i * (CARD_W + 8), y, hideSecond && i === 1))

  const hide = phase === 'player'
  drawHand(dealer, DEALER_Y, hide)
  drawHand(player, PLAYER_Y, false)

  ctx.fillText('Dealer ' + (hide ? handValue([dealer[0]]) : handValue(dealer)), 20, DEALER_Y - 10)
```

What it means

A hidden card is blue with a light inner frame, and return skips its face.
hideSecond && i === 1 is true only for the second card of a hand we want to hide.
handValue([dealer[0]]) is the value of a hand holding only the first card.

Your turn

Give drawCard a hidden parameter: a blue back, and stop before the face.
Give drawHand a hideSecond parameter and pass it on for the second card.
In draw, hide the dealer's second card on your turn, and show only the first card's value.

Skills: Drawing on a canvas, Game states

← Stand Chips →

All steps