Atölye › Pinball › 5/42. adım

Kanalda bir top

Ne yapıyoruz

Şimdi top. Ama önce çizmeyeceğiz; önce topu bilgi olarak kuracağız: nerede (x, y) ve ne kadar hızlı gidiyor (vx, vy). Oyun yazmanın temel fikri bu: durum (şu an ne var) ayrı, çizim (onu göstermek) ayrı.

Her yeni top aynı yerden başlar: sağdaki fırlatma kanalının dibinden. Bunu yapan küçük bir fonksiyon yazıyoruz: newBall() (yeni top). Bu adımda ekranda bir şey değişmeyecek.

```js
const R = 8 // ball radius
const LANE_X = 375 // the launch lane on the right

let ball // { x, y, vx, vy }

function newBall() {
  ball = { x: LANE_X, y: 570, vx: 0, vy: 0 }
}

newBall()
requestAnimationFrame(loop)
```

Ne işe yarıyor

const R = 8 → topun yarıçapı (radius): 8 piksel.
const LANE_X = 375 → fırlatma kanalının ortası. Kanalın duvarları x = 360 ve x = 390'da; ortası 375.
let ball → top için bir değişken. Değeri yok; değerini newBall verecek. Yanındaki yorum içinde ne olacağını söylüyor.
ball = { x: LANE_X, y: 570, vx: 0, vy: 0 } → bir nesne: dört bilgi tek pakette.
- x, y → topun merkezi: kanalın dibi.
- vx, vy → hız (velocity): top her karede kaç piksel sağa (vx) ve kaç piksel aşağı (vy) gidecek. İkisi de 0: top duruyor.
En alttaki newBall() → döngü başlamadan ilk topu kurar.

Sıra sende

// The walls, as line segments... yorum satırının hemen üstüne R ve LANE_X satırlarını yaz.
WALLS listesinin kapanan ] satırının altına bir boş satır bırak; let ball satırını, bir boş satır daha bırakıp newBall fonksiyonunu yaz.
En alttaki requestAnimationFrame(loop) satırının hemen üstüne newBall() yaz.
Çalıştır: ekran değişmez, kontroller yeşil olmalı.

Beceriler: Oyun durumları

← Oyun döngüsü Topu çiz →

Kanalda bir top

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar