Как анимировать движение нескольких фигур с помощью html5 canvas

Question

Я собираюсь воссоздать проект, который я нашел в Fla sh, используя тег canvas.

Это проект, который я хочу скопировать: https://www.kongregate.com/games/Stillmerlin/the-empty-kingdom

Мне трудно понять, как анимировать движение фигур, когда им нужно вырваться из поля зрения.

это код, который я скомпилировал на данный момент мне удалось переместить квадрат внутри различных прямоугольников с помощью клавиатуры: https://jsfiddle.net/mgus17db/

var canvas = document.querySelector("#demo_canvas");
var ctx = canvas.getContext("2d");

var pg = canvas.getContext("2d");

var xPos = 75;
var yPos = 75;

function draw() {
 ctx.rect(50, 50, 150, 100);
 ctx.stroke();

 ctx.rect(250, 50, 150, 100);
 ctx.stroke();

 ctx.rect(450, 50, 150, 100);
 ctx.stroke();

 ctx.rect(250, 200, 150, 100);
 ctx.stroke();

 pg.rect(xPos, yPos, 50, 50);
 pg.stroke();
};

draw();
console.log("x = " + xPos + ", y = " + yPos);


function move(e) {

 //ARROW KEY RIGHT
 if (e.keyCode == 39) {
  if (xPos == 75 && yPos == 75) {
   xPos += 225;
  }
  else if (xPos == 300 && yPos == 75) {
   xPos += 225;
  };
 };

 //ARROW KEY LEFT
 if (e.keyCode == 37) {
  if (xPos == 75 && yPos == 75) {
   xPos -= 0;
  }
  else if (xPos == 300 && yPos == 75) {
   xPos -= 225;
  }
  else if (xPos == 525 && yPos == 75) {
   xPos -= 225;
  };
 };

 //ARROW KEY UP
 if (e.keyCode == 38) {
  if (yPos == 75) {
   yPos -= 0;
  }
  else if (yPos == 225) {
   yPos -= 150;
  }
 };

 //ARROW KEY DOWN
 if (e.keyCode == 40) {
  if (yPos == 75 && xPos == 300) {
   yPos += 150;
  }
 };

 canvas.width = canvas.width;
 draw();
 console.log("x = " + xPos + ", y = " + yPos);
};

document.onkeydown = move;