Atölye › Missile Command Tarzı Savunma › 10/35. adım

Duman izleri

Ne yapıyoruz

Füzeleri görelim. Her füzeyi, arkasında bıraktığı duman izi olarak çizeceğiz: başladığı yerden şu anki yerine kırmızı bir çizgi. Çizgi uzadıkça füzenin nereden geldiği ve nereye gittiği görülür.

```js
ctx.lineWidth = 2
ctx.strokeStyle = '#f87171'
for (const m of incoming) {
  ctx.beginPath()
  ctx.moveTo(m.sx, m.sy)
  ctx.lineTo(m.x, m.y)
  ctx.stroke()
}
```

Ne işe yarıyor

ctx.lineWidth = 2 → çizgi kalınlığı 2 piksel.
ctx.strokeStyle = '#f87171' → çizgi rengi (içi dolu şekiller için fillStyle, çizgiler için strokeStyle).
ctx.beginPath() → yeni bir çizgiye başla.
ctx.moveTo(m.sx, m.sy) → kalemi kaldırıp başlangıç noktasına koy.
ctx.lineTo(m.x, m.y) → oradan füzenin şu anki yerine bir çizgi çek.
ctx.stroke() → çizgiyi boya.

Sıra sende

draw içinde üssü çizen ctx.fillRect(BASE.x - 12, ...) satırının altına bir boş satır bırak ve iz satırlarını yaz. Çalıştır ve bekle: kırmızı izler gökten aşağı süzülmeli.

Beceriler: Canvas üzerine çizim

← Yoldaki füzeler Çarpma →

Tüm adımlar