JavaScript Challenge #2 (Whac-A-Moo)
A vanilla JS implementation of the Whac a mole game. http://mootools.net/blog/2012/08/01/javascript-challenge-2/#comment-2776
by hohoya33
HTML
<section>
<ul></ul>
<p>
Score: <span id="score">0</span> points!
</p>
<p>
Level: <span id="level">1</span>
</p>
</section>
CSS
body {
background-color: #f4f5f5;
}
p {
margin-left: 5px;
}
ul {
padding: 0;
margin: 0;
cursor: pointer;
}
section {
background-color: #fff;
width: 390px;
padding: 5px 0;
}
li {
background-color: #ccc;
display: block;
float: left;
height: 50px;
margin: 0 0 5px 5px;
text-decoration: none;
width: 50px;
}
li span {
display: block;
background-color: #4f4f4f;
width: 40px;
height: 40px;
margin: 5px;
border-radius: 20px;
box-shadow: inset 0 3px 4px rgba(0,0,0,.5),
inset 0 0 10px rgba(0,0,0,.5),
0 0 2px 2px rgba(0,0,0,.15),
0 -1px 2px 1px rgba(0,0,0,.25),
0 2px 3px 2px rgba(255,255,255,.5),
0 -2px 10px 1px rgba(255,255,255,.75),
0 2px 10px 3px rgba(0,0,0,.25);
}
li.mole span {
background-color: #009933;
box-shadow: inset 0 0 0 2px rgba(79,79,79,1),
inset 2px 2px 4px 2px rgba(255,255,255,0.3),
inset 0 -2px 2px 2px rgba(0,0,0,.25),
0 0 2px 2px rgba(0,0,0,.15),
0 -1px 2px 1px rgba(0,0,0,.25),
0 2px 3px 2px rgba(255,255,255,.5),
0 -2px 10px 1px rgba(255,255,255,.75),
0 2px 10px 3px rgba(0,0,0,.25);
}
JavaScript
var whacAMole = (function () {
var CONGRATULATIONS = 'Well done you are The Whac a Mole champion!',
HEIGHT = 4,
WIDTH = 7,
LEVELUP = 100,
initialize,
levelHolder,
level,
li,
liElements = [],
prevMole,
prepGame,
prepStage,
renderMole,
renderStage,
setUpEvents,
scoreHolder,
score,
stage,
span,
speed = 1100,
startGame,
timer,
utils = {
id: function (id) {
return document.getElementById(id);
},
getNodeAsInt: function (parent) {
return parent.firstChild.nodeValue - 0;
},
setFirstChildValue: function (parentElem, value) {
parentElem.firstChild.nodeValue = value;
},
setTimer: function (func, ms) {
return setInterval(func, ms);
}
};
initialize = function () {
prepStage();
renderStage();
prepGame();
setUpEvents();
startGame();
};
prepStage = function () {
span = document.createElement('span');
li = document.createElement('li');
stage = document.getElementsByTagName('ul')[0];
};
renderStage = function () {
for (var i = 0; i < (HEIGHT * WIDTH); i++) {
var cloneLi = li.cloneNode(false),
cloneSpan = span.cloneNode(false);
cloneLi.appendChild(cloneSpan);
stage.appendChild(cloneLi);
liElements.push(cloneLi);
}
};
prepGame = function () {
levelHolder = utils.id('level');
level = utils.getNodeAsInt(levelHolder);
scoreHolder = utils.id('score');
score = utils.getNodeAsInt(scoreHolder);
};
setUpEvents = function () {
stage.addEventListener('click', function(e) {
if (e.target && 'span' ===...