Atölye › Kule Savunması › 40/42. adım
Tuşlar çalışıyor ama oyuncu hangi kulenin seçili olduğunu görmeli, telefonda da seçebilmeli. Üst çubuğa iki düğme koyuyoruz: her biri kulenin adını ve fiyatını gösterir, seçili olan kendi renginde yanar, tıklayan seçer.
```js
const BUTTONS = [
{ kind: 'arrow', x: 250, w: 110 },
{ kind: 'cannon', x: 364, w: 110 },
]
if (p.y < TOP) {
const button = BUTTONS.find((b) => p.x >= b.x && p.x < b.x + b.w)
if (button) selected = button.kind
return
}
for (const b of BUTTONS) {
const kind = TOWERS[b.kind]
ctx.fillStyle = b.kind === selected ? kind.color : '#334155'
ctx.fillRect(b.x, 6, b.w, 28)
ctx.fillStyle = b.kind === selected ? '#0f172a' : 'white'
ctx.fillText(b.kind + ' ' + kind.cost, b.x + b.w / 2, 26)
}
```BUTTONS → her düğmenin kule türü, sol kenarı (x) ve genişliği (w). Çizim de tıklama da bu listeyi kullanır.if (p.y < TOP) → tıklama üst çubukta mı?BUTTONS.find((b) => ...) → koşulu tutan ilk düğmeyi bulur (tıklama o düğmenin sol ve sağ kenarı arasında mı);
yoksa undefined verir. if (button) → bir düğmeye tıklandıysa onu seç.b.kind === selected ? kind.color : '#334155' → koşul ? evetse : hayırsa: seçili düğme kulenin renginde,
öbürü gri.b.kind + ' ' + kind.cost → arrow 50 gibi bir yazı, düğmenin ortasına.START satırının üstündeki yorumun altına BUTTONS listesini yaz.pointerdown dinleyicisinde if (p.y >= BAR) { satırının hemen üstüne üst çubuk bloğunu yaz.draw içinde, Gold yazısının altındaki ctx.textAlign = 'center' satırının hemen altına for döngüsünü yaz.Beceriler: Klavye ve fare girdisi, Canvas üzerine çizim
← İkinci kule: top Alan hasarı →