Atölye › Flappy tarzı kuş › 1/30. adım

Flappy tarzı kuş: Canvas'ı ve kalemi al

Borular arasından geçmek için kanat çırp. Hız, yerçekimi, oyun durumları, engel üretme ve kare hızından bağımsız döngü.

Ne yapıyoruz

Borular arasından uçan bir kuş oyunu yazacağız. Oyundaki her şey sayfadaki bir canvas (tuval) üzerine çizilir. Bu oyunun tuvali uzun: 400 piksel eninde, 600 piksel boyunda. Sağdaki oyun alanı o. (Piksel, ekrandaki en küçük noktadır.)

Resim yapmadan önce iki şey lazım: kâğıt ve kalem. Bu adımda ikisini de elimize alıyoruz. Ekranda henüz bir şey değişmeyecek.

```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
```

Ne işe yarıyor

Sıra sende

Kodu, editördeki üç yorum satırının (// ile başlayanlar; bilgisayar onları okumaz, insanlar için not) altına yaz. Kopyalama; kendin yaz, harf harf. Sonra Çalıştır'a bas (ya da Ctrl + Enter). Ekran değişmez, ama alttaki kontroller yeşil olmalı.

Beceriler: Canvas üzerine çizim

Tüm adımlar

  1. Canvas'ı ve kalemi al
  2. Gökyüzünü boya
  3. Kuşu çiz
  4. Çizen bir fonksiyon
  5. Hareket ettiren bir fonksiyon
  6. Oyun döngüsü
  7. Yerçekimi
  8. Kanat çırpış
  9. Boşluk, yukarı ok ya da dokunuş
  10. İlk çırpışı bekle
  11. Yer ve gök
  12. Oyuncuya söyle
  13. Veri olarak boru
  14. Boruları çiz
  15. Kuş değil dünya kayar
  16. Rastgele yükseklikte yeni boru
  17. Her 90 karede bir boru
  18. Geçilen boruları sil
  19. Kuş borunun hizasında mı?
  20. Açıklıktan geç
  21. Her boruyu bir kez say
  22. Skoru göster
  23. Temiz başlangıç fonksiyonu
  24. Tekrar dene
  25. Oyunun bittiği tek yer
  26. Rekoru hatırla
  27. Rekoru göster
  28. Her ekranda aynı hız
  29. Aradan sonra telafi yok
  30. Kendin yap: madalya