Atölye › Kule Savunması › 26/42. adım
Oyuncu savaşın nasıl gittiğini görmeli. Her düşmanın üstüne bir can çubuğu: tam boy koyu kırmızı bir şerit ve üstünde, kalan can kadar genişlikte yeşil bir şerit.
Kalan canın ne kadarının kaldığını bilmek için her düşman başlangıç canını da hatırlamalı: maxHp.
```js
enemies.push({ d: 0, hp: 10, maxHp: 10 })
// Health bar: red underneath, green for what is left.
ctx.fillStyle = '#7f1d1d'
ctx.fillRect(x - 14, y - 20, 28, 4)
ctx.fillStyle = '#22c55e'
ctx.fillRect(x - 14, y - 20, (28 * e.hp) / e.maxHp, 4)
```{ d: 0, hp: 10, maxHp: 10 } → yeni düşman başlangıç canını da taşır.ctx.fillRect(x - 14, y - 20, 28, 4) → düşmanın ortasının 20 piksel üstünde, 28 × 4'lük koyu kırmızı şerit.(28 * e.hp) / e.maxHp → yeşil kısmın eni: hp / maxHp 0 ile 1 arası bir oran. Yarı canlı düşmanda 14 piksel.
Oran olduğu için aynı satır zayıf ve güçlü düşmanlarda çalışır.update içinde yeni düşmanı { d: 0, hp: 10, maxHp: 10 } yap.draw içinde düşman döngüsünün sonuna, ctx.fill() satırının altına can çubuğunu yaz.Beceriler: Canvas üzerine çizim
← Canlar Önce kur, sonra savun →