Atölye › Missile Command Tarzı Savunma › 1/35. adım
Gökyüzüne tıklayarak önleyici füzeler at ve altı şehri düşen füzelerden koru. Bir hedefe belirli bir hızla ilerlemek, büyüyüp küçülen patlamalar, zincirleme tepkimeler, sınırlı cephane, dalgalar ve bölünen füzeler.
Her oyunda kaybedilecek bir şey olmalı. Bu oyunda o şey, yerde duran altı şehir. Füzeler gökten düşecek, sen de onları durduracaksın.
İlk adımda sahneyi çiziyoruz: gece mavisi bir gökyüzü, kahverengi bir zemin ve zeminin üstünde altı mavi blok.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const GROUND = 370
const CITY_XS = [50, 110, 170, 310, 370, 430]
ctx.fillStyle = '#020617'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#854d0e'
ctx.fillRect(0, GROUND, canvas.width, canvas.height - GROUND)
ctx.fillStyle = '#38bdf8'
for (const x of CITY_XS) {
ctx.fillRect(x - 16, GROUND - 14, 32, 14)
}
```canvas, ctx → sayfadaki canvas ve onun 2D çizim kalemi. Bütün çizimler ctx. ile başlar.const GROUND = 370 → zeminin başladığı yükseklik. Canvas'ta y aşağı doğru büyür; 370 alta yakın.const CITY_XS = [...] → altı şehrin orta noktalarının x'leri, bir liste (dizi) içinde.GROUND'dan başlayıp
canvas.height - GROUND (400 − 370 = 30) piksel boyunda.for (const x of CITY_XS) { ... } → döngü: listedeki her sayı için, sırayla, ona x de ve içini çalıştır.
Altı sayı = altı şehir.ctx.fillRect(x - 16, GROUND - 14, 32, 14) → 32 piksel eninde, 14 piksel boyunda bir blok. x - 16 onu x'e
ortalar (yarım en sola), GROUND - 14 onu zeminin üstüne oturtur.Kodu editördeki üç yorum satırının altına yaz; boş satırları da aynen bırak. Çalıştır'a bas: koyu gökyüzü, kahverengi zemin ve altı mavi şehir görmelisin.
Beceriler: Canvas üzerine çizim, Diziler ve nesneler