Atölye › Blackjack › 21/22. adım

Düğmeler

Ne yapıyoruz

Altta dört düğmelik bir çubuk: Hit, Stand, Double, Deal. Şu an kullanabileceğin düğme parlak, öbürleri soluk. Tıklamak ya da dokunmak tuşlarla aynı press'i çağırır; telefonda da oynanır.

```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)
  })
```

Ne işe yarıyor

• Her düğme genişliğin dörtte biri (120 piksel); Math.floor(x / BUTTON_W) → tıklanan yerin düğme numarası.
• (event.clientX - rect.left) * canvas.width / rect.width → tıklama yerini tuval pikseline çevirir; tuval ekranda büyük ya da küçük gösterilse de doğru düğme bulunur.
• active → Deal el bitince; öbürleri sıra sendeyken; Double yalnız iki kartla. press zaten aynı kuralları uyguluyor, düğme yalnız gösteriyor.

Sıra sende

1. DELAY satırının altına üç düğme sabitini yaz.
2. drawCard'ın üstüne dokunma dinleyicisini yaz.
3. draw'ın sonuna, bir boş satırdan sonra düğme döngüsünü yaz. Çalıştır ve düğmelere tıkla.

Beceriler: Klavye ve fare girdisi, Canvas üzerine çizim

← Uzun el sığsın Kendin yap: altı deste →

Tüm adımlar

1. Kartlar
2. Deste
3. Karıştır
4. Dağıt
5. Masadaki kartlar
6. Kart yüzleri
7. Çizmeye devam
8. Bir el kaç eder?
9. As: 11 ya da 1
10. Kart: bir kart daha
11. Dur
12. Kapalı kart
13. Fişler
14. Kim kazandı?
15. Krupiyenin sırası
16. Sonraki el
17. Blackjack!
18. Rekorun
19. Katla
20. Uzun el sığsın
21. Düğmeler
22. Kendin yap: altı deste