0

Preciso desenvolver um jogo usando HTML 5 e Javascript com o jogo estando dentro de um canvas.

Criei uma tela de abertura do jogo e depois que clicar em jogar ele direciona para outra tela. Chamei desta forma o evento click

document.getElementById('canvas').addEventListener('click', verificaClick, false);

Onde canvas é o id de meu canvas e verificaClick a função que manda para o próximo passo segundo a opção selecionada pois tenho as opções "jogar", "como jogar" e "créditos".

Se eu clicar jogar ele direciona para uma página onde escolho a "fase" ou "etapa" do jogo que quero jogar, mais ou menos como Candy Crush.

Meu problema é que o canvas redesenha tudo certinho, entretanto permanece o evento de click da primeira parte do jogo, do primeiro desenho do canvas. Estou redesenhando, apagando o contexto e redesenhando, mas permanece o mesmo clique nas posições dos primeiros "botões" que desenhei.

Está correto o trecho onde chamo o evento de click?

document.getElementById('canvas').addEventListener('click', verificaClick, false);

Se não, como eu deveria fazer; Colocar vários contextos e adicionar o evento no contexto? Como faria isso?

1
  • Editei sua pergunta usando formatação de código em vez de negrito (no editor, o botão {} faz isso). Mas não entendi bem o problema. Você quer simplesmente remover o event listener?
    – bfavaretto
    Commented 3/06/2014 às 17:00

1 Resposta 1

1

Uma solução possível é retirar o listener após o uso, e adicionar outro referente ao próximo estado. Isso pode ser feito dentro da sua função verificaClick, depois que você validar que o click foi realmente no botão para a próxima tela.

function verificaClick(){
    // ...

    // Não sei exatamente como você faz a validação, mas vamos supor
    // que a condição abaixo verifique o clique sobre o botão 'Jogar':
    if(x > 100 && x < 300 && y > 350 && y < 410){
        // ...
        document.getElementById('canvas').removeEventListener('click', verificaClick, false);
        document.getElementById('canvas').addEventListener('click', verificaClickLevelSelect, false);
        // ...
    }

    // ...
}

function verificaClickLevelSelect(){
    // ...

    // Caso seja detectado um clique no botão 'Voltar', por exemplo:
    if(x > 50 && x < 150 && y > 50 && y < 90){
        // ...
        document.getElementById('canvas').removeEventListener('click', verificaClickLevelSelect, false);
        document.getElementById('canvas').addEventListener('click', verificaClick, false);
        // ...
    }

    // ...
}

Claro, sua árvore de navegação pode ser ENORME. Nesse caso, esse método pode ser rudimentar demais e difícil de manter. Uma implementação mais elaborada poderia incluir a manutenção "automática" dos listeners através de um objeto no escopo global, que armazenaria a máquina de estados e seria atualizado por um método helper a cada navegação.

Não vou tirar teu prazer em programar essa máquina, parece divertido! :)

2
  • 1
    Obrigado ai viu cara, deu certo, havia me esquecido completamente de como utilizar o listener, esqueci que dava para remover, obrigado mesmo
    – user10250
    Commented 3/06/2014 às 18:21
  • Ah, queisso, não foi nada :) estamos aí pra isso! Commented 3/06/2014 às 19:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .