Changing background each level and game completion screen

[mckenziedave]

Hi Everyone,

I'm in the process of editing this game (just a little home hobbie while I try to learn JS) and have a quick question. At the moment I have 3 levels all with different characters however I want to change the background from sunrise to sunset over these 3 levels, how would I achieve this? I have a solid png image at the moment so if I could load a different png file per level that would be great! but if there is a way to change the background through hex color this way would be fine too.

Also on another note at the end of the 3 levels I want to add a firework animation with the you won screen.... any ideas?

Thank you for your time

[MattSurabian]

In the current master version, the best place to change this would be here.

Add a property to the level data that contains the background color you'd need:

var levels = [
    {
        id: 1,
        title: 'Level 1',
        waves: 3,
        ducks: 2,
        pointsPerDuck: 100,
        speed: 5,
        bullets: 3,
        backgroundColor: '#ff0000',
        time: 13
    },
...

and assign it instead of the hard coded value:

        this.playfield.animate({
            backgroundColor: this.level.backgroundColor
        },900);

However, the current master version has an architectural flaw, as the (duck object is also adjusting this property when the ducks fly away)[https://github.com/MattSurabian/DuckHunt-JS/blob/master/duckhunt/duck.js#L105-L107]; so that would have to be completely removed or changed to some other color to avoid messing up the gradual transition across levels.

The PIXI branch this could be done here and here.

As for the animation, the call to run it can be added somewhere in this method, or here on the PIXI branch.

Good luck!

[mckenziedave]

Thank you so much! The levels are now changing and I have been able to add a firework display via js and css upon completion. Im learning a lot from playing around with this game!

[MattSurabian]

Glad to hear it!