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 https://github.com/Jamiex304/Simon_Says_Game_Demo
And I have reached a problem I want to add a timer that the player can see ?
currently the level will just go on til the user clicks the wrong button in the sequence.
Some Basic info on the game the user will see a random sequence each level a new sequence is added with one more extra move Each time the user enters the right sequence they go to the next level all info can be found in the attached JavaScript with comments
WHAT I WANT HELP ADDING
I just want to add a timer that starts at 10 seconds when the user clicks the start button Each time the enter the right sequence the timer starts again when they reach 5 right sequences the timer adds 5 extra seconds and so
I already have a div made for it called Timer so the user can see it in the middle of the screen
I have attached the html code and the JavaScript that handles the game events
html
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="lib/jquery-1.10.2.js"></script>
<script src="js/script.js" type="text/javascript"></script>
<title>E-Lemon-Ators Demo</title>
</head>
<body>
<div class="wrapper">
<center><h3>Demo Bomb Expert Brain Game</h3></center>
</div>
<div class="wrapper2">
<div class="pad shape1" data-pad="1">
<audio preload="auto" class="sound1">
<source src="sounds/mp3/sounds_01.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_01.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape2" data-pad="2">
<audio preload="auto" class="sound2">
<source src="sounds/mp3/sounds_02.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_02.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="Timer">
<br />
<br />
<p>Get Ready your time starts when you click start</P>
</div>
<div class="pad shape3" data-pad="3">
<audio preload="auto" class="sound3">
<source src="sounds/mp3/sounds_03.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_03.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape4" data-pad="4">
<audio preload="auto" class="sound4">
<source src="sounds/mp3/sounds_04.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_04.ogg" type="audio/ogg"/>
</audio>
</div>
</div>
<div class="wrapper3">
<div class="level">
<h2>Level: 1</h2>
</div>
<div class="score">
<h2>Score: 0</h2>
</div>
<ul class="difficulty">
<li>
<input type="radio" class="difOpt" name="difficulty" value="2">Easy
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="1" checked>Normal
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="0.5">Hard
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="0.25">Insane
</li>
</ul>
<div class="sButton">
<button class="start">start</button>
</div>
</div>
</div>
</body>
</html>
Javascript
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 selections
init: function(){ //initialises the game
if(this.handler === false){ //checks to see if handlers are already active
this.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 level
this.level=1;
this.score=0;
this.newLevel();
this.displayLevel();
this.displayScore();
},
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 level
this.displaySequence(); //show the user the sequence
},
flash: function(element, times, speed, pad){ //function to make the pads appear to flash
var that = this; //cache this
if(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 chosen
var 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 level
for(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 function
this.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 correct
this.keepScore(); //update the score
this.turn++; //incrememnt the turn
}
if(this.turn === this.genSequence.length){ //if completed the whole sequence
this.level++; //increment level, display it, disable the pads wait 1 second and then reset the game
this.displayLevel();
this.active=false;
setTimeout(function(){
that.newLevel();
},1000);
}
},
displaySequence: function(){ //display the generated sequence to the user
var that=this;
$.each(this.genSequence, function(index, val) { //iterate over each value in the generated array
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
});
},
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 score
var 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 score
this.displayScore(); //display score on screen
},
incorrectSequence: function(){ //if user makes a mistake
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();
});
});