Question

I have a canvas game which calls a function incScore every time an action is performed in the game to increase the score.

Inside incScore I have a few if statements to draw a particular image to represent a level number on the canvas.

I also want to have a sound play once per level up. The way I’ve gone about things the lvlup sound will play every time the score matches the if statement.

Can anyone please help me get this so that the sound will only play once when the level changes and not again until the next level change? I’m also mention I’m using jQuery incase it has anything that could help me.

incScore(); //everytime an action in the game causes the score to increase

function incScore(){


    if (scoreTotal < 500){
        lvlimg = "L01";
        drawLevel(lvlimg);
        lvlupSound();
    }

    else if (scoreTotal > 500  && scoreTotal < 1000){
        lvlimg = "L02";
        drawLevel(lvlimg);
        lvlupSound();
    }

    else{
        lvlimg = "L03";
        drawLevel(lvlimg);
        lvlupSound();
    }
}

Answer 1

You could shorten your function and use a semi static property to save the state. Using that, you can compare the current level to the previous and play a sound if they differ.

function incScore(){
        incScore.level = incScore.level || 'L0'; //< initialize property
        lvlimg = "L0" + scoreTotal < 500 ? 1 : scoreTotal < 1000 ? 2 : 3; 
        drawLevel(lvlimg);
        if (incScore.level!=='L0' && 
            incScore.level !== lvlimg) { lvlupSound(); };
        //  ^compare local level to current
        incScore.level = lvlimg;
        //             ^ update local level
}

[edit, based on comment] The third line is a so called ternary, or conditional operator. See MDN. You can use more conditions.

To avoid playing a sound before the score has reached a first level, you could use
if (incScore.level!=='L0' && incScore.level !== lvlimg).

I’ve created a mockup jsFiddle