Jogo em JavaScript puro: problemas para criar movimento no canvas

Programação
#1

Opa, tudo bem?

É a primeira vez que acesso aqui e estou aqui por estar – faz mais de uma semana – preso num mesmo problema no desenvolvimento de um jogo em JavaScript puro. Não tinha muito a quem recorrer, então decidi começar a procurar por ajuda pelo mundão. Se alguém puder me ajudar, agradeço muito, de verdade.

Bom, vamos lá:

No código, consigo criar alguns movimentos pelo canvas, mas não após uma série de eventos específicos. No jogo, um gato vai percorrendo o canvas e parando em alguns pontos onde caixas com perguntas e opções de respostas aparecem para o jogador responder e dar continuidade ou game over no jogo.

O problema:
O gato vai até o primeiro checkpoint que criei, mas não se move para o segundo checkpoint.
EDIT - A ideia seria programar o gato para se mover para esse segundo checkpoint após clicar no botão Continuar na caixa de notificação de resposta correta.

O código no CodePen:

#2

Testano aqui, o gato vai até o ponto 1, eu respondo a pergunta e aparece um botão “continuar”, mas nada acontece quando clico nele. É esse o problema que está tendo?

Essa verificação é estranha:

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

Você usa as coordenadas x e y para determinar se a resposta é correta. Mesmo que funcione, é uma estrutura bem incomum. Melhor seria você guardar o estado (qual a pergunta atual) de forma global em vez de ficar comparando na mão dentro do loop principal.

Você pode ter algo como uma lista (vetor/array) de perguntas (sendo cadar pergunta um objeto) e um índice para saber qual a pergunta atual. Assim, para você ir para a próxima pergunta, basta incrementar esse índice quando o jogador acerta a resposta.

Abraço.

#3

Ah, nossa, acabei de perceber que colei errado algumas partes do código. Esse trecho com if é de um código antigo. Na pressa, acabei não reparando. Mas é aí que está o cerne do problema mesmo, só não é relacionado com o botão Continuar. A parte de clicar no botão Continuar faz a caixa de notificação de resposta correta sumir, como no código abaixo.

const continueButton = document.getElementById('continue-button');

continueButton.onclick = function () {
    document.getElementById('right-answer-box').style.display = 'none';
}

O problema msm é mover o gato para o checkpoint2 após clicar no botão Continuar e eu estava tentando descobrir uma maneira de estruturar isso melhor.

Onde encontro material pra ler sobre como guardar o estado e como utilizar o array e um índice? Vou dar uma pesquisada aqui, ver o que consigo encontrar.

Ainda sou bem leigo, é a primeira vez que tento programar um jogo. E, pelo visto, estava tentando organizar as coisas de maneira equivocada. As sugestões são bem novas pra mim. Preciso dar uma estudada com calma nisso tudo pra ver se consigo implementar. Se souber de um material (até em inglês) pra me indicar pra ler, já adianta um pouco na pesquisa que vou fazer aqui.

E, nossa, brigadão, de verdade mesmo!

#4

Usando arrays, você pode ter vários objetos tipo pergunta, com as coordenadas, opções de resposta e resposta correta, e uma variável global pode indicar qual a pergunta atual (que é o índice que comentei). Você pode também ter outra variável pra indicar qual o estado atual (movendo-se, respondendo uma pergunta), assim você pode verificar qual o estado de jogo, em vez de, por exemplo, ficar verificando a posição do jogador enquanto ele está respondendo uma pergunta.

O array seria algo como:

let indiceDaPerguntaAtual = 0;

perguntas = [
	{ x: 100, y: 100, texto: "Texto da primeira pergunta", 
	  alternativas: [
		  "alternativa 1",
		  "alternativa 2",
		  "alternativa 3",
		  ],
	  opcaoCorreta: 2,
		},
	{ x: 400, y: 250, texto: "Texto da segunda pergunta", 
	  alternativas: [
		  "alternativa 1",
		  "alternativa 2",
		  "alternativa 3",
		  ],
	 opcaoCorreta: 1,
	},
	];

Estou colocando texto, mas você pode colocar caminhos de imagens, outros objetos, etc. Você pode acessar a pergunta atual pela variável indiceDaPerguntaAtual:

console.log(perguntas[indiceDaPerguntaAtual]);

Assim, você pode acessar as variáveis da pergunta, como as coordenadas de movimento:

let posicao_X_ParaOndeOGatoDeveIr = perguntas[indiceDaPerguntaAtual].x;
let posicao_Y_ParaOndeOGatoDeveIr = perguntas[indiceDaPerguntaAtual].y;

Pra saber se o jogador acertou, verifique se o botão clicado corresponde ao valor de opcaoCorreta da pergunta atual. Se sim, basta incrementar o valor da variável indiceDaPerguntaAtual, que o jogo já estará considerando essa pergunta como ativa.

Lembrando que isso é um resumo. Você precisa adaptar bastante para o seu código, além de fazer outros ajustes.

E recomendo que você dê uma estudada em javascript básico antes de tentar fazer um jogo. Uma boa referência é a MDN. Aqui está o material sobre arrays.

Abraço.