Atölye › Bomberman Tarzı Arena › 1/42. adım
Sandıkları patlatarak ilerle ve düşmanları kıstır. Duvarlardan, sütunlardan ve sandıklardan bir ızgara, kareden kareye kayma, fitilli bombalar, duvarlarda duran ve zincirleme tepkimeler başlatan artı şeklinde patlamalar, dolaşan düşmanlar, bir Map'te tutulan güçlendirmeler ve klavyenin kurallarını yeniden kullanan dokunmatik kontroller.
Bomberman tarzı bir oyun yapıyoruz: karelerden bir arena, bombalar, alevler ve düşmanlar. Oyun canvas (tuval) üzerine çizilir: 416 × 384 piksellik bir resim alanı.
Önce arenanın ölçüleri: 13 sütun ve 11 satır, her kare (tile) 32 piksel. Üstte 32 piksellik bir şerit canlar ve süre için boş kalacak. Sonra bütün tuvali koyu renge boyuyoruz.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const COLS = 13
const ROWS = 11
const TILE = 32
const TOP = 32 // room for the lives and the time
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.const COLS = 13, const ROWS = 11 → sütun ve satır sayısı. const TILE = 32 → bir karenin boyu (piksel).const TOP = 32 → arenanın yukarıdan ne kadar aşağıda başlayacağı. Hesap tutuyor: 13 × 32 = 416 (tuvalin eni),
32 + 11 × 32 = 384 (tuvalin boyu).ctx.fillStyle = '#0f172a' → kalemin rengi: çok koyu lacivert.ctx.fillRect(0, 0, canvas.width, canvas.height) → içi dolu dikdörtgen: 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. 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