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

Sıradaki ders: Meydan okuma - Güvenli uygulama

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler