Meydan okuma - Canvas oyun akışı
Canvas, requestAnimationFrame ve çarpışma algılama ile bir top-sepet oyunu yazarsın.
Canvas oyun akışı
Bu meydan okumada <canvas> üzerine bir top-sepet oyunu çizeceksin. Önce canvas.getContext('2d') ile iki boyutlu çizim bağlamını alırsın.
Oyun döngüsü requestAnimationFrame(loop) ile kurulur; tarayıcı her karede loop'u çağırır. loop içinde önce ctx.clearRect(0, 0, w, h) ile ekranı siler, sonra konumları günceller ve tekrar requestAnimationFrame(loop) ile kendini çağırır.
Çarpışma algılama için iki nesnenin sınırlayıcı kutularının kesişip kesişmediğini kontrol edersin; kesişince top sepete girer.
Uygulama Oyun döngüsü ve çarpışma
Önce canvas.getContext('2d') ile 2D bağlamı al. Sonra bir loop(timestamp) fonksiyonu yaz: içinde ctx.clearRect(0, 0, canvas.width, canvas.height) çağrısı olsun ve yine requestAnimationFrame(loop) ile kendini zamanlasın. Çarpışma algılama için top ile sepetin kutularının kesiştiğini kontrol eden bir if ekle ve kesişince score++ çalışsın.
Örnek çözümü göster
const ctx = canvas.getContext('2d'); ile başla. Sonra function loop(timestamp) { ctx.clearRect(0, 0, canvas.width, canvas.height); if (ball.x < basket.x + basket.w) { score++; } ball.x += 1; requestAnimationFrame(loop); } yaz.
Örnek çözüm:
const ctx = canvas.getContext('2d');
let score = 0;
const ball = { x: 10, y: 10, size: 8 };
const basket = { x: 80, y: 60, w: 30, h: 20 };
function loop(timestamp) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (ball.x < basket.x + basket.w && ball.x + ball.size > basket.x) {
score++;
}
ctx.fillRect(ball.x, ball.y, ball.size, ball.size);
ctx.fillRect(basket.x, basket.y, basket.w, basket.h);
ball.x += 1;
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);Kendini test et
-
requestAnimationFrame ne yapar?
function loop(t) { ctx.clearRect(0, 0, w, h); requestAnimationFrame(loop); } requestAnimationFrame(loop);- Bir kerelik zamanlayıcı kurar
- Çizimi doğrudan ekrana basar
- Olay dinleyicisi ekler
- Sonraki karede verilen fonksiyonu çağırır
Cevabı göster
Sonraki karede verilen fonksiyonu çağırır — Doğru! requestAnimationFrame, tarayıcının yeniden çizmeden önce verilen fonksiyonu sonraki karede çalıştırır.
-
2D bağlamı al
const canvas = document.querySelector('canvas'); const ctx = canvas.____('2d');Cevabı göster
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); -
Canvas oyun kavramlarını eşleştir
- getContext('2d')
- 2D bağlam
- requestAnimationFrame
- Kare zamanlayıcı
- clearRect
- Ekranı sil
- ctx.fillRect
- Dikdörtgen çiz