Atölye › Kule Savunması › 37/42. adım
Tahtanın altında boş bir şerit var. Oraya bir alt çubuk çiziyoruz: kurma sırasında bir "Dalgayı başlat" düğmesi, dalga sırasında kaç düşman kaldığı, sağda da rekor. Önce çizelim; düğmeye tıklamayı sonraki adımda bağlayacağız.
```js
const BAR = TOP + ROWS * TILE // the bottom bar, with the start button, begins here
// The tower buttons in the top bar, and the start button in the bottom bar.
const START = { x: 150, w: 180 }
ctx.fillStyle = 'white'
if (state === 'building') {
ctx.fillStyle = '#4f46e5'
ctx.fillRect(START.x, BAR + 6, START.w, 28)
ctx.fillStyle = 'white'
ctx.fillText('Start wave ' + (wave + 1), START.x + START.w / 2, BAR + 26)
} else if (state === 'wave') {
ctx.fillText('Wave ' + wave + ': ' + (toSpawn + enemies.length) + ' left', canvas.width / 2, BAR + 26)
}
ctx.textAlign = 'right'
ctx.fillText('Best ' + best, canvas.width - 10, BAR + 26)
```const BAR = TOP + ROWS * TILE → tahtanın bittiği yer: üst çubuk 40 + 9 satır × 40 = 400. Alt çubuk buradan
başlar.const START = { x: 150, w: 180 } → düğmenin sol kenarı ve genişliği. Tek yerde tutuyoruz: hem çizerken hem
(sonraki adımda) tıklamayı yakalarken aynı sayılar kullanılacak. Üstündeki yorum, yakında gelecek kule düğmelerini de
anıyor.if (state === 'building') → çivit mavisi bir dikdörtgen (düğme) ve üstüne Start wave 3 gibi bir yazı.
START.x + START.w / 2 düğmenin ortası.else if (state === 'wave') → toSpawn + enemies.length: daha gelecek olanlar artı yoldakiler.ctx.textAlign = 'right' → yazı verilen noktada biter: rekor sağ kenara yaslanır.const TOP = 40 ... satırının altına BAR satırını yaz.build fonksiyonunun kapanan } işaretinin altına bir boş satır bırakıp yorumu ve START satırını yaz.draw içinde ctx.textAlign = 'center' satırının altına bir boş satır bırak ve çubuğu çizen satırları yaz;
if (state === 'over') bloğu bunların altında kalsın.Beceriler: Canvas üzerine çizim
← Yeniden oyna Tıklayarak başlat →