Atölye › Pinball › 1/42. adım
İki paletle topu oyunda tut. Doğru parçalarından yapılmış bir masa, en yakın nokta ve normal ile topu herhangi bir çizgiden sektirmek, enerji ekleyen tamponlar, dönen paletler, paletin topu fırlatmasını sağlayan göreli hız numarası, yaylı bir fırlatıcı ve iki başparmaklı dokunmatik kontroller.
Pinball'u sayfadaki bir canvas (tuval) üstüne çizeceğiz: 400 piksel eninde, 600 piksel boyunda boş bir dikdörtgen. Sağdaki uzun, koyu alan o.
İlk iş tuvali bulmak, sonra onun çizim kalemini almak ve bütün masayı koyu renge boyamak. Bir resme başlamadan önce kâğıdı masaya koyup fırçayı eline almak gibi.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
ctx.fillStyle = '#0c0a09'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```document.getElementById('game') → sayfada kimliği (id) game olan öğeyi, yani canvas'ı bulur.const canvas = → bulunana canvas adını verir.canvas.getContext('2d') → canvas'ın 2D çizim kalemini (context) ister. Adı ctx; bundan sonra her çizim
satırı ctx. ile başlayacak.ctx.fillStyle = '#0c0a09' → dolgu rengini seçer: siyaha çok yakın, sıcak bir koyu renk.ctx.fillRect(0, 0, canvas.width, canvas.height) → içi dolu bir dikdörtgen çizer. Dört sayı: sol üst köşenin
x'i ve y'si, sonra en ve boy.(0, 0) sol üst köşedir; x sağa, y aşağı doğru büyür.canvas.width (400) ve canvas.height (600) tuvalin kendi boyu: dikdörtgen her yeri kaplar.// ile başlayanlar) altına ilk iki satırı yaz.Beceriler: Canvas üzerine çizim