HTML and CSS Reference
In-Depth Information
if (this.count<= 0) {
this.count = 0;
clearInterval(this.interval);
game.flow.gameOver();
}
// update the view
var progress = this.count / this.countFrom * 100;
this.progressView.style.width = progress + "%";
}
}
})();
5. Now, it is ime for styling. Let's append the following CSS rules to the game.css file:
#timer {
position: absolute;
top: 0;
left: 0;
height: 30px;
width: 100%;
background: #7ADAF6 url(images/timer_symbol.png) no- repeat 5px
50%;
border-bottom: 1px solid #4F8EA1;
transition: all .3s ease-out;
}
Objective complete - mini debriefing
A simple way to count down is to use the setInterval or setTimeout methods. However,
for games, we usually want a global imer to act as the world clock. This way, all the elements
will listen for the ick of the imer. When the world clock pauses, all game elements stop, when
it resumes, all resume. That's why we have a separate imer object.
The imer has its own interval managed. All we need to do is start and stop the imer and it
will run the setInterval and clearInterval methods for us.
By default, the ick funcion checks whether the ime is up and also updates the visual imer
DOM node with a width that reflects the countdown.
 
Search WWH ::




Custom Search