Question

我正在使用html和javascript（没有JQuery）开发一个版本的十五难题（http://en.wikipedia.org/wiki/15_puzzle）。为了计算出基本功能，我设置了一个9 x 9网格。我有八个100 x 100像素彩色图像（id = box1到box8）和一个100 x 100像素白色或“空”框（boxW）。这是我网格中的九个图块。我已经弄清楚如何将相邻的图像拼贴移动到空的拼贴中以及如何突出可移动拼贴的边框。现在我正在尝试创建一个在游戏开始时随机播放的功能。我选择一个随机框，通过将其边距与空图块的边距进行比较来查看它是否可移动。如果是这样，我移动它并重复。问题是我的for循环似乎只在几次移动后退出 - 有时是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）和循环周期。这次，退出前有11个循环。如您所见，循环的上限为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

考虑到第一个if中的代码将执行999-n次（因为你从1开始），其中n是次数＆＃34; tile＆＃34;变得等于＆＃34; tileHold＆＃34;所以如果你想要内部的代码，如果要执行1000次，你需要修改你的代码：

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

还要考虑到第二个if仅在以下情况下执行：

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

变为真实。所以，如果你想要的是这个代码被执行了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;
    }
    .
    .
    .

for loop早期退出

1 个答案: