Atölye › Scorched Earth Tarzı Topçu › 1/23. adım
Tepelerin üstünden bir bilgisayar rakibe mermi at. Toplanan sinüs dalgalarından bir yükseklik haritası olarak saklanan tepeler, açı ve güçle nişan (ve atan2 tuzağı), kare kare uçuş, zemine kazılan yuvarlak kraterler, uzaklıkla azalan hasar, rüzgâr ve binlerce atışı hayal ederek nişan alan bir bilgisayar.
Scorched Earth tarzı bir topçu oyunu yapıyoruz: tepelerdeki iki tank birbirine mermi atıyor. Sonunda nasıl olacağını Bitmiş hâlini gör ile görebilirsin.
Önce zemin. Zemin bir yükseklik haritası: her piksel sütunu için bir sayı tutan bir liste; o sütunda yüzeyin y'si. Şimdilik dümdüz.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const W = canvas.width
const H = canvas.height
let ground // ground[x]: the y of the surface in column x
function makeGround() {
ground = []
for (let x = 0; x < W; x++) {
let y = 220
ground.push(y)
}
}
function draw() {
ctx.fillStyle = '#7dd3fc'
ctx.fillRect(0, 0, W, H)
ctx.fillStyle = '#65a30d'
for (let x = 0; x < W; x++) ctx.fillRect(x, ground[x], 1, H - ground[x])
}
makeGround()
draw()
```W, H → tuvalin genişliği ve yüksekliği için kısa adlar; her yerde kullanacağız.ground[x] → x sütununda çimenin başladığı y; altı hep toprak. 560 sütun, 560 sayı.let y = 220 → şimdilik her sütunda aynı yükseklik. Bir sonraki adımda buraya tepeler eklenecek; o yüzden ayrı bir
y değişkeni.ctx.fillRect(x, ground[x], 1, H - ground[x]) → her sütunu 1 piksel genişliğinde bir şerit olarak yüzeyden
alta kadar boya. Sonra zemin her yerde farklı yükseklikte olacak; böyle çizmek her şekli çizer.Satırları yorum satırlarının altına yaz ve Çalıştır'a bas: mavi gökyüzü ve düz yeşil bir zemin görmelisin.
Beceriler: Canvas üzerine çizim, Diziler ve nesneler