Atölye › Pinball › 3/42. adım
Bütün masa düz parçalardan yapılıyor: kavisli tepe aslında birkaç kısa eğik çizgi, sağdaki fırlatma kanalı iki uzun çizgi ve bir taban, altta da paletlere inen iki eğim.
Her duvarı ayrı ayrı yazmak yerine hepsini tek bir listede tutacağız: WALLS. Her duvar dört sayıdır:
[x1, y1, x2, y2], yani "şu noktadan şu noktaya". Sonra bir döngü listedeki her duvarı aynı dört satırla
çizecek. Masayı değiştirmek istersen yalnız listeyi değiştirirsin; ileride top da bu listeye çarpacak.
```js
// The walls, as line segments [x1, y1, x2, y2].
const WALLS = [
[20, 470, 20, 120], [20, 120, 60, 55], [60, 55, 140, 22], [140, 22, 260, 22], [260, 22, 340, 50], [340, 50, 390, 120],
[390, 120, 390, 590], [360, 590, 360, 170], [360, 590, 390, 590], // the launch lane
[20, 470, 128, 530], [360, 470, 272, 530], // the slopes down to the flippers
]
for (const [x1, y1, x2, y2] of WALLS) {
ctx.beginPath()
ctx.moveTo(x1, y1)
ctx.lineTo(x2, y2)
ctx.stroke()
}
```const WALLS = [ ... ] → bir dizi (liste). İçindeki her eleman da dört sayılık küçük bir dizi: bir duvar.
Yani dizilerden oluşan bir dizi. İlki [20, 470, 20, 120], az önce çizdiğin sol duvar.// the launch lane gibi yazılar yorum: hangi satırın ne olduğunu anlatır.for (const [x1, y1, x2, y2] of WALLS) { → "WALLS'taki her duvar için süslü parantez içini yap".of WALLS → elemanları sırayla, tek tek alır.[x1, y1, x2, y2] → aldığı dört sayılık diziyi açar: ilk sayıya x1, ikincisine y1... adını verir.
Buna dizi açma (destructuring) denir.x1, y1, x2, y2 var. Döngü 11 kez
döner, 11 duvar çizilir.const ctx = ... satırının altına bir boş satır bırak; yorum satırını ve WALLS listesini yaz. Sayıları
dikkatle yaz: her virgül ve köşeli parantez önemli.ctx.beginPath()'ten ctx.stroke()'a kadar) sil; yerine for döngüsünü yaz. Üstteki
strokeStyle, lineWidth, lineCap satırları aynı kalır.Beceriler: Diziler ve nesneler, Canvas üzerine çizim
← Bir duvar çiz Oyun döngüsü →