Atölye › Kule Savunması › 1/42. adım
Yolun kenarına kuleler kur ve dalgaları geçmeden durdur. Bir yol boyunca mesafeyle yürümek, fare tıklamalarını döşemeye çevirmek, hedef seçmek, güdümlü mermiler, alan hasarı ve güçlenen dalgalar.
Bir kule savunması oyunu yapıyoruz: düşmanlar bir yol boyunca yürür, sen yolun kenarına kuleler kurarsın, kuleler onları vurur. Oyun canvas (tuval) üzerine çizilir: 480 × 440 piksellik bir resim alanı.
Önce ölçüler: 12 sütun, 9 satır, her kare (tile) 40 piksel. Üstte 40 piksellik bir şerit altın, can ve kule düğmeleri için; en altta da bir şerit kalacak. Sonra bütün tuvali koyu renge boyuyoruz.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const TILE = 40
const COLS = 12
const ROWS = 9
const TOP = 40 // room for gold, lives and the tower buttons
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```document.getElementById('game') → sayfada kimliği game olan öğeyi, yani canvas'ı bulur.canvas.getContext('2d') → canvas'ın 2B çizim kalemi: ctx. Bütün çizim komutları ctx. ile başlar.TILE, COLS, ROWS → kare boyu (40 piksel), sütun (12) ve satır (9) sayısı. 12 × 40 = 480: tuvalin eni.const TOP = 40 → haritanın yukarıdan ne kadar aşağıda başladığı. Harita 9 × 40 = 360 piksel: 40'tan 400'e.
Alttaki son 40 piksel ileride bir düğme şeridi olacak.ctx.fillStyle = '#0f172a' → kalemin rengi: çok koyu lacivert.ctx.fillRect(0, 0, canvas.width, canvas.height) → sol üst köşeden (canvas'ta (0, 0) sol üst köşedir, x
sağa, y aşağı büyür) tuvalin tam boyu kadar dikdörtgen: bütün tuval boyanır.Kodu editördeki üç yorum satırının (// ile başlayanlar) altına yaz ve Çalıştır'a bas. Sağdaki alan baştan
sona koyu laciverte boyanmalı.
Beceriler: Canvas üzerine çizim