Workshop › Blackjack › Step 1 of 22

Blackjack: Cards

Beat the dealer without going over 21. Cards as objects, a fair Fisher–Yates shuffle, aces worth 11 or 1, a dealer that follows fixed rules, chips and payouts, a turn spread over time, doubling down, and buttons that show what you can do.

What we are doing

We are building Blackjack: get closer to 21 than the dealer without going over. First the pieces: the 13 ranks, the 4 suits, a small function that makes a card object, and a green table.

```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

const RANKS = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']
const SUITS = ['♠', '♥', '♦', '♣']

const card = (rank, suit) => ({ rank, suit })

function draw() {
  ctx.fillStyle = '#166534'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
}

draw()
```

What it means

Your turn

Write the lines under the comments, then press Run.

Skills: Drawing on a canvas, Arrays and objects

All steps

  1. Cards
  2. A deck
  3. Shuffle
  4. Deal
  5. Cards on the table
  6. Card faces
  7. Keep drawing
  8. What is a hand worth?
  9. Aces: 11 or 1
  10. Hit: one more card
  11. Stand
  12. The hidden card
  13. Chips
  14. Who wins?
  15. The dealer's turn
  16. The next round
  17. Blackjack!
  18. Your record
  19. Double down
  20. Long hands fit
  21. Buttons
  22. Build it yourself: six decks