Javascript 在我的记忆游戏脚本中添加时间计数器

我想找出在我的记忆游戏中添加时间计数器的最佳方法。游戏由许多方块组成，如果用户已经算出并赢得了游戏，会弹出一个模式，告诉用户他们赢了，并提供重置游戏重新开始

我想添加用户玩游戏的时间。因为他们已经打开了页面，它应该从0到x秒计算时间，稍后当用户完成游戏时，它会在模式上显示分数，以便用户可以查看他们的分数。但是，如果有人没有在x秒内完成测验，则会运行一个函数，打开modal，但这次echo的那个人已经用光了时间，并提出重新开始

我在codepen上使用这个游戏的一个小翻拍

HTML:

和js：

(function(){

var Memory = {

    init: function(cards){
        this.$game = $(".game");
        this.$modal = $(".modal");
        this.$overlay = $(".modal-overlay");
        this.$restartButton = $("button.restart");
        this.cardsArray = $.merge(cards, cards);
        this.shuffleCards(this.cardsArray);
        this.setup();
    },

    shuffleCards: function(cardsArray){
        this.$cards = $(this.shuffle(this.cardsArray));
    },

    setup: function(){
        this.html = this.buildHTML();
        this.$game.html(this.html);
        this.$memoryCards = $(".card");
        this.binding();
        this.paused = false;
    this.guess = null;
    },

    binding: function(){
        this.$memoryCards.on("click", this.cardClicked);
        this.$restartButton.on("click", $.proxy(this.reset, this));
    },
    // kinda messy but hey
    cardClicked: function(){
        var _ = Memory;
        var $card = $(this);
        if(!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")){
            $card.find(".inside").addClass("picked");
            if(!_.guess){
                _.guess = $(this).attr("data-id");
            } else if(_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")){
                $(".picked").addClass("matched");
                _.guess = null;
            } else {
                _.guess = null;
                _.paused = true;
                setTimeout(function(){
                    $(".picked").removeClass("picked");
                    Memory.paused = false;
                }, 600);
            }
            if($(".matched").length == $(".card").length){
                _.win();
            }
        }
    },

    win: function(){
        this.paused = true;
        setTimeout(function(){
            Memory.showModal();
            Memory.$game.fadeOut();
        }, 1000);
    },

    showModal: function(){
        this.$overlay.show();
        this.$modal.fadeIn("slow");
    },

    hideModal: function(){
        this.$overlay.hide();
        this.$modal.hide();
    },

    reset: function(){
        this.hideModal();
        this.shuffleCards(this.cardsArray);
        this.setup();
        this.$game.show("slow");
    },

    // Fisher--Yates Algorithm -- http://bost.ocks.org/mike/shuffle/
    shuffle: function(array){
        var counter = array.length, temp, index;
    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        index = Math.floor(Math.random() * counter);
        // Decrease counter by 1
        counter--;
        // And swap the last element with it
        temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
        }
        return array;
    },

    buildHTML: function(){
        var frag = '';
        this.$cards.each(function(k, v){
            frag += '<div class="card" data-id="'+ v.id +'"><div class="inside">\
            <div class="front"><img src="'+ v.img +'"\
            alt="'+ v.name +'" /></div>\
            <div class="back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/codepen-logo.png"\
            alt="Codepen" /></div></div>\
            </div>';
        });
        return frag;
    }
};

var cards = [
    {
        name: "php",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/php-logo_1.png",
        id: 1,
    },
    {
        name: "css3",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/css3-logo.png",
        id: 2
    },
    {
        name: "html5",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/html5-logo.png",
        id: 3
    },
    {
        name: "jquery",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/jquery-logo.png",
        id: 4
    }, 
    {
        name: "javascript",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/js-logo.png",
        id: 5
    },
    {
        name: "node",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/nodejs-logo.png",
        id: 6
    },
    {
        name: "photoshop",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/photoshop-logo.png",
        id: 7
    },
    {
        name: "python",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/python-logo.png",
        id: 8
    },
    {
        name: "rails",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/rails-logo.png",
        id: 9
    },
    {
        name: "sass",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sass-logo.png",
        id: 10
    },
    {
        name: "sublime",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sublime-logo.png",
        id: 11
    },
    {
        name: "wordpress",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/wordpress-logo.png",
        id: 12
    },
];

Memory.init(cards);
})();

