Atölye › Puzzle Bobble Tarzı Balon Atıcı › 7/31. adım

Yukarı nişan al

Ne yapıyoruz

Nişan bir açı: aim. Açılar radyan ile ölçülür: tam tur Math.PI * 2, yarım tur Math.PI. 0 sağı gösterir. Canvas'ta y aşağı doğru büyüdüğü için dümdüz yukarı -Math.PI / 2'dir.

Açıyı ekrana çevirmek için iki fonksiyon yeter: bir birim ilerlerken Math.cos(aim) ne kadar sağa, Math.sin(aim) ne kadar aşağı gidildiğini söyler. Atıcıdan bu yönde 80 piksellik bir çizgi çizeceğiz.

```js
let aim // angle of the shot, in radians

  aim = -Math.PI / 2

  ctx.strokeStyle = 'rgba(255, 255, 255, 0.6)'
  ctx.lineWidth = 2
  ctx.beginPath()
  ctx.moveTo(SHOOTER.x, SHOOTER.y)
  ctx.lineTo(SHOOTER.x + Math.cos(aim) * 80, SHOOTER.y + Math.sin(aim) * 80)
  ctx.stroke()
```

Ne işe yarıyor

let aim → nişan açısı; reset içinde aim = -Math.PI / 2 → dümdüz yukarı.
-Math.PI / 2 iken Math.cos 0, Math.sin −1: çizginin ucu 0 sağda, 80 yukarıda.
ctx.strokeStyle, ctx.lineWidth → yarı saydam beyaz, 2 piksel.
ctx.moveTo(SHOOTER.x, SHOOTER.y) → kalemi atıcıya koy; ctx.lineTo(...) → 80 piksel ötedeki noktaya çizgi; ctx.stroke() → çizgiyi boya.
Çizgi yüklü balondan önce çizilir; balon çizginin başını örter.

Sıra sende

let grid ... satırının altına yorumuyla let aim ... yaz.
reset içinde loaded = pickColor() satırının üstüne aim = -Math.PI / 2 yaz.
draw içinde yüklü balonu çizen satırın üstüne çizgiyi çizen altı satırı yaz.
Çalıştır: atıcıdan yukarı kısa bir çizgi görmelisin.

Beceriler: Canvas üzerine çizim

← Atıcı Oklarla çevir →

Yukarı nişan al

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar