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

Kayaları çiz

Ne yapıyoruz

Kayayı 10 köşeli bir çizgiyle çizeceğiz. i'nci köşe tam turun i / 10'unda durur: 0., 36., 72. derece... Her köşe merkezden r * scale uzakta (scale şimdilik hep 1). Köşenin yeri geminin köşeleri gibi cos ve sin ile bulunur.

```js
function drawAsteroid(asteroid) {
  ctx.beginPath()
  asteroid.shape.forEach((scale, i) => {
    const angle = (i / asteroid.shape.length) * Math.PI * 2
    const x = asteroid.x + Math.cos(angle) * asteroid.r * scale
    const y = asteroid.y + Math.sin(angle) * asteroid.r * scale
    if (i === 0) ctx.moveTo(x, y)
    else ctx.lineTo(x, y)
  })
  ctx.closePath()
  ctx.stroke()
}

  for (const asteroid of asteroids) drawAsteroid(asteroid)
```

Ne işe yarıyor

Sıra sende

  1. function draw() { satırının üstüne drawAsteroid fonksiyonunu yaz; altında bir boş satır kalsın.
  2. draw içinde ctx.lineWidth = 2 satırının altına kayaları çizen satırı yaz; altında (drawShip'ten önce) bir boş satır kalsın.
  3. Çalıştır: üst kenarda dört düzgün, on köşeli şekil görmelisin. (Henüz kıpırdamıyorlar.)

Beceriler: Canvas üzerine çizim, 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