How Do I Add A Countdown Timer To My Page
I am currently developing a Simon says type game using jquery and javascript. I have linked a fully copy of the game on github Github download and unzip to see the game fully http
Solution 1:
Ok I think i've managed to do it the way you want it, here is full js:
(I've commented the parts i've added)
var game={ //game object
level: 1, //current level
turn: 0, //current turn
difficulty: 1, // user difficulty
score: 0, //current score
active: false, //whether a turn is active or not
handler: false, // whether the click and sound handlers are active
shape: '.shape', // cached string for the pad class
genSequence: [], //array containing the generated/randomized pads
plaSequence: [], //array containing the users pad selectionsinit: function(){ //initialises the gameif(this.handler === false){ //checks to see if handlers are already activethis.initPadHandler(); //if not activate them
}
this.newGame(); //reset the game defaults
},
initPadHandler: function(){
that=this;
$('.pad').on('mouseup',function(){
if(that.active===true){
var pad=parseInt($(this).data('pad'),10);
that.flash($(this),1,300, pad);
that.logPlayerSequence(pad);
}
});
this.handler=true;
},
newGame: function(){ //resets the game and generates a starts a new levelthis.level=1;
this.score=0;
this.newLevel();
this.displayLevel();
this.displayScore();
//initialize timer to 10 secondsthis.timer = 10;
},
newLevel: function(){
this.genSequence.length=0;
this.plaSequence.length=0;
this.pos=0;
this.turn=0;
this.active=true;
this.randomizePad(this.level); //randomize pad with the correct amount of numbers for this levelthis.displaySequence(); //show the user the sequence
},
flash: function(element, times, speed, pad){ //function to make the pads appear to flashvar that = this; //cache thisif(times > 0){ //make sure we are supposed to flash
that.playSound(pad); //play the corresponding pad sound
element.stop().animate({opacity: '1'}, { //animate the element to appear to flash
duration: 50,
complete: function(){
element.stop().animate({opacity: '0.6'}, 200);
}
}); //end animation
}
if (times > 0) { //call the flash function again until done the correct amount of times
setTimeout(function () {
that.flash(element, times, speed, pad);
}, speed);
times -= 1; //times - 1 for each time it's called
}
},
playSound: function(clip){ //plays the sound that corresponds to the pad chosenvar sound= $('.sound'+clip)[0];
console.log(sound);
console.log($('.sound'+clip));
sound.currentTime=0; //resets audio position to the start of the clip
sound.play(); //play the sound
},
randomizePad: function(passes){ //generate random numbers and push them to the generated number array iterations determined by current levelfor(i=0;i<passes;i++){
this.genSequence.push(Math.floor(Math.random() * 4) + 1);
}
},
logPlayerSequence: function(pad){ //log the player selected pad to user array and call the checker functionthis.plaSequence.push(pad);
this.checkSequence(pad);
},
checkSequence: function(pad){ //checker function to test if the pad the user pressed was next in the sequence
that=this;
if(pad !== this.genSequence[this.turn]){ //if not correct this.incorrectSequence();
}else{ //if correctthis.keepScore(); //update the scorethis.turn++; //incrememnt the turn
}
if(this.turn === this.genSequence.length){ //if completed the whole sequencethis.level++; //increment level, display it, disable the pads wait 1 second and then reset the gamethis.displayLevel();
this.active=false;
// Stop counting when sequence is correct to avoid time running out before starting next level
clearInterval(this.timerInterval);
//Add 5 seconds each 5th levelthis.timer = 10 + 5 * Math.floor(this.level / 5);
//Update timerdisplay to show fulltime while displaying next level sequence
$(".Timer p").html(this.timer);
setTimeout(function(){
that.newLevel();
},1000);
}
},
// Countdown and update timer, call incorrectsequence when time's up
countDown: function(){
this.timer -= 0.1;
$(".Timer p").html(this.timer.toFixed(1)); // Display 9.0 instad of 9if(this.timer < 0.1){
this.incorrectSequence();
}
},
displaySequence: function(){ //display the generated sequence to the uservar that=this;
var timerCount = 0;
$.each(this.genSequence, function(index, val) { //iterate over each value in the generated array
timerCount = index;
setTimeout(function(){
that.flash($(that.shape+val),1,300,val);
},500*index*that.difficulty); // multiply timeout by how many items in the array so that they play sequentially and multiply by the difficulty modifier
});
// Wait to start timer until full sequence is displayed
setTimeout(function(){ that.timerInterval = setInterval(function(){that.countDown()}, 100)}, 500*timerCount*that.difficulty);
},
displayLevel: function(){ //just display the current level on screen
$('.level h2').text('Level: '+this.level);
},
displayScore: function(){ //display current score on screen
$('.score h2').text('Score: '+this.score);
},
keepScore: function(){ //keep the scorevar multiplier=0;
switch(this.difficulty) //choose points modifier based on difficulty
{
case '2':
multiplier=1;
break;
case '1':
multiplier=2;
break;
case '0.5':
multiplier = 3;
break;
case '0.25':
multiplier = 4;
break;
}
this.score += (1 * multiplier); //work out the scorethis.displayScore(); //display score on screen
},
incorrectSequence: function(){ //if user makes a mistake//Stop counting down timer and display start message
clearInterval(this.timerInterval);
$(".Timer p").html("Get Ready your time starts when you click start");
var corPad = this.genSequence[this.turn], //cache the pad number that should have been pressed
that = this;
this.active=false;
this.displayLevel();
this.displayScore();
setTimeout(function(){ //flash the pad 4 times that should have been pressed
that.flash($(that.shape+corPad),4,300,corPad);
},500);
$('.start').show(); //enable the start button again and allow difficulty selection again
$('.difficulty').show();
}
};
$(document).ready(function(){ //document ready
$('.start').on('mouseup', function(){ //initialise a game when the start button is clicked
$(this).hide();
game.difficulty = $('input[name=difficulty]:checked').val();
$('.difficulty').hide();
game.init();
});
});
You can check it out here: JSFiddle (sounds disabled in fiddle)
Solution 2:
You don't really say specifically what you want other than a timer, but based off your markup is something like this what you're looking for?
var $timer = $('.Timer'),
$timerTitle = $('.TimerTitle'),
$start = $('.start'),
$increment = $('.increment'),
maxDuration = 10,
defaultDuration = 10,
count = 0,
$gameCount = $('#gameCount');
$timerTitle.text("Get ready! You have " + maxDuration + " seconds!");
$start.on('click', function()
{
getDuration();
returnfalse;
});
functiongetDuration()
{
$start.prop('disabled', true);
setTimeout(function()
{
var duration = $timer.data('duration');
if(duration === undefined || duration < 0)
duration = maxDuration;
$timer.text(duration);
$timer.data('duration', --duration);
if(duration > -1)
{
if(duration < 5)
{
if(duration % 2 == 0)
{
$timer.css({'background-color':'blue', 'color':'white'});
}
else
{
$timer.css({'background-color':'transparent', 'color':'black'});
}
}
getDuration();
}
else
{
count++;
$gameCount.text("Current game count: " + count);
if(count % 5 == 0)
defaultDuration += 5;
maxDuration = defaultDuration;
$timer.css({'background-color':'transparent', 'color':'black'});
$timer.text('');
$timerTitle.text("Get ready! You have " + maxDuration + " seconds!");
$start.prop('disabled', false);
}
}, 1000);
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><divalign='center'><divclass="TimerTitle"></div><divclass="Timer"></div><br /><buttonclass="start">start</button><divid='gameCount'>Current game count: 0</div></div>Solution 3:
It's a little unconventional (it doesn't count down, but up), but how's this:
http://jsfiddle.net/rudiedirkx/nrp3e269/
The magic is tick() which triggers 60/s:
var tickStart = 0;
functiontick() {
var tickSpent = (Date.now() - tickStart) / 1000,
timeLeft = startTimeLeft - tickSpent;
tl.textContent = Math.round(timeLeft * 10) / 10;
if ( timeLeft > 0 ) {
requestAnimationFrame(tick);
}
else {
document.body.classList.add('gameover');
}
}
The start button kicks off the count:
tickStart = Date.now();
tick();
The move button adds time to the count:
if ( ++moves % 5 == 0 ) {
startTimeLeft += 5;
}
else {
startTimeLeft += 1;
}
It's just a proof of concept. You're gonna have to do the bulk. First thing would be to make it a nice CountDown object with methods and local properties instead of globals.
CountDown.startTimeLeft
CountDown.tickStart
CountDown.tick()
CountDown.start()
CountDown.finish()
CountDown.addTime()
To separate your app logic from the ticker.
Solution 4:
Something like this might work?
var n = 100;
setTimeout(countDown,1000);
functioncountDown(){
n--;
if(n > 0){
setTimeout(countDown,1000);
}
$(".timer").html(n);
}
Solution 5:
If i understand you just want to countdown ? from 10 sec and so on ? than this script will help you i think
<script>
<!--
//change below target URL to your own OTHERWISE DELETE// this link will redirect you to the main page or the page you wantvar targetURL="example.com"//change the second to start counting down from var countdownfrom=10var currentsecond=document.redirect.redirect2.value=countdownfrom+1functioncountredirect(){
if (currentsecond!=1){
currentsecond-=1document.redirect.redirect2.value=currentsecond
}
else{
window.location=targetURL
return
}
setTimeout("countredirect()",1000)
}
countredirect()
//--> </script>
Post a Comment for "How Do I Add A Countdown Timer To My Page"