Animate True/False game, scoring

[sc41097207]

I"m trying to make a simple True/False game in Animate.  I want to keep score, with each correct answer getting one point.  After clicking T/F, the game advances to the next keyframe(question).  At present, the score is doubling/tripling out of control.  High score should only be 10pts, but this is getting over 200....help.

this.stop();

theScore = 0;

this.myscore.text = theScore;

theScore = theScore;

this.myscore.text = theScore;

//button actions

this.truebutton.addEventListener("click", fl_ClickToGoToAndStopAtFrame1.bind(this));

function fl_ClickToGoToAndStopAtFrame1()

{

this.gotoAndStop("q2");

theScore++;

this.myscore.text = theScore;

}

this.falsebutton.addEventListener("click", fl_ClickToGoToAndStopAtFrame2.bind(this));

function fl_ClickToGoToAndStopAtFrame2()

{

this.gotoAndStop("q2");

}

[sc41097207]

HTML5 Canvas is being used.

[sc41097207]

Screenshot of console log, to show doubling/tripling of score and "tries" (questions attempted)

[ClayUUID]

Because you keep adding and adding button event listeners. They're cumulative you know.

[sc41097207]

So what is the solution?  If I remove the event listeners, the entire game breaks down and doesn't work.

[sc41097207]

I've now made individual t/f buttons for each of the 10 questions (truebutton1, truebutton2, etc) and it's working, but  I'm hoping there is a more efficient, streamlined way.

[JoãoCésar · Accepted solution]

Hi.

Maybe your event listeners are being added again and again as already pointed out by ClayUUID. When we use the timeline to distribute our code, we have to be careful when the timeline position goes back to the first frame, because variables get reseted and event listeners are added again.

Anyway, here is my suggestion:

On the first frame:

this.score = 0;
this.stop();
if (!this.loop)
{
    this.loop = true;
    this.trueButton.on("click", onTrue.bind(this));
    this.falseButton.on("click", onFalse.bind(this));
}
this.scoreText.text = "Score: " + this.score.toString();
function onTrue(e)
{
    this.score++;    
    this.scoreText.text = "Score: " + this.score.toString();
    this.gotoAndStop(this.timeline.position + 1);    
}
function onFalse(e)
{
    this.gotoAndStop(this.timeline.position + 1);
}

On the last frame (after question 10):

var that = this;
this.restartButton.addEventListener("click", onRestart);
function onRestart(e)
{
    that.gotoAndStop(0);
}

Here is the FLA so you can check for yourself the setup: score.fla.

I hope it helps.

Regards,

JC