Atölye › Bilardo › 1/33. adım
Masayı olabildiğince az vuruşla temizle. Bir açıdan hız, sürtünme ve bantlar, eşit toplar arasında esnek çarpışmalar (ve neden 90 derece açıyla ayrıldıkları), cepler, sapan gibi nişan, hızlı vuruşlar için daha küçük fizik adımları ve çarpmayı önceden gösteren bir hayalet top.
Her canvas oyununun başladığı yerden başlıyoruz: canvas'ı bul, çizim kalemini al ve saniyede ~60 kez koyu bir arka plan boyayan bir döngü kur. Bilardo masası bir sonraki adımda bu karanlık odanın ortasına gelecek.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
function draw() {
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
}
function loop() {
draw()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
```document.getElementById('game') → sayfadaki 480×340'lık 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 lacivert olmalı.
Beceriler: Canvas üzerine çizim, Oyun döngüsü