1

我正在制作经典西蒙说的禅宗版本。它适用于第一级，但随后会变得“古怪”（技术术语），例如在删除父级之前添加额外的圆圈或删除自动间距圆圈。我已经玩了好几个小时了，但它不会起作用。它仍然变得陌生，因为您可以将任何数字作为级别，并且它有效，但是之后的每个级别都有问题。有什么修复吗？谢谢！这可能就像我忘记重置变量一样简单。链接：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>
4

1 回答 1

1

您的可能是此时引起的：

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

您的意图是每 1.5 秒执行一次序列的下一部分，但您最终会一个接一个地调用 next() ，然后在 1.5 秒后再调用 next() 。

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

于 2013-06-19T03:01:43.723 回答