Javascript 记忆游戏没有'；赢后不要重新开始

我正在尝试重新命名这个由Nate Wiley开发的酷酷记忆游戏

不过我对它有意见。当你赢了，它允许你重新开始，但当牌再次出现时，游戏将无法进行

重新启动按钮代码调用此函数：

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

这将正确隐藏模式，洗牌，运行设置功能，并再次显示游戏

设置功能如下所示：

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

我在控制台中没有收到任何错误。在这种情况下，我如何诊断错误

我已经创建了一个只有2对匹配的代码笔，以使测试更快，但我不知道如何解决这个问题

您只需使用上的事件委派

绑定click事件，如：

$('body').on("click", ".card", this.cardClicked);

而不是：

this.$memoryCards.on("click", this.cardClicked);

因此，当您从
reset（）
函数动态重置卡时，单击事件将持续，并可能处理新的
卡
元素

希望这有帮助。
当控制台中没有错误时，您需要考虑代码的预期功能，然后从那里返回。在你的例子中，当我点击卡片时，我希望游戏能做些什么，但事实并非如此，所以我在点击处理程序中添加了一个
console.log（）
，我注意到控制台中没有记录任何内容，所以我想“可能卡片元素是从头开始重建的，所以它失去了事件侦听器”，所以我试着把这件事委托给身体

$('body').on("click", ".card", this.cardClicked);

我注意到现在点击事件起了作用，所以我知道我正在取得进展。我仍然希望保持单击代码的原样，因此我注意到在
设置
函数中，他没有调用
绑定
函数，该函数将单击事件附加到元素，因此我尝试调用
this.binding（）内的设置功能，并确保它的工作

PS：在我看来，在setup（）函数中调用buinding（）函数是有意义的，因为我可能希望每次设置游戏时，我的点击事件都附加到按钮上，但我保持原样，让代码尽可能与原始代码相似


//记忆游戏
//©2014奈特·威利
//许可证——麻省理工学院
//全屏最佳，可在手机/平板电脑上使用（游戏最低高度为500px..）尽情享受；）
//在代码笔上跟我来
（功能（）{
变量内存={
初始化：函数（卡）{
这个.$game=$（“.game”）；
此.$modal=$（“.modal”）；
此.$overlay=$（“.modal overlay”）；
此.restartButton=$（“button.restart”）；
this.cardsArray=$.merge（卡片，卡片）；
this.shuffleCards（this.cardsArray）；
这个.setup（）；
这是binding（）；
},
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）；
$（“button.restart”）.unbind（）。单击（$.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算法--https://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
},
];
内存初始化（卡）；
})();
*{
框大小：边框框；
}
html，正文{
身高：100%；
}
身体{
背景：黑色；
最小高度：100%；
字体系列：“Arial”，无衬线；
}
.包裹{
位置：相对位置；
身高：100%；
最小高度：500px；
垫底：20px；
}
.游戏{
变换样式：保留-3d；
透视图：500px；
最小高度：100%；
身高：100%；
}
@关键帧匹配动画{
0% {
背景：#bcffcc；
}
100% {
背景：白色；
}
}
.卡片{
浮动：左；
宽度：16.66666%；
身高：25%；
填充物：5px；
文本对齐：居中；
显示：块；
透视图：500px；
位置：相对位置；
光标：指针；
z指数：50；
-webkit点击高亮显示颜色：rgba（0,0,0,0）；
}
@麦迪