Atölye › Space Invaders Tarzı › 1/21. adım

Space Invaders Tarzı: Gemi

Yürüyen bir uzaylı düzenine karşı hattı tut. Atış bekleme süresi, mermi listeleri, grup hareketi, kurallardan doğan hızlanma ve düşman ateşi.

Ne yapıyoruz

Space Invaders tarzı bir nişancı oyunu yapıyoruz: istilacı sıraları aşağı doğru yürüyor, en alttaki gemin onları vuruyor. Sonunda nasıl olacağını Bitmiş hâlini gör ile görebilirsin.

İlk iş gemi: altta, ortada, üstünde küçük bir namlusu olan camgöbeği bir kutu.

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

const SHIP_Y = 480
const SHIP_W = 36
const SHIP_H = 16

let ship = { x: canvas.width / 2 - SHIP_W / 2, y: SHIP_Y, w: SHIP_W, h: SHIP_H }

function draw() {
  ctx.fillStyle = '#020617'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  ctx.fillStyle = '#22d3ee'
  ctx.fillRect(ship.x, ship.y, ship.w, ship.h)
  ctx.fillRect(ship.x + SHIP_W / 2 - 3, ship.y - 6, 6, 6)
}

draw()
```

Ne işe yarıyor

Sıra sende

Satırları yorum satırlarının altına yaz ve Çalıştır'a bas: altta bir gemi görmelisin.

Beceriler: Canvas üzerine çizim

Tüm adımlar

  1. Gemi
  2. Oyun döngüsü
  3. Gemiyi oynat
  4. Ekranda kal
  5. Ateş
  6. Mermiler uçuyor
  7. Kısa bir dolum
  8. İstilacılar
  9. Yürüyüş
  10. Vurdun!
  11. Puan
  12. Karşılık veriyorlar
  13. Bombalar düşüyor
  14. Canlar
  15. Oyun bitti
  16. En iyi puan
  17. Dalga bir fonksiyonda
  18. Yeniden oyna
  19. Dalgalar
  20. Gittikçe hızlanan
  21. Kendin yap: fazladan can