Change Background Colour per level (js game)

Question

I'm trying to change the background colour for 3 levels in the classic game Duck Hunt. I got the original source code form git hub ( https://github.com/MattSurabian/DuckHunt-JS ) and now have 3 levels and wish the levels to change background colour to go from day to night however not I'm sure where in the JS scripting to adjust the code so each level has a different background colour?

I have found this that sets the background color for each level:

// ensure background color is set correctly
this.playfield.animate({
    backgroundColor: '#64b0ff'
}, 900);

this.curWave++;
if (this.curWave > this.level.waves) {
    this.hideLevelInfo();
    this.playfield.trigger('game:next_level');
    return;
}

But was wondering how to set it so level one has color #000 level 2 #fff etc

Answer 1

You could wrap it in a case statement, using the level as the expression value.

var level = 0; //place outside the function in the global scope or if you want to namespace it, you can place the variable in a getter/setter and update the level whenever you call the setter.


level++;
switch(level) {
    case 1:
        this.playfield.animate({
            backgroundColor: '#565656'
        },900);
        break;
    case 2:
        this.playfield.animate({
            backgroundColor: '#000'
        },900);
        break;
    case 3:
        this.playfield.animate({
            backgroundColor: '#fff'
        },900);
        break;
    default:
       this.playfield.animate({
        backgroundColor: '#64b0ff'
       },900);
    break;
}

You just have to make sure to call the function each level change and set a counter for the level. When the level increases, increment the counter by 1 and use it as the level value in the statement.