Workshop › 15 Puzzle › Step 22 of 27
The sliding tile is not drawn on its square; it is drawn part of the way from its old square to its new one. t goes
from 0 to 1 during the slide, and the position goes along with it.
```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)
}
```forEach now also skips the sliding tile: slide && makes sure there is a slide before reading slide.tile.t is 0 at the start and 1 at the end.x and y go from the old square towards the new one as t grows; the tile is drawn there.In draw, change the if inside forEach, and under the forEach block write the comment and the if (slide) block.
Skills: The game loop, Drawing on a canvas