纯JavaScript游戏开发：角色在画布上移动的问题

如何解决纯JavaScript游戏开发：角色在画布上移动的问题

我正在尝试使用纯JavaScript和面向对象的程序来开发游戏，但是我一直在努力使主要（唯一）角色在一系列事件后在画布中移动（角色应该在事件，但不是）。

我可以在画布上创建一些动作，但是我只是不知道如何在一系列特定事件之后使角色移动。

在游戏中，一只猫穿过画布并停在特定点上，在那里出现带有问题和多个答案选项的框，以便玩家可以回答（正确-继续游戏/错误-游戏结束）。

问题是：

猫正在移动到我创建的第一个检查点，但没有移动到第二个检查点：

function gameCanvas() {
  clearCanvas();
  cat.displayCat();
  cat.moveCattocheckpoint1();

  if (cat.x === 205 && cat.y === 80) {
    let questionBoxDelay = setTimeout(function() {
      document.getElementById("question-Box").style.display = "block";
      cat.moveCatToLeaveCheckpoint1();
    },1000);
  }

  if (this.x < 600 && this.y === 80) {
    console.log("CORRECT ANSWER");
    document.getElementById("right-answer-Box").style.display = "none";
    cat.moveCattocheckpoint2();
  }
}

function clearCanvas() {
  ctx.clearRect(0,canvas.width,canvas.height);
}

setInterval(gameCanvas,5);

这个想法是在玩家单击右侧答案通知框上的“继续”按钮后，将猫编程为移至第二个检查点。

代码： https://jsfiddle.net/ffxff/9scydjx8/15/