Atölye › Angry Birds Tarzı Sapan › 25/47. adım

İç içe geçen kutuları ayır

Ne yapıyoruz

Kutuların birbirinin içinden geçmemesi için collide(a, b) (çarpış) fonksiyonunu yazacağız. Uzun bir fonksiyon, o yüzden üç adımda kuracağız. Üstteki iki satırlık yorum, fonksiyonun bitmiş hâlinin ne yaptığını anlatıyor.

İlk parça: iki kutu iç içe mi? Öyleyse onları en az bindikleri yönde ayır. Bir kutunun üstünde duran kutu dikeyde çok az, yatayda çok binmiştir; bu yüzden yukarı itilir. Bir kuleyi ayakta tutan tam budur.

Kim ne kadar itilir? Kütle karar verir: hafif tahta çok kıpırdar, ağır taş az. Kütleyi alan × yoğunluktan hesaplıyoruz.

```js
const mass = (b) => (b.w * b.h * MATERIALS[b.kind].density) / 400

// Two overlapping boxes: push them apart along the axis where they overlap least, then bounce their velocities
// along that axis like a collision between two masses, with a little friction along the other axis.
function collide(a, b) {
  const ox = Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x)
  const oy = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y)
  if (ox <= 0 || oy <= 0) return
  const ia = 1 / mass(a)
  const ib = 1 / mass(b)
  let nx = 0
  let ny = 0
  let depth
  if (ox < oy) [nx, depth] = [a.x + a.w / 2 < b.x + b.w / 2 ? 1 : -1, ox]
  else [ny, depth] = [a.y + a.h / 2 < b.y + b.h / 2 ? 1 : -1, oy]
  const push = depth / (ia + ib)
  a.x -= nx * push * ia
  a.y -= ny * push * ia
  b.x += nx * push * ib
  b.y += ny * push * ib
}
```

Ne işe yarıyor

Sıra sende

  1. const body = ... satırının altına const mass = ... satırını yaz.
  2. function step() { satırının üstüne iki yorum satırını ve collide fonksiyonunu yaz (sonra bir boş satır). Harf harf yaz; her + ve - önemli.
  3. Çalıştır: ekranda henüz fark yok; collide'ı kimse çağırmıyor. Kontroller yeşil olmalı.

Beceriler: Çarpışma tespiti

Tüm adımlar

  1. Sapan
  2. Gökyüzü ve zemin
  3. Tekrar tekrar çiz
  4. Nişan: bir açı ve bir çekiş
  5. Sapanda bir kuş
  6. Kuşu geri çek
  7. Lastik
  8. Ok tuşlarıyla nişan al
  9. Gövdeler
  10. Fırlat!
  11. Hız kadar ilerle
  12. Yerçekimi
  13. Yere in
  14. Nişan mı, uçuş mu
  15. Uçuşta boş sapan
  16. Ekrandan çıkan gider
  17. Sakinliği bekle
  18. Sıradaki kuş
  19. Atmadan önce yolu gör
  20. Bir noktadan nişana
  21. Sapanı tut
  22. Sürükle ve bırak
  23. Tahta ve taş
  24. Veri olarak seviye
  25. İç içe geçen kutuları ayır
  26. Kütleye göre sek
  27. Her çift karşılaşır
  28. Sürtünme
  29. Daha küçük adımlar
  30. Can puanı
  31. Sert çarpan acıtır
  32. Kırılan gider
  33. Domuzlar
  34. Puan
  35. Puanı göster
  36. Çatlaklar
  37. Üç kuş
  38. Kuşları say
  39. Kazandın mı, kaybettin mi
  40. Bitiş paneli
  41. Yeniden oyna
  42. Veriden üç seviye
  43. İstediğin seviyeyi başlat
  44. Sonraki seviyeye
  45. En iyi puan
  46. Doğru sözler
  47. Kendin yap: sarı kuş