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

时间:2020-10-25 23:23:07

标签: javascript canvas game-development

我正在尝试使用纯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, 0, canvas.width, canvas.height);
}

setInterval(gameCanvas, 5);

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

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

0 个答案:

没有答案
相关问题