Originally, this was a task given to me as part of the interview process at Etsy. In addition to demonstrating a working knowledge of coding for browsers, OO JavaScript, Event Delegation, and closures I challenged myself in the following ways:
I wanted to experiment with components of literary writing such as pacing, story-telling and sentence structure. I've read that people who study English Literature seriously then go on to be programmers often write code that is fantastically readable.
With that in mind I tried to produce code with a literary mindset. Not just in the way the code is written, but by adding elements of English poetry and prose to the comments.
I value having a more complete understanding of whats going on under-the-hood in any context, but particularly in programming. This was in no small part becuase I knew (and agree with) Etsy's philosophy about choosing technologies, specifically to 'use boring technology'.
I also used this as an opprotunity to use one new-to-me (at the time) feature from CSS 3 (animations) and HTML 5 (data-X properties).
Clone, then simply open whack-a-mole.html in a modern browser. IE8 doesn't count, Lynx is right out. I recommend playing one round before diving into the code. You can also play the game on github pages;