Javascript for循环提前退出

我正在使用html和javascript（无JQuery）开发十五个拼图（）的一个版本。为了实现基本功能，我设置了一个9 x 9的网格。我有八个100 x 100像素的彩色图像（id=box1到box8）和一个100 x 100像素的白色或“空”框（boxW）。这是我网格中的九块瓷砖。我已经了解了如何将相邻的图像块移动到空块中，以及如何高亮显示可移动块的边框。现在我正在尝试创建一个函数，它将在游戏开始时洗牌。我选择一个随机框，通过比较它的边距和空瓷砖的边距，看看它是否可以移动。如果是，我移动它并重复。问题是我的for循环似乎只在几次移动后就退出了——有时是1次，有时是20次，但永远不会是100次、500次或1000次，不管我为循环设置的上限是多少。我已经设置了一个管理功能来打印正在发生的事情。我曾尝试在不同的地方添加“continue”，假设我的“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;
    }

}

---

考虑到第一个if中的代码将执行999-n次（因为您从1开始），其中n是“tile”变为“tileHold”的次数，因此如果您希望if中的代码正好执行1000次，则需要如下修改代码：

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

。
.
.
对于（var i=0；i您是否遇到任何错误？这可能是它退出的原因。您可以制作一个JSFIDLE演示吗？只需在调试器下运行它。您的代码中可能会出现很多错误。具体来说，您所做的子字符串调用可能是在少于3个字符的字符串上进行的。此外，您不应该从每个字符串中减去两个字符串，请参阅
Math.abs（左w）
例如，您正在将两个字符串的减法结果传递给absolute函数。您需要先将值转换为数字，然后检查差值。没有错误。我尝试设置JSFIDLE，但无法在那里运行。添加了parseInt以转换我的字符串。感谢这些建议。目前为止运气不好。好的，我明白了我的代码有一个主要问题。我将我的图像命名为box1、box2、box3等，然后我选择了一个随机框，代码为var tile=“box”+（Math.round（Math.random（）*8））；问题是这有时会产生一个“box0”，而我没有创建“box0”！因此，我将框从0-7重新编号，并将代码中的常数更改为7。好的，谢谢。我将仔细检查并对代码进行适当更改。我还发现我的部分问题与我的id和math.round函数有关。
.
.
.
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)

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;
    }
    .
    .
    .