Keeping Score pt. 2

[jugglinmike]

It's a little easy to "fudge" the game by clicking all over the place
indiscriminately. Lets keep track of "misses" so we can penalize the player
when they miss.

• director.js

  • Define a missCount instance variable on the Director in the
    constructor (initialize it to 0).

  • Attach a "click" handler to the director's el in the constructor.

  • Increment the director's missCount variable in the "click" handler.
    Careful! Due to "event bubbling", this handler will be called even when
    the player successfully whacs a mole. This makes sense, if you think about
    it: when you click on a mole element, you are also clicking on the
    director's "container" element. The event handler receives a special "event
    object" as its first argument, and that object has a target property
    which is the element that originally received the click. So:

    this.el.addEventListener(function(event) {
      // Here, `event.target` is the element that first got the click
    });
    

    ...knowing that, can you find a way to only increment the missCount if
    the click was really a "miss"?

  • Update the endGame method to remove the new event listener (we don't
    want to keep incrementing the "miss" count if the user clicks on the
    Director element after the game is over).

  • Update the end game "report" to also print the value of the missCount
    variable at the end of the game.

We have a lot of -count variables now! It might be a good idea to keep these
a little more organized. Try changing the constructor to define an instance
variable called counts as an object with three attributes (whac, escape,
and miss), all initialized to 0. Update all the places you increment a count
accordingly (i.e. switch this.missCount++ to this.counts.miss++. Finally,
you can remove the existing count variables that you created in the previous
issues.