Atölye › Sonsuz Koşucu › 11/19. adım

Çarpışma

Ne yapıyoruz

Kaktüse değmek koşuyu bitirsin. İki kutu, hem yatayda hem dikeyde her biri diğerinin bittiği yerden önce başlıyorsa üst üste biner. Bu klasik bir çarpışma testidir.

Bir incelik: kutuları kenarlarından 6'şar piksel küçültüyoruz. Köşeden sıyırmak çarpma sayılmasın; oyuncu "bu değmedi ki!" diye kızmasın. Buna affedici çarpışma kutusu denir.

```js
const MARGIN = 6 // forgiving hitboxes: shrink both boxes by this much

function hits(o) {
  return (
    runner.x + MARGIN < o.x + o.w &&
    runner.x + runner.w - MARGIN > o.x &&
    runner.y + MARGIN < o.y + o.h &&
    runner.y + runner.h - MARGIN > o.y
  )
}

  if (obstacles.some(hits)) {
    state = 'over'
  }

  if (state === 'over') {
    ctx.font = 'bold 28px sans-serif'
    ctx.fillText('Game Over', canvas.width / 2, canvas.height / 2)
    ctx.font = '16px sans-serif'
    ctx.fillText('Press Space to try again', canvas.width / 2, canvas.height / 2 + 28)
  }
```

Ne işe yarıyor

Sıra sende

  1. CUT satırının altına MARGIN satırını yaz.
  2. spawn fonksiyonunun altına bir boş satır bırakıp hits fonksiyonunu yaz.
  3. update'in sonuna, bir boş satırdan sonra çarpışma kontrolünü yaz.
  4. draw'ın sonuna, hazır mesajının altına Game Over bloğunu yaz.
  5. Çalıştır ve bir kaktüse çarp.

Beceriler: Çarpışma tespiti, Oyun durumları

Tüm adımlar

  1. Zemin
  2. Koşucu
  3. Tekrar tekrar çiz
  4. Yer çekimi
  5. Zıpla
  6. Kısa sıçrama
  7. Dokunarak zıpla
  8. Üstüne gelen engeller
  9. Kaktüsler gelmeye devam ediyor
  10. Başlangıcı bekle
  11. Çarpışma
  12. Yeniden dene
  13. Giderek hızlan
  14. En iyi koşuyu hatırla
  15. Skor sayacı
  16. Kuşlar
  17. Hangi tuşlar basılı?
  18. Eğil
  19. Kendin yap: zıplama tamponu