jQuery Game Issue

Question

I'm making a zen version of the classic Simon Says. It works on the first level, but then it gets all 'wonky' (technical term), such as adding extra circles or removing the auto-spacing circles before the parent is removed. I have been toying with it for hours and it will won't work. It still gets stranger, because you can have any number as the level, and it works, but every level after that has issues. Any fixes? Thanks! It's probably something as simple as me forgetting to reset a variable. Link: 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

Your is likely caused at this point:

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

You're intention is to do the next part of the sequence every 1.5 seconds, but you end up calling next() one right after the other and then calling next() a bunch more times 1.5 seconds after.

A bigger problem is your use of setTimout. It would be better to use callbacks after the animation is complete. Also, seperate game logic from animation (come up with the sequence before you begin the animation).