Jamie_5 0 Newbie Poster

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();


    });


});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.