для петли уходит рано

Question

Я работаю над версией пятнадцатой головоломки (http://en.wikipedia.org/wiki/15_puzzle), используя html и javascript (без JQuery). Для разработки основных функций я создал сетку 9 x 9. У меня есть восемь цветных изображений 100 x 100 пикселей (id = box1 через box8) и один 100 x 100 px белый или «пустой» бокс (boxW). Это девять плиток в моей сетке. Я выяснил, как перемещать смежную плиту изображения в пустую плитку и как выделить границу плитки, которая может перемещаться. Теперь я пытаюсь создать функцию, которая будет перемешивать плитки в начале игры. Я выбираю случайный квадрат и вижу, является ли он подвижным, сравнивая его поля с полями пустой плитки. Если это так, я перемещаю его и повторяю. Проблема в том, что мой цикл for-loop, кажется, выходит после нескольких шагов - иногда 1, иногда 20, но не 100 или 500 или 1000, независимо от верхнего предела, установленного для цикла. Я создал функцию администратора, чтобы распечатать, что происходит. Я попытался добавить «продолжить» в разных точках в предположении, что что-то о моих высказываниях «if» выбивает его из цикла, но это, похоже, не помогает. Я уверен, что мне не хватает чего-то очевидного, но я не вижу этого. (Кстати, «tileHold» - это попытка избежать обратного хода последнего хода.) Любая обратная связь будет принята с благодарностью. Благодарю.

Вот моя функция, а также пример выхода администратора:

function shuffle(){ 
    var tileHold=boxW; 
    for(var i=1;i<1000;i++){ 
     var tile = "box"+(Math.round(Math.random() * 8)); 
     if (tile != tileHold){ 
      var toppx = document.getElementById(tile).style.marginTop; 
      var leftpx =document.getElementById(tile).style.marginLeft; 
      var top = toppx.substring(0,3); 
      var left = leftpx.substring(0,3); 
      var topWpx = document.getElementById("boxW").style.marginTop; 
      var leftWpx = document.getElementById("boxW").style.marginLeft; 
      var topW = topWpx.substring(0,3); 
      var leftW = leftWpx.substring(0,3); 
      if (((top===topW) && ((Math.abs(left-leftW))<200)) || ((left===leftW) && ((Math.abs(top-topW))<200))) { 
       document.getElementById(tile).style.marginTop = topWpx; 
       document.getElementById(tile).style.marginLeft = leftWpx; 
       document.getElementById("boxW").style.marginTop = toppx; 
       document.getElementById("boxW").style.marginLeft = leftpx; 
       document.getElementById("guess_2").innerHTML = guess_2.innerHTML+tile+" <br />"; 
      } 
      document.getElementById("guess_2").innerHTML = guess_2.innerHTML+tile+" i="+ i+ " <br />"; 
     } 
     tileHold=tile; 
    } 

} 

А вот пример вывода, в том числе плитки, которая была перемещена (например, box7) и цикл обратной связи. На этот раз перед выходом было одиннадцать циклов. Как вы можете видеть, верхний предел петли 1000.

Admin box7 i=1 
box6 
box6 i=2 
box2 i=4 
box5 
box5 i=5 
box7 i=6 
box6 i=7 
box3 i=8 
box1 i=10 
box6 i=11 

Answer 1

Примите во внимание, что код внутри первого, если будет выполнен 999-п раз (так как вы начинаете в 1), где п количество раз «плитка» становится равной «tileHold», так что если вы хотите, чтобы код внутри, что, если будут выполняться ровно 1000 раз нужно, чтобы изменить код, как это:

. 
. 
. 
for(var i=0;i<1000;i++){  
    while(true){ 
     var tile = "box"+(Math.round(Math.random() * 8)); 
     if(tile!=tileHold) break; 
    } 
    . 
    . 
    . 

также принимать во внимание, что второй, если будет выполнен только тогда, когда:

(((top===topW) && ((Math.abs(left-leftW))<200)) || ((left===leftW) 

становится правда. Итак, если вы хотите, чтобы этот код выполнялся exaclty 1000 раз, вам необходимо изменить свою функцию следующим образом:

for(var i=0;i<1000;i++){ 
    while(true){ 
     var tile = "box"+(Math.round(Math.random() * 8)); 
     if(tile==tileHold) continue; 
     var toppx = document.getElementById(tile).style.marginTop; 
     var leftpx =document.getElementById(tile).style.marginLeft; 
     var top = toppx.substring(0,3); 
     var left = leftpx.substring(0,3); 
     var topWpx = document.getElementById("boxW").style.marginTop; 
     var leftWpx = document.getElementById("boxW").style.marginLeft; 
     var topW = topWpx.substring(0,3); 
     var leftW = leftWpx.substring(0,3); 
     if(((top===topW) && ((Math.abs(left-leftW))<200)) || ((left===leftW) && ((Math.abs(top-topW))<200))) break; 
    } 
    . 
    . 
    .