JavaScript Challenge #2 (Whac-A-Moo)
Written By Christopher Pitt, on Wednesday, August 1st 2012, 4:49amHopefully the first challenge got you excited for JavaScript development in a competitive environment…
One of the most common requirements of web applications is to be able to respond to user input, and in particular clicks (or touches). Continuing with our theme of element generation (and in some cases animation); this week’s challenge will be to create a basic whac-a-mole game.
The point of the game will be to click on highlighted elements to increase score. This can be as basic or as intricate as you wish it to be, but it should resemble the following diagram…
The green block represents the block a player must click in order to gain points. This means you will need logic to randomly select one of the possible blocks and highlight it. You also need to register user clicks and update the score “label”.
Hint: at times when you need to add many of the same kind of event to a variable amount of elements (in this case blocks); it is helpful and even efficient to use event delegation. You will need to use the setInterval() function or the setTimeout() function to create a predictable amount of time between each click or highlight.
As before; post your solutions in the form of links to jsfiddle, tinker or jsbin (in the comment section) and we’ll update this post with a link to a review post detailing solutions that we think tackle the problem in ways worthy of mention.
EDIT [2012/08/08]: We are closing comments and reviewing submissions. We will follow this post up with a review of our favourites and what they teach us about the task and JavaScript development in general.
EDIT [2012/08/22]: We have posted the review post to for these submissions.
August 1st, 2012 at 5:21 am
https://tinker.io/0ae5b
note, difficulty increases over time based on your current score.
have phun.
August 1st, 2012 at 5:25 am
okok, arian / chiel exploited the thing in two secs, second iteration:
https://tinker.io/0ae5b/1
note, difficulty increases over time based on your current score.
have phun.
August 1st, 2012 at 6:06 am
Here’s mine: http://jsfiddle.net/sixtyseconds/6ba3L/
August 1st, 2012 at 6:09 am
bah, new release up..
figured the game was still too easy to play, so i added a time limit to the game and play/stop button + some cosmetics
https://tinker.io/0ae5b/6
have phun.
August 1st, 2012 at 7:16 am
Can you beat https://tinker.io/66bb4/4 and win one of the grand prizes?
August 1st, 2012 at 9:07 am
This was fun!
http://jsfiddle.net/YYyRD/
August 1st, 2012 at 1:03 pm
I think this is the only solution with tables so far: http://jsfiddle.net/hgPZM/
August 1st, 2012 at 1:32 pm
Here is my: https://tinker.io/f5794
August 1st, 2012 at 2:34 pm
I ported my solution to Dart for fun: https://gist.github.com/3229945
Here it is converted to js: https://tinker.io/58980
August 1st, 2012 at 2:37 pm
Does tinker.io have a js size limit? Apparently some of the JS is getting cut off. This is the converted JS: https://gist.github.com/3229987
August 1st, 2012 at 4:13 pm
Went for “short” this time. 17 lines of code. Not sure I could make it much shorter:
http://jsfiddle.net/tqvMc/
Again, I am probably losing points for using jQuery. But I haven’t had the pleasure of becoming a MooTools pro yet.
August 2nd, 2012 at 4:23 am
This is my implementation in plain javascript:
http://jsfiddle.net/Alkadia/QTnQa/
Note: inside the class, the blocks generator is inherited by the previous challenge.
August 2nd, 2012 at 7:12 am
@Kevin, tinker uses the field type of TEXT in the mysql db, to store the javascript. That apparently has a limit of 65,535 bytes. Nobody else has ever complained about it, but I’ll look into it.
Tinker will probably switch to some kind of NoSQL system soon, which works entirely different.
August 2nd, 2012 at 11:23 am
Here’s my contribution in vanilla JS.
http://jsfiddle.net/chidge/yKHtY/17/
August 2nd, 2012 at 12:35 pm
This is the variant I originally wanted to do: https://tinker.io/c341c/8 Now you can hit the MooTools devs! Bonus points if you can add sounds :)
August 2nd, 2012 at 3:38 pm
(Working link for my fiddle!)
Here’s my contribution in vanilla JS:
http://jsfiddle.net/chidge/ufrh6/
August 2nd, 2012 at 3:49 pm
lmao @cpojer. brilliant!
August 3rd, 2012 at 3:37 pm
Ok guys, I didn’t have too much time this time, so I started from cpojer latest entry: https://tinker.io/c341c/8, I added some sound effects, then I added a background music, then arian fixed a little bug, then I though, why not adding the possibility to switch who to hit? so I implemented a quick and dirty (and rather ugly) twitter lists loader then dimitar (coda) though it was a good idea to show a preview of who you are gonna to hit with the hammer and improved the style a bit. I lastly added a negative score if you miss (but not if you are in the middle of two holes). and a time attack mode. I think what it miss now is a centralized leaderboard. But for this challenge it should be ok :)
So, to recap, this is a collective work of cpojer, kentaromiura, arian, coda :
http://jsfiddle.net/kentaromiura/rUqJ7/21/
Enjoy ;)
August 7th, 2012 at 2:33 am
Hi.
Here is my solution ( no images, little CSS and vanilla JavaScript ;) ): http://jsfiddle.net/Dimcho/JmVbD/
BR