I’m trying to develop a game using pure javascript and object-oriented programming but I’ve been struggling to make the main (and only) character move in a canvas after a series of events (the character should move after the events, and it’s not).
I’m able to create some movements on canvas, but I’m just not figuring out how to make the character move after a series of specific events.
In the game, a cat goes through the canvas and stops on specific points, where boxes with questions and multiple answer options appear so the player can answer (right - continue the game/wrong - game over).
The problem is:
The cat is moving to the first checkpoint I’ve created, but it’s not moving to the second checkpoint:
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);
The idea is to program the cat to move to the second checkpoint after the player clicks on the “Continue” button on the right answer notification box.
The code: https://jsfiddle.net/ffxff/9scydjx8/15/