;(function() {
  let el = document.getElementById('move')
  let done = false;
  let left = 0;
  let top = 0;
  let direction = 'right' // left right down up
  let requestId = null
  
  function step (timestamp) {
    switch (direction) {
      case 'right':
        left += 10
        if (left === 200) {
          direction = 'down'
        }
        break
      case 'down':
        top += 10
        if (top === 200) {
          direction = 'left'
        }
        break;
      case 'left':
        left -= 10
        if (left === 0) {
          direction = 'up'
        }
        break;
      case 'up':
        top -= 10
        if (top === 0) {
          direction = 'right'
        }
        break;
    }
    el.style.left = `${left}px`
    el.style.top = `${top}px`
    if (!done) {
      requestId = window.requestAnimationFrame(step);
    }
  }

  document.getElementById('start').onclick = () => {
    done = false
    window.cancelAnimationFrame(requestId)
    requestId = window.requestAnimationFrame(step)
  }
  document.getElementById('stop').onclick = () => {
    done = true
  }
})()