Atölye › Pong › 5/26. adım
Her oyuncunun bir raketi var: 10 piksel eninde, 80 piksel boyunda bir dikdörtgen. Sol raket soldan 20 piksel içeride, sağ raket sağdan 20 piksel içeride durur.
Raketler hareket edecek; bu yüzden konumlarını değişebilen bilgide tutuyoruz: her raket için bir nesne. Çizim de bu nesnelere bakıyor.
```js
const PADDLE_W = 10
const PADDLE_H = 80
let left = { x: 20, y: 160 }
let right = { x: canvas.width - 20 - PADDLE_W, y: 160 }
ctx.fillRect(left.x, left.y, PADDLE_W, PADDLE_H)
ctx.fillRect(right.x, right.y, PADDLE_W, PADDLE_H)
```const PADDLE_W = 10, const PADDLE_H = 80 → raketin eni ve boyu (W: width, en; H: height, boy).let left = { x: 20, y: 160 } → bir nesne: iki bilgiyi tek pakette tutar. x soldan, y yukarıdan uzaklık.
Süslü parantez paketi açıp kapatır; içinde ad: değer çiftleri virgülle ayrılır. let, çünkü raket hareket edecek.canvas.width - 20 - PADDLE_W → 600 − 20 − 10 = 570: raketin sağ kenarı, sahanın sağından 20 piksel içeride.y: 160 → (400 − 80) / 2 = 160: raket dikeyde ortada.ctx.fillRect(left.x, left.y, PADDLE_W, PADDLE_H) → left.x "sol raketin x'i". Nokta, paketin içinden bir bilgiyi
okur.const ctx = ... satırının altına bir boş satır bırakıp iki boyut sabitini yaz; bir boş satırdan sonra left ve
right satırlarını yaz.Beceriler: Canvas üzerine çizim, Oyun durumları
← Bütün file Çizen bir fonksiyon →