（函数（）{
变量内存={
初始化：函数（卡）{
这个.$game=$（“.game”）；
此.$modal=$（“.modal”）；
此.$overlay=$（“.modal overlay”）；
此.restartButton=$（“button.restart”）；
this.cardsArray=$.merge（卡片，卡片）；
this.shuffleCards（this.cardsArray）；
这个.setup（）；
},
shuffleCards:函数（cardsArray）{
this.$cards=$（this.shuffle（this.cardsArray））；
},
设置：函数（）{
this.html=this.buildHTML（）；
this.$game.html（this.html）；
此.$memoryCards=$（“.card”）；
这是binding（）；
this.pause=false；
this.guess=null；
},
绑定：函数（）{
此.memoryCards.on（“单击”，此.cardClicked）；
此.restartButton.on（“单击“，$.proxy（this.reset，this））；
},
//有点乱但是嘿
cardchicked:function（）{
var=内存；
var$card=$（此）；
如果（！\u.paused&&！$card.find（“.inside”）.hasClass（“匹配”）和（！$card.find（.inside”）.hasClass（“拾取”））{
$card.find（“.inside”）.addClass（“picked”）；
如果（！\猜）{
_.guess=$（this.attr（“数据id”）；
}else if（u.guess==$（this.attr（“数据id”）和&！$（this.hasClass（“拾取”））{
$（“.picked”）.addClass（“匹配”）；
_.guess=null；
}否则{
_.guess=null；
_.暂停=正确；
setTimeout（函数（）{
$（“.picked”）.removeClass（“picked”）；
Memory.paused=false；
}, 600);
}
如果（$（.matched”）.length==$（.card”）.length）{
_.win（）；
}
}
},
win:function（）{
this.paused=true；
setTimeout（函数（）{
Memory.showmodel（）；
内存。$game.fadeOut（）；
}, 1000);
},
showmodel:function（）{
这是。$overlay.show（）；
这是.$modal.fadeIn（“慢”）；
},
hideModal:function（）{
这是。$overlay.hide（）；
这个。$modal.hide（）；
},
重置：函数（）{
this.hideModal（）；
this.shuffleCards（this.cardsArray）；
这个.setup（）；
这个。$game.show（“慢”）；
},
//Fisher--Yates算法--http://bost.ocks.org/mike/shuffle/
洗牌：函数（数组）{
变量计数器=数组长度、温度、索引；
//当数组中有元素时
而（计数器>0）{
//选择一个随机索引
索引=Math.floor（Math.random（）*计数器）；
//将计数器减少1
计数器--；
//并用它交换最后一个元素
温度=阵列[计数器]；
数组[计数器]=数组[索引]；
数组[索引]=温度；
}
返回数组；
},
buildHTML:function（）{
var frag=“”；
这是$cards.每个（函数（k，v）{
frag+='\
\
\
';
});
返回碎片；
}
};
var卡=[
{
名称：“php”，
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/php-logo_1.png",
id:1，
},
{
名称：“css3”，
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/css3-logo.png",
身份证号码：2
},
{
名称：“html5”，
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/html5-logo.png",
身份证号码：3
},
{
名称：“jquery”，
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/jquery-logo.png",
身份证号码：4
}, 
{
名称：“javascript”，
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/js-logo.png",
身份证号码：5
},
{
名称：“节点”，
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/nodejs-logo.png",
身份证号码：6
},
{
名称：“photoshop”，
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/photoshop-logo.png",
身份证号码：7
},
{
名称：“python”，
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/python-logo.png",
身份证号码：8
},
{
名称：“rails”，
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/rails-logo.png",
身份证号码：9
},
{
名称：“sass”，
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sass-logo.png",
身份证号码：10
},
{
名称：“崇高”，
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sublime-logo.png",
身份证号码：11
},
{
名称：“wordpress”，
img:“https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/wordpress-logo.png",
身份证号码：12
},
];
内存初始化（卡）；
})();

您可以通过递归使用

setTimeout

或

setInterval

来实现计时器功能，如下所示：

