Atölye › Puzzle Bobble Tarzı Balon Atıcı › 2/31. adım
Bir balon, renkli bir daire. Balonun rengini bir sayı olarak tutacağız: COLORS dizisindeki sırası (0–4).
İleride "bu iki balon aynı renk mi?" diye çok soracağız; iki sayıyı karşılaştırmak en kolayı.
drawBubble (balon çiz) tek bir balonu çizecek. Denemek için ortaya geçici bir test balonu koyuyoruz.
```js
const R = 20 // bubble radius
const COLORS = ['#ef4444', '#f59e0b', '#22c55e', '#3b82f6', '#a855f7']
function drawBubble(x, y, color, r = R) {
ctx.fillStyle = COLORS[color]
ctx.beginPath()
ctx.arc(x, y, r - 1, 0, Math.PI * 2)
ctx.fill()
}
drawBubble(200, 260, 3)
```const R = 20 → balonun yarıçapı. COLORS → beş renk; balonda yalnız sırası (0–4) durur.function drawBubble(x, y, color, r = R) → r = R bir varsayılan değer: fonksiyon üç şeyle çağrılırsa r
kendiliğinden R olur. Küçük balon çizmek istersek dördüncüyü veririz.ctx.fillStyle = COLORS[color] → renk numarasını gerçek renge çevir: 3 → mavi.ctx.beginPath() → yeni bir şekil. ctx.arc(x, y, r - 1, 0, Math.PI * 2) → merkezi (x, y) olan bir yay; açı
0'dan Math.PI * 2'ye, yani tam tur: daire. r - 1 → komşu balonlar arasında ince bir boşluk kalsın.ctx.fill() → içini boya.drawBubble(200, 260, 3) → draw içinde geçici test balonu.const ctx = ... satırının altına bir boş satır bırak; R ve COLORS satırlarını yaz.function draw() { satırının üstüne drawBubble fonksiyonunu yaz; altında bir boş satır kalsın.draw içinde arka planın altına bir boş satır bırak ve test satırını yaz.Beceriler: Canvas üzerine çizim, Fonksiyonlar
← Gece göğü Hücrelerden bir ızgara →