Welcome screen

[jugglinmike]

Right now, the game starts immediately after you visit the page. We want to
display a title screen and let the user decide when the game should begin by
clicking a "Start" button.

You might have noticed that by now, the Director constructor has a lot of code
in it! As we implement this new feature, you'll see that the code in the
constructor shrinks as well. This is normal; usually, constructors have just
the "set up" code for a class. It's only because we started this project from
scratch that things kind of got out-of-hand.

The moment you create an instance of the Director class, it (1) sets up all the
variables it needs (the different counts, the DOM element, and the Mole
instances), and (2) begins the game (appending all the Mole elements to the
container, scheduling all the moles to show, and setting a countdown for the
end game).

The first set of operations can stay put--all that stuff kind of defines the
Director--it wouldn't be useful without it. The second set, though--that's
actually code that concerns starting the game. We should delay that until the
player is ready to start.

• director.js

  • Define a start method on the Director prototype. Move all the logic
    that has to do with starting the game from the Director constructor into
    this function.

  • In the Director's constructor, set the innerHTML of the el to a
    title screen. This can be as simple (and ugly) or complex (and beautful) as
    you like. Just make sure it has a <button> somewhere.

  • After setting the innerHTML, grab the <button> element using:

    this.el.getElementsByTagName('button')[0]

    ...and then call addEventListener on that.
    We want to attach a click handler function that simply calls the new
    start method.