Atölye › 15 Bulmacası › 22/27. adım
Şimdi kaymayı çiziyoruz. Kayan taşı kendi karesine çizmeyeceğiz; onu eski karesiyle yeni karesi arasında bir yere çizeceğiz.
Fikir: t = animasyonun ne kadarı bitti (0 başta, 1 sonda). Yol boyunca yer: başlangıç + (bitiş − başlangıç) × t.
t 0,5 iken tam yarı yol. Buna doğrusal interpolasyon (lerp) denir; oyunlarda her yerde kullanılır.
```js
tiles.forEach((number, i) => {
if (number === 0 || (slide && number === slide.tile)) return
drawTile(number, squareX(i), squareY(i))
})
// The sliding tile is drawn part of the way from its old square to its new one.
if (slide) {
const t = slide.frame / SLIDE_FRAMES
const x = squareX(slide.from) + (squareX(slide.to) - squareX(slide.from)) * t
const y = squareY(slide.from) + (squareY(slide.to) - squareY(slide.from)) * t
drawTile(slide.tile, x, y)
}
```number === 0 || (slide && number === slide.tile) → boşluksa veya (||) (kayan taş varsa ve bu o taşsa)
bu turu atla. slide && önce "kayan taş var mı?" diye bakar; yoksa slide.tile hiç okunmaz.if (slide) { ... } → kayan taş varsa onu ayrıca çiz:const t = slide.frame / SLIDE_FRAMES → 0/8 = 0 başta, 4/8 = 0,5 yarıda, 8/8 = 1 sonda.squareX(slide.from) + (squareX(slide.to) - squareX(slide.from)) * t → eski x'ten yeni x'e yolun t kadarı.y aynısı. drawTile(slide.tile, x, y) → taşı oraya çiz.draw içindeki forEach'te if (number === 0) return satırını if (number === 0 || (slide && number === slide.tile)) return
yap.forEach bloğunu kapatan }) satırının altına yorum satırını ve if (slide) { ... } bloğunu yaz.Beceriler: Oyun döngüsü, Canvas üzerine çizim