Top-down movement like old pokemons games #litecanvas

code.js

litecanvas({
  width: 8*8,
  autoscale: 3
})

const p = {
  x: 0,
  y: 0,
  dx: 0,
  dy: 0,
  dist: 0,
  state: 'idle',
  spd: 0.5
}

function init() {
  
}

function update(dt) {
  if ('idle'===p.state) {
    if (iskeydown('d')) {
      p.dx+=p.spd
    } else if (iskeydown('a')) {
      p.dx-=p.spd
    } else if (iskeydown('s')) {
      p.dy+=p.spd
    } else if (iskeydown('w')) {
      p.dy-=p.spd
    }
    if (p.dx || p.dy) {
      p.dist=8
      p.state='moving'
    }
  } else if ('moving'===p.state) {
    move()
  }
}

function draw() {
  cls()

  for (let y = 0; y < 8; y++) {
    for (let x = 0; x < 8; x++) {
      rectfill(x*8,y*8,8,8,(x+y)%2?0:1)
    }
  }

  rectfill(p.x,p.y,8,8,3)
}

function move() {
  p.x+=p.dx
  p.y+=p.dy
  p.dist-=p.spd
  if (p.dist<=0){
    p.state='idle'
    p.dx=p.dy=0
  }
}

Live Demo