Multiple Requests

[Henity]

Hello everyone, I'm really confused. I created this flow for my game: start game > press key brings up in game menu > exit game to go back to main menu > start game again.

Debugging purposes I have functions write to console when complete.

It works as expected but these functions are called times two (sometimes three). What could be causing this? I've made sure my even listeners are on and off appropriately. There is no double click...I'm lost for words.

I've attached screenshots.

 

 

Thank you in advance, hopefully I learn something.

[mcolman]

You're probably creating a new instance of the game when you start game again, but no idea without seeing the code. Can you post the code?

[Nesh108]

@Henity, yeah you have to share your code or at least simplify it enough for us to work on it (so many times, cleaning up the code to show it to other people will already spot your problem).

[Henity]

Yes of course, and thank you for replying...I'm just not sure what to show so here goes:

function aniFadeInOut(){  
    stage.removeChild(mainMenu);
    mainMenu.mouseEnabled = mainMenu.visible = false;
    createjs.Tween.get(fadeScene)
        .to({ alpha: 1 }, 1200)
        .wait(2000)
        .to({ alpha: 0 }, 1200)
        .call(addGameLoop);   
    console.log("fade in pause 2s then out");
}

// add gameLoop container to stage
function addGameLoop(){ 
    stage.addChild(gameLoop);
    startBtn.removeAllEventListeners('click');
    onlyHitBox.on('click', movePlayer);
}

function movePlayer(){   
    var prePos = player.x;
    gameLoop.mouseEnabled = false;     
    if(pauseG == false){
        clickCount++;
        if(clickCount == 1){
            createjs.Tween.get(player)
                .to({ x: xMousePos }, calDisTime()) //, createjs.Ease.elasticOut)
                .call(resetGLCC);
            document.getElementById("prePos").innerHTML = prePos;
        }
        else{
            console.log("clicking while tweening");
        }
    }    
}

// get keyboard presses
window.addEventListener("keydown", keyPressDown);
// create a pause game state
var pauseG = false; // used for debugging
var menuOptions = false; // for actual game

/*
 * keyboard presses. Keys being captured:
 * Pkey - used to pause and unpause the tick
 */
function debugPauseG(){
    // this if is used for debugging
    if (pauseG == false){
        pauseG = true;
        createjs.Ticker.setPaused(true);
        console.log("tick is paused");                
        return;
    }
    else if(pauseG == true){
        pauseG = false;                               
        createjs.Ticker.setPaused(false);
        console.log("tick is unpaused");
        return;
    }
}

function inGameMenu(){
    // this is to pause the game and popup the menu screen
    var stopHere = Math.round(player.x);
    resetGLCC();
    // pause
    if(gameLoop.stage && menuOptions == false){        
        // flip/reset the variables as if M key was pressed again
        menuOptions = true;
        // disable click event just in case
        onlyHitBox.removeAllEventListeners('click');                
        createjs.Tween.get(fadeScene)
            .to({ alpha: 0.5 }, 500);
        createjs.Tween.removeTweens(player); 
        document.getElementById("pPosMenu").innerHTML = stopHere; // so I know what the value is
        console.log("in game menu ON");
        // add the container to let the button quit to main menu
        stage.addChild(inGameOptions);
        quitGame.on('click', quitToMenu);
        return;
    }
    // unpause
    else if(gameLoop.stage && menuOptions == true){
        stage.removeChild(inGameOptions);
        menuOptions = false;        
        createjs.Tween.get(fadeScene)
            .to({ alpha: 0 }, 250);        
        console.log("in game menu OFF");
        // call this function to recalculate
        resetCalDisTime();
        onlyHitBox.on('click', movePlayer);
        return;    
    }
}

function removeContainer(){   
    stage.addChild(mainMenu);
    startBtn.on('click', aniFadeInOut);
    console.log("removeContainer function present");
}

/* this is called when quitGame is clicked
 * should reset the variables of inGameMenu too
 */ 
function quitToMenu(){
    console.log("quitting to main menu"); 
    resetGLCC();
    menuOptions = false;
    player.x = 20;
    //resetCalDisTime();
    stage.removeChild(inGameOptions);
    stage.removeChild(gameLoop);
    createjs.Tween.get(fadeScene)
        .to({ alpha: 1 }, 1200)
        .wait(2000)
        .to({ alpha: 0 }, 1200)
        .call(removeContainer)
        .call(turnOnMainMenu);     
    console.log("should see main menu");
}

 

[Henity]

@mcolman based of your statement, is there a "clear all" function built-in javascript? Or something of the sort?

[mcolman]

@Henity I can see that every time you open the in game menu a new event listener is added to the quitGame button.

`quitGame.on('click', quitToMenu);`

Your code doesn't show where you add `quitGame`, but this is basically the problem.

A quick fix would be to check if the event listener exists already before you add it. Or better yet, add the event listener at the same time you create `quitGame` if possible.

[Henity]

thanks for reply. I created the 'quitGame' shape then add it to the container which is added to the stage in 'inGameMenu' (its stage.addChild(inGameOptions)). My 'quitGame' is created outside of a function...its just part of the overall code.

var quitGame = new createjs.Shape();
quitGame.graphics.beginStroke("#000").beginFill("#9932CC").drawRect(0, 0, 100, 50);
quitGame.x = width/2 - 50;
quitGame.y = height/2 - 25;

inGameOptions.addChild(quitGame);

 But this is making me rethink how I create functions and organise my code. I'll tweak the 'inGameMenu' function but I know that will lead to back tracking and tweaking my other functions.

Thank you.

Update 1: for debugging, I found that createjs has a 'hasEventListener' function which comes in handy right now.

Update 2: @mcolman Thank you. I finally solved it. I didn't turn off the event listener. All is well now and the off short hand for createjs seems to not do as expected so I used removeAllEventListeners.

Edited May 23, 2017 by Henity
problem solved