Atölye › Pinball › 4/42. adım
Bir oyun ekranı saniyede yaklaşık 60 kez yeniden çizer; top hareket ettikçe resim her seferinde biraz değişir. Bir çizgi filmin kareleri gibi.
Bunun için çizim satırlarını bir fonksiyona koyuyoruz: draw (çiz). Sonra bir oyun döngüsü (loop)
kuruyoruz: her turda draw()'u çağırır ve tarayıcıdan bir sonraki turu ister. Ekranda bir şey değişmeyecek; ama
masa artık her karede yeniden çiziliyor.
```js
function draw() {
ctx.fillStyle = '#0c0a09'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.strokeStyle = '#a8a29e'
ctx.lineWidth = 4
ctx.lineCap = 'round'
for (const [x1, y1, x2, y2] of WALLS) {
ctx.beginPath()
ctx.moveTo(x1, y1)
ctx.lineTo(x2, y2)
ctx.stroke()
}
}
function loop() {
draw()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
```function draw() { → bütün çizim satırlarını içine alan fonksiyon. İlk iş arka planı boyamak: bu, eski resmi
siler. Top hareket edince eski yerinde iz kalmamasının sebebi bu.requestAnimationFrame(loop) → tarayıcıya "ekranı bir sonraki yenilemeden hemen önce loop'u çalıştır" der.function loop() { → döngünün bir turu: çiz, sonra bir sonraki turu iste. Fonksiyon kendi devamını istediği
için döngü hiç durmaz; saniyede yaklaşık 60 tur.requestAnimationFrame(loop) → döngüyü başlatır.ctx.fillStyle = '#0c0a09' satırının üstüne function draw() { yaz.} işaretine kadar) iki boşluk içeri al ve en alta
kapanan } yaz.loop fonksiyonunu, bir boş satır daha bırakıp da requestAnimationFrame(loop) satırını
yaz.Beceriler: Oyun döngüsü, Fonksiyonlar
← Duvar listesi Kanalda bir top →