Javascript 重置变量不是重置游戏？

我正在创建一个Simon游戏，它在第一轮有效，但一旦你的每一轮第二，它立即说不正确

我重置了两轮之间的所有变量，但它似乎仍在保存它们，因为它会立即显示“游戏结束！”

JS:

以下是playSimon（）函数：

function playSimon() {
    setTimeout(function () {
        color = Math.floor(Math.random() * 4);
        if (color == 0) {
            correctAnswer.push(0);
            $('#redButton').addClass('lightOn');
            setTimeout(function () {
                $('#redButton').removeClass('lightOn');
            }, 500);
        }
        else if (color == 1) {
            correctAnswer.push(1);
            $('#blueButton').addClass('lightOn');
            setTimeout(function () {
                $('#blueButton').removeClass('lightOn');
            }, 500);
        }
        else if (color == 2) {
            correctAnswer.push(2);
            $('#greenButton').addClass('lightOn');
            setTimeout(function () {
                $('#greenButton').removeClass('lightOn');
            }, 500);
        }
        else if (color == 3) {
            correctAnswer.push(3);
            $('#yellowButton').addClass('lightOn');
            setTimeout(function () {
                $('#yellowButton').removeClass('lightOn');
            }, 500);
            }
        i++;
        if (i <= round) {
            playSimon();
        }
        else {
            makeGuess();
        }
    }, 700);
}

函数playSimon（）{
setTimeout（函数（）{
颜色=Math.floor（Math.random（）*4）；
如果（颜色==0）{
回答正确。按（0）；
$（'#redButton'）.addClass（'lightOn'）；
setTimeout（函数（）{
$（“#红色按钮”）.removeClass（'lightOn'）；
}, 500);
}
else if（颜色==1）{
回答正确。按（1）；
$（“#蓝按钮”）.addClass（'lightOn'）；
setTimeout（函数（）{
$（“#蓝按钮”）.removeClass（'lightOn'）；
}, 500);
}
else if（颜色==2）{
回答正确。推（2）；
$（“#绿色按钮”）.addClass（'lightOn'）；
setTimeout（函数（）{
$（“#绿色按钮”）.removeClass（'lightOn'）；
}, 500);
}
否则如果（颜色==3）{
回答正确。推（3）；
$（'yellowButton'）.addClass（'lightOn'）；
setTimeout（函数（）{
$（“#黄色按钮”）.removeClass（'lightOn'）；
}, 500);
}
i++；
如果（i是因为您多次绑定单击事件：

function makeGuess() {
    $('#redButton').click(function() {
        yourAnswer.push(0);
    });
    $('#blueButton').click(function() {
        yourAnswer.push(1);
    });
    $('#greenButton').click(function() {
        yourAnswer.push(2);
    });
    $('#yellowButton').click(function() {
        yourAnswer.push(3);
    });

    ...
}

每次调用makeGuess（）时，按钮都会绑定到另一个click事件侦听器，只有一个事件侦听器，因此它可以正常工作，但从第二级开始，每个按钮都绑定了两个相同的click listener，当玩家单击按钮时，函数被调用两次=>您的答案立即被按下两次，这将导致错误答案=>游戏结束

一个快速修复方法是在再次绑定4个按钮之前，在调用下一个playSimon（）之前，单击所有按钮上的所有事件

if (yourString === correctString) {
            alert('Correct');
            round++;
            yourAnswer = [];
            correctAnswer = [];
            yourString = "";
            correctString = "";

            $('#redButton').unbind( "click" );
            $('#blueButton').unbind( "click" );
            $('#greenButton').unbind( "click" );
            $('#yellowButton').unbind( "click" );
            playSimon();
        } else {
            alert("Game Over!");
        }

jsiddle:
AVAVT是正确的，但是，它不是解除绑定，而是一次关闭就绑定事件

我已经更新了您的JSFIDLE并稍微优化了您的代码


if (yourString === correctString) {
            alert('Correct');
            round++;
            yourAnswer = [];
            correctAnswer = [];
            yourString = "";
            correctString = "";

            $('#redButton').unbind( "click" );
            $('#blueButton').unbind( "click" );
            $('#greenButton').unbind( "click" );
            $('#yellowButton').unbind( "click" );
            playSimon();
        } else {
            alert("Game Over!");
        }

// Run this when the page has loaded to ensure HTML is there.
$(function(){
    $('#redButton').click(function() {
        yourAnswer.push(0);
      });
      $('#blueButton').click(function() {
        yourAnswer.push(1);
      });
      $('#greenButton').click(function() {
        yourAnswer.push(2);
      });
      $('#yellowButton').click(function() {
        yourAnswer.push(3);
      });
});