const rect = document.querySelector('.rect')

let direction = 'right'
let x = 0
let y = 0
const width = 200
const height = 200


setInterval(() => {

  if (direction === 'right') {
    rect.style.transform = `
      translate(${++x}px, ${y}px)
    `
  }

  if (direction === 'up') {
    rect.style.transform = `
      translate(${x}px, ${--y}px)
    `
  }

  if (direction === 'left') {
    rect.style.transform = `
      translate(${--x}px, ${y}px)
    `
  }

  if (direction === 'down') {
    rect.style.transform = `
      translate(${x}px, ${y++}px)
    `
  }
  console.log(x, y)
  if(x === width && y === 0) direction = 'down'
  if(x === width && y === height) direction = 'left'
  if(x === 0 && y === height) direction = 'up'
  if(x === 0 && y ===0) direction = 'right'
  
  

}, 10)