jQuery Game Issue

Question

我正在制作经典西蒙说禅的版本。它可以在第一级工作，但是它会得到所有'不可思议的'（技术术语），例如在删除父级之前添加额外的圆或删除自动间距圆。我一直在玩它几个小时，它将无法正常工作。它仍然变得陌生，因为你可以有任何数量作为关卡，它可以工作，但之后的每一个关卡都有问题。任何修复？谢谢！这可能与我忘记重置变量一样简单。链接：http://codingbean.com/game/drops/

JS：

//INIT GLOBAL VARIABLES 
var level = 2; 
var sequence = []; 
var clickNum = 0; 
var counter = 0; 

//SHOW STARTING SEQUENCE (GIVES THE USER THE PLACEMENT OF COLORS) 
window.onload = function() { 
for (obj = 1; obj <= 4; obj++) { 
    $($('#' + obj)).animate({ 
    height: '10px', 
    width: '10px', 
    'margin-top': '150px', 
    opacity: 0 
    }, 2000); 
} 
setTimeout(function() {showPattern()}, 2100); 
}; 

//THIS COMMAND SHOWS THE PLAYER THE SEQUENCE (RANDOM), WHILE 
//STORING IT INTO AN ARRAY, CALLED 'SEQUENCE' 
function showPattern() { 
counter = 0; 
circle = 0; 
sequence = []; 
function next() { 
    if (counter < level) { 
    counter++; 
    circle = 0; 
    circle = Math.floor(Math.random() * 4) + 1; 
    sequence.push(circle); 
    animate(circle); 
    curCir = $("#" + circle); 
    if (counter == level) { 
    setTimeout(function() {playPattern()}, 2000); 
    } 
    } 
setTimeout(next, 1500); 
} 
next(); 
} 

//ALLOW THE USER TO PICK THE PATTERN 
function playPattern() { 
showAll(); 
for (i = 1; i <= 4; i++) { 
    document.getElementById(i).setAttribute("onClick", "addToPat(" + i + ")"); 
} 
} 

//CHECK USER CHOICE AGAINST SEQUENCE 
function addToPat(circleNum) { 
clickNum++; 
var clickNumSeq = clickNum - 1 
if (circleNum == sequence[clickNumSeq]) { 
    //CORRECT! 
    console.log(clickNum + " clicks. You answered " + circleNum + " for a correct of " + sequence[clickNumSeq]); 
} else { 
    level = 4; 
    clickNum = 0; 
    counter = 0; 
    sequence = []; 
    resetAll(); 
    setTimeout(function() {showPattern()}, 4000); 
} 
if (clickNum == sequence.length) { 
    level++; 
    clickNum = 0; 
    counter = 0; 
    sequence = []; 
    resetAll(); 
    setTimeout(function() {showPattern()}, 4000); 
} 
} 


//HERE ARE ALL THE ANIMATE FUNCTIONS, CALLED VIA TIMEOUTS 
function animate(circle) { 
animatePrep(circle); 
animateShow(circle); 
animateClean(circle); 
} 

function animatePrep(circle) { 
$("#" + circle - 1).animate({ 
    opacity: 0, 
    "margin-top": "50", 
    height: '150px', 
    width: '150px' 
}, 5); 

$("#" + circle + 1).animate({ 
    opacity: 0, 
    "margin-top": "50", 
    height: '150px', 
    width: '150px' 
}, 5); 
} 

function animateShow(circle) { 
$("#" + circle).animate({ 
    opacity: 1, 
    "margin-top": "50", 
    height: '150px', 
    width: '150px' 
}, 800); 
} 

function animateClean(circle) { 
$("#" + circle).animate({ 
    opacity: 0, 
    "margin-top": "150", 
    height: '10px', 
    width: '10px' 
}, 200, function() { 
    $("#" + circle - 1).animate({ 
    opacity: 0, 
    "margin-top": "150", 
    height: '10px', 
    width: '10px' 
}, 1, function() { 
    $("#" + circle + 1).animate({ 
    opacity: 0, 
    "margin-top": "150", 
    height: '10px', 
    width: '10px' 
}, 1); 
}); 
}); 
} 

function showAll() { 
$("#1").animate({ 
    opacity: 1, 
    "margin-top": "50", 
    height: '150px', 
    width: '150px' 
}, 500); 

$("#2").animate({ 
    opacity: 1, 
    "margin-top": "50", 
    height: '150px', 
    width: '150px' 
}, 500); 

$("#3").animate({ 
    opacity: 1, 
    "margin-top": "50", 
    height: '150px', 
    width: '150px' 
}, 500); 

$("#4").animate({ 
    opacity: 1, 
    "margin-top": "50", 
    height: '150px', 
    width: '150px' 
}, 500); 
} 

function resetAll() { 
$("#1").animate({ 
    opacity: 0, 
    "margin-top": "150", 
    height: '10px', 
    width: '10px' 
}, 100); 

$("#2").animate({ 
    opacity: 0, 
    "margin-top": "150", 
    height: '10px', 
    width: '10px' 
}, 100); 

$("#2").animate({ 
opacity: 0, 
    "margin-top": "150", 
    height: '10px', 
    width: '10px' 
}, 100); 

$("#3").animate({ 
    opacity: 0, 
    "margin-top": "150", 
    height: '10px', 
    width: '10px' 
}, 100); 

$("#4").animate({ 
    opacity: 0, 
    "margin-top": "150", 
    height: '10px', 
    width: '10px' 
}, 100); 
} 

HTML：

<html> 
<head> 
    <link href='./style/main.css' rel='stylesheet' type='text/css'> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
    <script src="./script/main.js"></script> 
</head> 
<body align="center"> 
    <div style=""> 
    <div class="circle" id="1" style="background-color: #242424;"></div> 
    <div class="circle" id="2" style="background-color: #4F4F4F;"></div> 
    </div> 
    <div style=""> 
    <div class="circle" id="3" style="background-color: #7D7D7D;"></div> 
    <div class="circle" id="4" style="background-color: #D4D4D4;"></div> 
    </div> 
</body> 
</html> 

Answer 1

你很可能在这一点上引起的：

setTimout(next, 1500); 
} 
next(); 

你的意图是做下一部分每1.5秒一个序列，但是你最终会调用next（），然后调用next（）一堆1.5秒后更多次。

更大的问题是你使用setTimout。动画完成后使用回调会更好。此外，从动画中分离游戏逻辑（在开始动画之前提出序列）。