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

Noktalı kılavuz

Ne yapıyoruz

Kısa nişan çizgisi yerine atışın izleyeceği yolu noktalarla gösterelim: duvarlardan sekerek çarpacağı balona kadar. Duvardan sektirmeli atışlar çok kolaylaşır. İşin güzeli, yolu hesaplamak için atılan balonu hareket ettiren kodun aynısını küçük adımlarla "prova" ediyoruz.

```js
// The path the shot will take, bouncing off the walls, until it would touch a bubble.
function guide() {
  let x = SHOOTER.x
  let y = SHOOTER.y
  let vx = Math.cos(aim) * 4
  const vy = Math.sin(aim) * 4
  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
  for (let i = 1; i < 200; i++) {
    x += vx
    y += vy
    if (x < R || x > canvas.width - R) vx = -vx
    if (touches(x, y)) break
    if (i % 5 === 0) ctx.fillRect(x - 1.5, y - 1.5, 3, 3)
  }
}

  if (state === 'playing') guide()
```

Ne işe yarıyor

• let x, let y → hayali bir balon nişancıdan başlar.
• Math.cos(aim) * 4, Math.sin(aim) * 4 → nişan yönünde 4 piksellik küçük adımlar (açıyı x ve y adımına çeviren trigonometri, atışta da kullandığımız).
• for (let i = 1; i < 200; i++) → en fazla 200 adım prova et.
• if (x < R || x > canvas.width - R) vx = -vx → yan duvara gelince gerçek atış gibi sek.
• if (touches(x, y)) break → bir balona ya da tavana değecekse dur (break döngüden çıkar).
• if (i % 5 === 0) → her 5 adımda bir, 3×3'lük küçük bir nokta çiz.
• draw içindeki eski çizgi kodunun yerine guide(), yalnız oyun sürerken.

Sıra sende

1. function draw() { satırının üstüne yorumu ve guide fonksiyonunu yaz (arada bir boş satır kalsın).
2. draw içindeki nişan çizgisini çizen altı satırı (ctx.strokeStyle = ...'dan ctx.stroke()'a kadar) sil; yerine if (state === 'playing') guide() yaz.
3. Çalıştır, nişanı yana çevir: noktalar duvardan sekmeli. Oyun bitti!

Beceriler: Hız ve yerçekimi

← En iyi skor Kendin yap: balonları değiştir →

Tüm adımlar

1. Gece göğü
2. Bir balon
3. Hücrelerden bir ızgara
4. Izgarayı çiz
5. İç içe oturan balonlar
6. Atıcı
7. Yukarı nişan al
8. Oklarla çevir
9. İşaretçiyle nişan al
10. Ateş!
11. Uç
12. Duvarlardan sek
13. Bir şeye değiyor mu?
14. Izgaraya otur
15. Daha küçük adımlar
16. Altı komşu
17. Taşan boya (flood fill)
18. Üç tane olunca patla
19. Düşen balonlar
20. Asılı kalmayanlar düşsün
21. Skoru göster
22. Yalnız işe yarayan renkler
23. Atışları say
24. Tavan iniyor
25. Kazan ya da kaybet
26. Tehlike çizgisi
27. Bitiş mesajı
28. Yeniden oyna
29. En iyi skor
30. Noktalı kılavuz
31. Kendin yap: balonları değiştir