MattSurabian/DuckHunt-JS

Adding new duck

kkdeep opened this issue · 4 comments

Hi,
How can I add a new duck in the game?
I tried by creating a third image "thethirdDuck.png" with different colour & added this in style.js as

.duckC{
    background:url(images/thethirdDuck.png) 0px 0px no-repeat;
    width:76px;
    height:73px;    
    position:absolute;
    top:400px;
    left:0;
}

Lateron I added duckC in duckhunt.min.js file as follows

 releaseDucks: function () {
            for (var e = 0; e < this.level.ducks; e++) {
                var t = e % 2 === 0 ? "duckA" : "duckB": "duckC";
                this.duckMax++, this.liveDucks.push((new Duck(this.duckMax.toString(), t, this.level.speed, this.playfield)).fly())
            }
        },

but it doesn't seems to work.

Your approach is pretty close @kkdeep. The first step, as you've already done is adding the new style into style.css.

You've also identified the correct function to wire your new duck in, though I'd caution you to make the change in the initial source's duckhunt.js file and not the Grunt built duckhunt.min.js file.

The issue with your approach is this:

// will NOT work
var duckClass = (i%2 === 0) ? 'duckA' : 'duckB' : 'duckC;

The assignment of the duck class is using a ternary operator. The line is identical to this, which may be more familiar:

var duckClass;
if (i%2 === 0) {
 duckClass=  'duckA';
}else {
 duckClass = 'duckB';
}

This basically asks if the number i is even. Integers are either even or odd so half the time duckA will be used and half the time duckB will be used.

Because your intention is to add a third duck you'll need an approach with a predictable 1/3 chance of occurring, and you'll not be able to use the ternary operator. I'd suggest this approach:

// this part should be OUTSIDE of the for loop
var duckClasses = [ "duckA", "duckB", "duckC" ];

// this part should be INSIDE the for loop
var duckClass = duckClasses[i%3]

Don't forget to run Grunt (more on Grunt here) after modifying duckhunt.js in order to rebuild duckhunt.min.js.

Good luck!

Thanks Matthew for the detailed explanation. I'll try out your approach.

@kkdeep Did this work out for you? If so I'll close this issue, thanks!

Closing due to inactivity.