（函数（）{
var timeContainer=document.getElementById（“计时器值”）；
var startButton=document.getElementById（“开始游戏”）；
var定时器=0；
var maxTime=30；
var超时=null；
函数计数（）{
超时=设置超时（函数（）{
如果（计时器<最大时间）{
定时器++；
timeContainer.innerText=计时器；
计数（）；
}
否则{
@import url(http://weloveiconfonts.com/api/?family=brandico);

/* brandico */
[class*="brandico-"]:before {
  font-family: 'brandico', sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background: black;
    min-height: 100%;
    font-family: "Arial", sans-serif;
}

.wrap {
  position: relative;
  height: 100%;
  min-height: 500px;
  padding-bottom: 20px;
}

.game {
    transform-style: preserve-3d;
    perspective: 500px;
    min-height: 100%;
  height: 100%;
}

@mixin width($max){
    @media (max-width: $max){
        @content;
    }
}

@keyframes matchAnim {
    0% {
        background: #bcffcc;
    }
    100% {
        background: white;
    }
}

.card {
  float: left;
  width: 16.66666%;
  height: 25%;
  padding: 5px;
  text-align: center;
    display: block;
    perspective: 500px;
    position: relative;
    cursor: pointer;
  z-index: 50; 
    -webkit-tap-highlight-color: rgba(0,0,0,0);  
    @include width(800px){
        width: 25%;
        height: 16.666%;
    }
    .inside {
        width: 100%;
        height: 100%;
        display: block;
        transform-style: preserve-3d;
        transition: .4s ease-in-out;
        background: white;

        &.picked, &.matched {
            transform: rotateY(180deg);
        }
        &.matched {
            animation: 1s matchAnim ease-in-out;
            animation-delay: .4s;
        }
    }

  .front, .back {
    border: 1px solid black;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;

    img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
        max-height: 100%;
    }
  }
  .front {
    transform: rotateY(-180deg);
    @include width(800px){
        padding: 5px;
    }
  }
  .back{
        @include width(800px){
        padding: 10px;
    }
  }
}

.modal-overlay {
    display: none;
    background: rgba(0,0,0,.8);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal {
    display: none;
    position: relative;
    width: 500px;
    height: 400px;
    max-height: 90%;
    max-width: 90%;
    min-height: 380px;
    margin: 0 auto;
    background: white;
    top: 50%;
    transform: translateY(-50%);
    padding: 30px 10px;
    .winner {
        font-size: 80px;
        text-align: center;
        font-family: "Anton", sans-serif;
        color: #4d4d4d;
        text-shadow: 0px 3px 0 black;
        @include width(480px){
            font-size: 60px;
        }
    }
    .restart {
        font-family: "Anton", sans-serif;
        margin: 30px auto;
        padding: 20px 30px;
        display: block;
        font-size: 30px;
        border: none;
        background: #4d4d4d;
        background: linear-gradient(#4d4d4d, #222);
        border: 1px solid #222;
        border-radius: 5px;
        color: white;
        text-shadow: 0px 1px 0 black;
        cursor: pointer;
        &:hover {
            background: linear-gradient(#222, black);
        }
    }
    .message {
        text-align: center;
        a {
            text-decoration: none;
            color: #28afe6;
            font-weight: bold;
            &:hover {
                $c: lighten(#28afe6, 10%);
                color: $c;
                border-bottom: 1px dotted $c;
            }
        }
    }
    .share-text {
        text-align: center;
        margin: 10px auto;
    }
    .social {
        margin: 20px auto;
        text-align: center;
        li {
            display: inline-block;
            height: 50px;
            width: 50px;
            margin-right: 10px;
            &:last-child {
                margin-right: 0;
            }
            a {
                display: block;
                line-height: 50px;
                font-size: 20px;
                color: white;
                text-decoration: none;
                border-radius: 5px;
                &.facebook {
                    background: #3b5998;
                    &:hover {
                        background: lighten(#3b5998, 10%);
                    }
                }
                &.google {
                    background: #D34836;
                    &:hover {
                        background: lighten(#D34836, 10%);
                    }
                }
                &.twitter {
                    background: #4099FF;
                    &:hover {
                        background: lighten(#4099FF, 10%);
                    }
                }
            }
        }
    }
}

footer {
    height: 20px;
    position: absolute;
    bottom: 0;
    width: 100%;
  z-index: 0;
    .disclaimer {
        line-height: 20px;
        font-size: 12px;
        color: #727272;
        text-align: center;
        @include width(767px){
            font-size: 8px;
        }
    }
}

(function(){

var Memory = {

    init: function(cards){
        this.$game = $(".game");
        this.$modal = $(".modal");
        this.$overlay = $(".modal-overlay");
        this.$restartButton = $("button.restart");
        this.cardsArray = $.merge(cards, cards);
        this.shuffleCards(this.cardsArray);
        this.setup();
    },

    shuffleCards: function(cardsArray){
        this.$cards = $(this.shuffle(this.cardsArray));
    },

    setup: function(){
        this.html = this.buildHTML();
        this.$game.html(this.html);
        this.$memoryCards = $(".card");
        this.binding();
        this.paused = false;
    this.guess = null;
    },

    binding: function(){
        this.$memoryCards.on("click", this.cardClicked);
        this.$restartButton.on("click", $.proxy(this.reset, this));
    },
    // kinda messy but hey
    cardClicked: function(){
        var _ = Memory;
        var $card = $(this);
        if(!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside").hasClass("picked")){
            $card.find(".inside").addClass("picked");
            if(!_.guess){
                _.guess = $(this).attr("data-id");
            } else if(_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")){
                $(".picked").addClass("matched");
                _.guess = null;
            } else {
                _.guess = null;
                _.paused = true;
                setTimeout(function(){
                    $(".picked").removeClass("picked");
                    Memory.paused = false;
                }, 600);
            }
            if($(".matched").length == $(".card").length){
                _.win();
            }
        }
    },

    win: function(){
        this.paused = true;
        setTimeout(function(){
            Memory.showModal();
            Memory.$game.fadeOut();
        }, 1000);
    },

    showModal: function(){
        this.$overlay.show();
        this.$modal.fadeIn("slow");
    },

    hideModal: function(){
        this.$overlay.hide();
        this.$modal.hide();
    },

    reset: function(){
        this.hideModal();
        this.shuffleCards(this.cardsArray);
        this.setup();
        this.$game.show("slow");
    },

    // Fisher--Yates Algorithm -- http://bost.ocks.org/mike/shuffle/
    shuffle: function(array){
        var counter = array.length, temp, index;
    // While there are elements in the array
    while (counter > 0) {
        // Pick a random index
        index = Math.floor(Math.random() * counter);
        // Decrease counter by 1
        counter--;
        // And swap the last element with it
        temp = array[counter];
        array[counter] = array[index];
        array[index] = temp;
        }
        return array;
    },

    buildHTML: function(){
        var frag = '';
        this.$cards.each(function(k, v){
            frag += '<div class="card" data-id="'+ v.id +'"><div class="inside">\
            <div class="front"><img src="'+ v.img +'"\
            alt="'+ v.name +'" /></div>\
            <div class="back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/codepen-logo.png"\
            alt="Codepen" /></div></div>\
            </div>';
        });
        return frag;
    }
};

var cards = [
    {
        name: "php",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/php-logo_1.png",
        id: 1,
    },
    {
        name: "css3",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/css3-logo.png",
        id: 2
    },
    {
        name: "html5",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/html5-logo.png",
        id: 3
    },
    {
        name: "jquery",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/jquery-logo.png",
        id: 4
    }, 
    {
        name: "javascript",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/js-logo.png",
        id: 5
    },
    {
        name: "node",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/nodejs-logo.png",
        id: 6
    },
    {
        name: "photoshop",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/photoshop-logo.png",
        id: 7
    },
    {
        name: "python",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/python-logo.png",
        id: 8
    },
    {
        name: "rails",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/rails-logo.png",
        id: 9
    },
    {
        name: "sass",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sass-logo.png",
        id: 10
    },
    {
        name: "sublime",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sublime-logo.png",
        id: 11
    },
    {
        name: "wordpress",
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/wordpress-logo.png",
        id: 12
    },
];

Memory.init(cards);
})();