How to handle addeventlistener event click in javascript

Question

I need to develop a game using HTML 5 and Javascript with the game inside a canvas.

I created a game opening screen and after that click on play it directs to another screen. I called this way the event click

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

Where canvas is the id of my canvas and verificaClick the function that sends to the next step according to the selected option because I have the options "play", "how to play" and "credits".

If I click play it directs to a page where I choose the "stage" or "stage" of the game I want to play, more or less like Candy Crush.

My problem is that the canvas redesigns everything right, however remains the click event of the first part of the game, the first drawing of the canvas. I am redesigning, erasing the context and redesigning, but it remains the same click on the positions of the first "buttons" I drew.

Is correct the section where I call the click event?

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

If not, how should I do it; Put multiple contexts and add the event in context? How would I do that?

Answer 1

One possible solution is to remove the Istener after use, and add another referring to the next state. This can be done within your checkClick function, after you validate that the click was actually on the button to the next screen.

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);
        // ...
    }

    // ...
}

Of course, your navigation tree can be HUGE. In this case, this method can be too rudimentary and difficult to maintain. A more elaborate implementation could include "automatic" maintenance of listeners through an object in the global scope, which would store the state machine and be updated by a helper method to each navigation.

I won’t take your pleasure in programming that machine, it sounds fun! :)