如何将倒数计时器添加到我的页面

Question

我目前正在使用 jquery 和 javascript 开发西蒙说类型游戏。

我已经在 github 上链接了游戏的完整副本

Github 下载并解压以完整查看游戏 https://github.com/Jamiex304/Simon_Says_Game_Demo（现已禁用）

我遇到了一个问题，我想添加一个玩家可以看到的计时器？

目前关卡会一直持续到用户点击序列中的错误按钮。

游戏的一些基本信息 用户将看到一个随机序列每个级别添加一个新序列和一个额外的移动 每次用户输入正确的序列时，他们都会进入下一个级别 所有信息都可以在附带的带有 cmets 的 JavaScript 中找到

我想补充什么

我只想添加一个计时器，当用户单击开始按钮时，它会在 10 秒后开始 每次输入正确的序列时，计时器都会重新启动 当他们到达 5 个正确的序列时，计时器会增加 5 秒，所以

我已经附上了处理游戏事件的 JavaScript 并且有一个完整网站的链接

任何帮助都会很棒

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


    });


});

Answer 1

好的，我想我已经按照你想要的方式做到了，这里是完整的 js：

（我已经评论了我添加的部分）

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

        //initialize timer to 10 seconds
        this.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 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;

            // Stop counting when sequence is correct to avoid time running out before starting next level
            clearInterval(this.timerInterval);

            //Add 5 seconds each 5th level
            this.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 9
        if(this.timer < 0.1){
            this.incorrectSequence();
        }
    },

    displaySequence: function(){                    //display the generated sequence to the user

        var 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 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

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


    });


});

您可以在这里查看：JSFiddle（小提琴中的声音已禁用）

Answer 2

除了计时器之外，您并没有真正具体说明您想要什么，但是根据您的标记，您正在寻找类似这样的东西吗？

Here is your updated fiddle

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();
    return false;
});

function getDuration()
{
    $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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div align='center'>
<div class="TimerTitle"></div>
<div class="Timer"></div>
<br />
<button class="start">start</button>
<div id='gameCount'>Current game count: 0</div>
</div>

Answer 3

有点不合常规（不是倒数，而是倒数），但这是怎么回事：

http://jsfiddle.net/rudiedirkx/nrp3e269/

魔法是tick()，触发 60/s：

var tickStart = 0;
function tick() {
    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');
    }
}

开始按钮开始计数：

tickStart = Date.now();
tick();

移动按钮为计数增加时间：

if ( ++moves % 5 == 0 ) {
    startTimeLeft += 5;
}
else {
    startTimeLeft += 1;
}

这只是一个概念证明。你将不得不做大部分。首先是让它成为一个不错的 CountDown 对象，其中包含方法和本地属性，而不是全局属性。

CountDown.startTimeLeft
CountDown.tickStart
CountDown.tick()
CountDown.start()
CountDown.finish()
CountDown.addTime()

将您的应用逻辑与股票代码分开。

Answer 4

这样的方法可能有用吗？

var n = 100;
setTimeout(countDown,1000);

function countDown(){
   n--;
   if(n > 0){
      setTimeout(countDown,1000);
   }
   $(".timer").html(n);
}

http://jsfiddle.net/gfdq8krd/

Answer 5

如果我理解你只是想倒计时？从10秒等等？ 我认为这个脚本会帮助你

<script>

<!-- 
//change below target URL to your own OTHERWISE DELETE
// this link will redirect you to the main page or the page you want
var targetURL="example.com" 
//change the second to start counting down from 
var countdownfrom=10

var currentsecond=document.redirect.redirect2.value=countdownfrom+1 
function countredirect(){ 
if (currentsecond!=1){ 
currentsecond-=1 
document.redirect.redirect2.value=currentsecond 
} 
else{ 
window.location=targetURL 
return 
} 
setTimeout("countredirect()",1000) 
}

countredirect() 
//--> 
</script>