Atölye › Asteroids › 11/41. adım

Ekranın çevresinden dolaş

Ne yapıyoruz

Asteroids'te duvar yoktur: sağdan çıkan gemi soldan, yukarıdan çıkan aşağıdan geri gelir. Uzay kendi etrafında döner.

Bunun aracı kalan işlemi %: 605 % 600 → 5; sağ kenarı 5 piksel geçen gemi sol kenardan 5 piksel içeride olur. Saat de böyle çalışır: 13 % 12 → 1. Tuzak: JavaScript'te % soldaki sayının işaretini korur: -5 % 600 sonucu 595 değil -5. Sol ya da üst kenardan çıkan gemi eksi bir yere gider ve kaybolurdu.

Çözüm klasik bir tek satır: kalanı al, boyutu ekle, bir kez daha kalanı al. Bir kez fonksiyon olarak yazıp hareket eden her şeyde kullanacağız.

```js
// Wrap a coordinate around the screen. Plain % keeps the sign in JavaScript (-5 % 600 is -5), so add the size first.
function wrap(value, size) {
  return ((value % size) + size) % size
}

  ship.x = wrap(ship.x + ship.vx, canvas.width)
  ship.y = wrap(ship.y + ship.vy, canvas.height)
```

Ne işe yarıyor

Sıra sende

  1. function resetShip() { satırının üstüne yorum satırını ve wrap fonksiyonunu yaz; altında bir boş satır kalsın.
  2. update içindeki ship.x += ship.vx ve ship.y += ship.vy satırlarını sil; yerine wrap'li iki satırı yaz.
  3. Çalıştır ve bir kenara doğru uç: öbür kenardan geri gelmelisin.

Beceriler: Hız ve yerçekimi

Tüm adımlar

  1. Kapkara uzay
  2. Gemi nerede?
  3. Nereye bakıyor?
  4. Üçgen gemi
  5. Hangi tuşlar basılı?
  6. Dönmek
  7. Oyun döngüsü
  8. İtki ve kayma
  9. Biraz sürtünme
  10. Hız sınırı
  11. Ekranın çevresinden dolaş
  12. Mermi yapmak
  13. Ateş!
  14. Mermiler uçar
  15. Mermilere ömür
  16. Kaya yapmak
  17. Dört büyük kaya
  18. Kayaları çiz
  19. Pürüzlü kayalar
  20. Sürüklenen kayalar
  21. İki daire ne zaman değer?
  22. Kaya kırmak
  23. Mermi kayayı vurur
  24. Puanlar
  25. Skoru göster
  26. Can kaybetmek
  27. Kaya gemiye çarpar
  28. Canları göster
  29. Saat kaç?
  30. Bir anlık güvenlik
  31. Güvendeyken yanıp sön
  32. Kaya dalgaları
  33. Sonraki dalga
  34. Her dalga daha hızlı
  35. Tek başlangıç fonksiyonu
  36. Oynuyor mu, bitti mi?
  37. Oyun bitti
  38. En iyi skor
  39. OYUN BİTTİ yazısı
  40. Yeniden oyna
  41. Kendin yap: hiperuzay