Atölye › Tuğla Kırma › 1/39. adım
Fareyle yönettiğin raket ve bir topla tuğla duvarını yık. İç içe döngüler, daire–kutu çarpışması, canlar ve servis, parçacık efektleri.
Tuğla Kırma oyunu sayfadaki 480×400 piksellik bir canvas (tuval) üzerinde oynanır. İlk adımda sahneyi kuruyoruz: bütün alanı koyu laciverte boyayıp altına açık renkli bir raket (paddle) çizeceğiz.
Raketin ölçüleri hiç değişmeyecek, bu yüzden onları adlı sabitlerde tutuyoruz. Yeri ise değişecek (fareyle kayacak), o yüzden bir değişkende.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const PADDLE_W = 80
const PADDLE_H = 12
const PADDLE_Y = 370
let paddle = { x: 200 }
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#e2e8f0'
ctx.fillRect(paddle.x, PADDLE_Y, PADDLE_W, PADDLE_H)
```document.getElementById('game') → sayfada kimliği game olan canvas'ı bulur; const canvas = ona bir ad verir.canvas.getContext('2d') → canvas'ın 2D çizim kalemini alır. Bütün çizim komutları ctx. ile başlar.const PADDLE_W = 80 → raketin eni 80 piksel. PADDLE_H boyu (12), PADDLE_Y üstten uzaklığı (370,
yani en alta yakın). Hiç değişmeyecek sayılara büyük harfli ad vermek bir alışkanlıktır.let paddle = { x: 200 } → bir nesne: etiketli bilgilerden oluşan küçük bir kart. paddle.x raketin sol
kenarının yeri. let kullandık, çünkü bu değer değişecek.ctx.fillStyle = '#0f172a' → kalemin rengini seçer (koyu lacivert).ctx.fillRect(0, 0, canvas.width, canvas.height) → içi dolu bir dikdörtgen boyar: sol üst köşe (0, 0), eni ve
boyu canvas'ın kendisi kadar. Canvas'ta x sağa, y aşağı doğru büyür.paddle.x, üstü PADDLE_Y.Kodu editördeki üç yorum satırının (// ile başlayanlar) altına yaz; boş satırları da aynen bırak.
Çalıştır'a bas: koyu bir alanın altında açık renkli bir raket görmelisin.
Beceriler: Canvas üzerine çizim