Atölye › Puzzle Bobble Tarzı Balon Atıcı › 1/31. adım
Aynı renkten üçünü patlatmak ve tuttuklarını düşürmek için balon at. 2 boyutlu dizide altıgen bir ızgara, atan2 ile nişan, seken ve ızgaraya oturan atışlar, gruplar için bir flood fill ve hâlâ asılı olanlar için bir başkası, inen bir tavan ve atışı simüle eden bir kılavuz.
Her canvas oyununun başladığı yerden başlıyoruz: canvas'ı bul, çizim kalemini al ve saniyede ~60 kez koyu mavi bir arka plan boyayan bir döngü kur. Renkli balonlar bu gece göğünde parlayacak.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
function draw() {
ctx.fillStyle = '#1e1b4b'
ctx.fillRect(0, 0, canvas.width, canvas.height)
}
function loop() {
draw()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
```document.getElementById('game') → sayfadaki 400×520'lik canvas; getContext('2d') → onun çizim kalemi, ctx.draw → fillStyle ile rengi seçer, fillRect(0, 0, canvas.width, canvas.height) ile canvas'ın tamamını boyar.
Canvas'ta (0, 0) sol üst köşe; x sağa, y aşağı doğru büyür.loop → döngünün bir turu: çiz, sonra requestAnimationFrame(loop) ile "ekran bir sonraki yenilenmeden önce beni
yine çağır" de. Saniyede ~60 tur.requestAnimationFrame(loop) → döngüyü başlatır.Kodu üç yorum satırının altına yaz ve Çalıştır'a bas. Sağdaki alan koyu mavi olmalı.
Beceriler: Canvas üzerine çizim, Oyun döngüsü