Atölye › Angry Birds Tarzı Sapan › 1/47. adım
Tahta ve taş kulelere kuş fırlat ve domuzları devir. Bir açı ve bir çekişle nişan almak, yerçekimi ve (atmadan önce çizilen) parabol, kütlelerine göre yığılan, iten ve seken kutular, sert çarpmalardan gelen hasar, seviye başına üç kuş ve veri olarak yazılıp ayakta durduğu test edilen seviyeler.
Angry Birds tarzı bir oyun yapıyoruz: kuşu sapanda geri çek, bırak, kuleleri devir. Oyundaki her şey sayfadaki canvas (tuval) üzerine çizilir: 560 piksel eninde, 320 piksel boyunda bir resim alanı.
İlk çizimimiz sapanın tahta direği. Önce canvas'ı ve çizim kalemini alacağız, sonra zeminin ve sapanın yerini iki sabite yazıp direği boyayacağız.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const GROUND = 290
const SLING = { x: 90, y: 220 } // where the bird sits before it is launched
ctx.fillStyle = '#78350f'
ctx.fillRect(SLING.x - 4, SLING.y, 8, GROUND - SLING.y)
```document.getElementById('game') → sayfada kimliği (id) game olan öğeyi, yani canvas'ı bulur.canvas.getContext('2d') → canvas'ın 2B çizim kalemini verir. Adı ctx; bütün çizim komutları ctx. ile başlar.const GROUND = 290 → zeminin başladığı yükseklik. Canvas'ta (0, 0) sol üst köşedir; x sağa, y aşağı
doğru büyür. Yani 290, yukarıdan 290 piksel aşağısı: alttan 30 piksel.const SLING = { x: 90, y: 220 } → bir nesne (object): iki bilgiyi tek pakette tutar. İçindekine nokta ile
ulaşılır: SLING.x 90, SLING.y 220. Bu nokta sapanın tepesi; kuş fırlatılmadan önce burada durur.ctx.fillStyle = '#78350f' → kalemin rengini koyu kahverengi yapar.ctx.fillRect(x, y, en, boy) → içi dolu bir dikdörtgen çizer:SLING.x - 4 → direk 8 piksel enli; 4 sola kaydırınca tam SLING.x'in ortasına oturur.SLING.y → sapanın tepesinden başlar.GROUND - SLING.y → boyu: tepeden zemine kadar, 290 − 220 = 70 piksel.Kodu editördeki üç yorum satırının (// ile başlayanlar) altına yaz ve Çalıştır'a bas. Beyaz alanın solunda
ince, kahverengi bir direk görmelisin.
Beceriler: Canvas üzerine çizim