Atölye › Yılan › 5/28. adım

Yeri bir değişkende tut

Ne yapıyoruz

Kare şu an koda sabit yazılı: 5 * CELL. Onu ileride hareket ettirebilmek için yerini değişebilen bir bilgide tutmalıyız. Çizim de her seferinde o bilgiye bakmalı.

Ekranda bir şey değişmeyecek; kare yine aynı yerde. Ama artık yerini bir değişken söylüyor. Bu, oyun yazmanın en önemli fikri: durum (oyunda şu an ne var) ayrı, çizim (onu göstermek) ayrı.

```js
let head = { x: 5, y: 5 }

ctx.fillRect(head.x * CELL, head.y * CELL, CELL, CELL)
```

Ne işe yarıyor

let head = → değişken tanımlar. const'tan farkı: let ile verilen adın değeri sonradan değiştirilebilir. Yılanın başı hareket edeceği için let.
{ x: 5, y: 5 } → bir nesne (object): iki bilgiyi tek pakette tutar. x sütun, y satır. Süslü parantez paketi açıp kapatır; içinde ad: değer çiftleri virgülle ayrılır.
head.x → "head'in x'i" (5). Nokta, paketin içinden bir bilgiyi okur.
Son satır aynı kareyi çiziyor ama 5 yerine artık head.x ve head.y'ye bakıyor.

Sıra sende

const CELL = 20 satırının hemen altına let head = { x: 5, y: 5 } yaz.
En alttaki ctx.fillRect(5 * CELL, 5 * CELL, CELL, CELL) satırında ilk 5'i head.x, ikinci 5'i head.y yap. Satırın geri kalanı aynı kalır.
Çalıştır: kare yerinde durmalı, kontroller yeşil olmalı.

Beceriler: Oyun durumları

← Hücrelerle düşün Çizen bir fonksiyon →

Yeri bir değişkende tut

Ne yapıyoruz

Ne işe yarıyor

Sıra sende

Tüm adımlar