Question

I am creating a game and when the start screen appears, some music starts playing. Now I have also added a checkbox in the start screen. When this checkbox is checked, the music should be heard if unchecked, no music should be played.

I have the following code for this:

// Show the start screen and play some music.
game.start(game.DEMO_MODE);
if (document.getElementById('music').checked){ //check if checkbox is checked
    music.play();
    music.loop(); //Loop the music
}

This code checks on gameload if the checkbox is checked, if so, play the music. This al works great, but ONLY when the game loads. If the checkbox is checked and a person unchecked it when being in the start screen, the music keeps on playing. Unless he reloads the game, then the sound is muted.

Obviously I don’t want this. The sound should be stopped when the checkbox is being unchecked and visa versa.

I think this problem can be solved by using jQuery’s .bind('change',function(){ but I am unsuccessful in doing so. I hope someone here knows what needs to be added…

The code for the checkbox (it also stores it’s checked/unchecked status to a cookie or local storage):

jQuery(function($) {
    // Aa key must is used for the cookie/storage
    var storedData = getStorage('com_test_checkboxes_'); 

    $('div#musiccheck input:checkbox').bind('change',function(){
        // do something here tho mute or unmute the sound??

        // save the data on change
        storedData.set(this.id, $(this).is(':checked')?'checked':'not');
    }).each(function() {
        // on load, set the value to what we read from storage:
        var val = storedData.get(this.id);
        if (val == 'checked') $(this).attr('checked', 'checked');
        if (val == 'not') $(this).removeAttr('checked');
        if (val) $(this).trigger('change');
    }); 
});

How to fix this?

Kind regards,

Maurice

Answer 1

$("#music").on('change', function() {
    if (this.checked) {
        music.play();
        music.loop();
    }else{
        music.stop();
    }
});