Workshop › Pac-Man-style Maze Chase › Step 12 of 42

Glide between tiles

What we are doing

The player still jumps a whole tile every 8 frames. position gives where it really is: its tile plus the part of the step already done, progress / frames of a tile in its direction. Drawing at that position makes it glide.

```js
// Where an actor is drawn: its tile plus how far it has come towards the next one.
function position(e) {
  return { x: e.col + (e.dir[0] * e.progress) / e.frames, y: e.row + (e.dir[1] * e.progress) / e.frames }
}

  const p = position(player)
  ctx.fillStyle = '#facc15'
  ctx.beginPath()
  ctx.arc(p.x * TILE + TILE / 2, TOP + p.y * TILE + TILE / 2, 10, 0, Math.PI * 2)
```

What it means

progress / frames is the part of the step done: 4 / 8 is half a tile.
Times dir[0] it goes the right way (and is 0 when not moving that way).
x and y are in tiles, with decimals; the drawing multiplies them by TILE as before.

Your turn

Above the // One frame of movement. comment, write the comment and position.
In draw, write const p = position(player) above the player's color, and use p.x and p.y in the arc line.

Skills: Drawing on a canvas

← Turns you can press early Turn back at once →

All steps