Game in Animate CC | Duplicated variables

[GA Shared Account DT]

Hi all,

I'm working on a project in Animate with one numeric variable, a lose condition based on this variable, and a reset button. The project consists of a main timeline with 3 states (Main menu, Game, Game over).

The numeric variable increases by one when a specific button is pressed within the game. When this variable reaches 4, the player is directed to the Game over frame and is presented with a reset button. The reset button takes the player back to the main menu, after which they can play the game again.

The problem is, whenever the player re-enters the game, the previous numeric variable is still stored; When clicking the button that increases the numeric variable, two values are returned: 2 (which is expected) and 5 (lose condition +1). When iterating again, three values are returned, etc.

I have tried creating an if-else statement that should only declare the variable if it does not yet exist, but it always declares a new variable.

My guess is that it is something related to how a project should be set up/where variables should be stored. I followed along with tutorials and tried to follow the same process with this document. I also searched for this issue, but nothing seems to address this issue. The closest case that I found was this, but removing the event listener did not seem to affect the outcome.

Can someone take a stab at this? Main code is below, .fla is here (WeTransfer link, couldn't attach .fla to this post). Any help/pointers in a certain direction is much appreciated!

// Variable definitions

var _this = this;
_this.stop();

	if(typeof thomasResistance === 'undefined'){
	console.log("Creating new variable for resistance");
	var thomasResistance = 1;
	}else{
	console.log("Resetting variable for resistance");
	thomasResistance = 1;
	}

// Function definitions

function messageTest(){
	console.log("Button Pressed");
}


function resistanceLevelIncrease(){
	messageTest();	
	thomasResistance++;
	console.log(thomasResistance);
	_this.ThomasState.gotoAndStop(thomasResistance-1);
	_this.resistanceLevel.text=thomasResistance;
	checkGameOver();
}

function checkGameOver(){
	if(thomasResistance<=3){
		result = "Resistance okay";
	}else{
		result = "Game Over";
		gameOver()
	}
console.log(result)
}

function gameOver(){
	//_this.GiveAntibiotic.removeEventListener('click');
	_this.parent.gotoAndStop(10);
}

// Actions
_this.resistanceLevel.text=thomasResistance;
_this.GiveAntibiotic.addEventListener('click',function(){
	resistanceLevelIncrease();
})

[JoãoCésar · Accepted solution]

Hi.

It's because in the HTML5 Canvas document instances placed on stage in design time are never actually removed from the RAM at run time whenever the current frame changes. They are rather removed from the display list only.

So if you add an event listener to an instance in a frame and then revisit this same frame, another event listener will be added.

There are several ways to prevent this, but the approach I like the most is to check for the existence of a custom property on the current parent (timeline). For example:

if (!this.frame0Started) // frame0Started is just a name for a custom property that I came up with
{
    // do something
    this.frame0Started = true;
}

Please let us know if you still need help with this.

Regards,

JC

[GA Shared Account DT]

I have had some success putting the event listeners into the if-statement. I didn't understand before that event listeners keep existing once added, and that repeating the frame means adding more and more event listeners on top of one another. The if-statement seems like a good solution for many other problems too!

Thanks for the help!

[JoãoCésar]

Excellent!

You're welcome!

[defaultltmhokwlg41a]

I'm running into a very simular problem with event listeners stacking when going back to previous frames. I'm trying to impliment something like this, but I having a rough time understanding what to put into the condidtional to stop it, as nothing is working. this is what I'm trying to have not repeat:

this.Question_Button.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_4.bind(this));

[JoãoCésar]

Hi.

Add a boolean flag to make sure the event listener is being added only once. Like this:

if (!this.frame0Started) // frame0Started is just a name for a custom property that I came up with
{
    this.Question_Button.addEventListener("click", fl_ClickToGoToAndPlayFromFrame_4.bind(this));
    this.frame0Started = true;
}

[defaultltmhokwlg41a]

Oh yeah, Thank you.

I guess I misunderstood your answer and how it worked.

Thanks for your help (please ignore my other reply).

[JoãoCésar]

No problem!

[defaultltmhokwlg41a]

I meant impliment a way to stop it from stacking.