0

我正在研究十五个谜题的一个版本（http://en.wikipedia.org/wiki/15_puzzle)，使用 html 和 javascript（没有 JQuery）。为了实现基本功能，我设置了一个 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）和循环周期。这一次，在退出之前有十一个循环。如您所见，循环的上限为 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
4

1 回答 1

0

考虑到第一个 if 中的代码将被执行 999-n 次（因为您从 1 开始），其中 n 是“tile”等于“tileHold”的次数，所以如果你想要里面的代码如果要准确执行 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;
    }
    .
    .
    .
于 2013-09-21T20:01:13.797 回答