0

我试图在 javascript 中编写代码一个 ruzzle 求解器。现在它只是在迷宫中挖掘并找到每条可能的路径（将来我会将它们与字典进行匹配以找到其中真正有效的单词）

在这里你可以看到它 ：http://178.239.177.105/ruzzle/

我想用一个动画来展示算法是如何工作的，但是我提出了一个问题。如果您加载它，页面将不显示任何内容，并且我的浏览器会在一段时间后崩溃。

但...

如果你在递归函数中间的某个地方设置了一个 alert("") 函数，你将能够完成算法中的任何步骤。特别是如果您将浏览器设置为阻止显示任何进一步的警报消息，您最终会看到动画在迷宫中运行。

我实际上是在尝试通过 setInterval() 执行此操作，但没有工作。

所以我有两个问题： - 为什么脚本会导致页面崩溃，或者如果有警报则不会？- 如何在 wait() 机制上使用某种方式正确显示动画？

谢谢

您可以在页面上查看所有代码并查看源代码，但是为了清楚起见，我将在此处粘贴相关代码：

您也可以在此处使用代码：http : //jsfiddle.net/Gcw2U/ （您必须取消注释最后一行才能使其运行）

        //this matrix of chars rapresent the 4x4 puzzle
          var ruzle_model = [["w","a","l","k"],["m","o","o","n"],["h","a","t","e"],["r","o","p","e"]];



        // ""offsets" rapresent the four motion vector(up,down,left,right)
        // used to visit the matrix
        var offsets = [[1,0],[0,1],[-1,0],[0,-1]];

//recursive function to dig the maze
            function path(m,i,j,paths,checkeds){
                alert("SET BROWSER TO AVOID NEXT ALERTS MSGs!");
                //base case, if not hitting a wall or already checked cell
                if ( ! (i<=3 && i>=0 && j>=0 && j<=3) || isChecked(checkeds,i,j)){
                    terminal.innerHTML = terminal.innerHTML + "-"+ paths;
                    uncheckAllCells();
                    return paths;
                    }

                //call path for every direction (up,down,left,right) stored in offsets
                var tmp = [];
                for (var c=0; c<offsets.length;++c){
                    var offset = offsets[c];
                    checkCells(i,j);
                    checkeds.push(new Array(i,j));
                    tmp.push(path(m,i+offset[0],j+offset[1],paths + m[i][j],copy(checkeds)));
                }

                return tmp;
            }


            //call path on every cell in the maze
            function ruzzle(r){
                var sol = []
                for(var i=0; i<4; ++i){
                    for(var j=0; j<4; ++j){
                        var checkeds = new Array();
                        sol.push(path(r,i,j,'',checkeds));
                    }
                }
                terminal.innerHTML = sol;
                return sol;
            }
4

1 回答 1

0

Javascript 循环和递归会抑制页面的呈现，因此所做的任何更改都将保持不可见，直到脚本停止执行，例如当您生成一个alert. 当用户设置“不显示警报消息”时，警报仍然会为底层事件循环产生执行时间，这将更新页面。

对于尽可能快（高 fps）的动画，请使用requestAnimationFrame().

在你的情况下，setTimeout()是最好的方法。设置递归调用超时path。

function recursive(args) {
    // do stuff to args
    setTimeout(function () {
        recursive(args);
    }, 5);
}

例子

于 2013-09-14T12:03:07.063 回答