novus log

只是老把戲用 JavaScript 實作而已，不用手工繪圖程式碼短了很多。用 sort() trick 做 shuffle 在 IE 好像行不通，所以 IE 使用者請自行把 v.sort(...) 換成你最喜歡的 shuffle 演算法。

簡易版原始碼附於文末，幻覺版原始碼請自行從連結觀看。

• JavaScript Maze (simple)
• JavaScript Maze (illusion)

也可以內嵌：

<style>
#maze { table-layout: fixed; border-collapse: collapse; background: #efefef;}
#maze td { width: 12px; height: 12px; }
.wall { background: #708090; }
</style>

<table id="maze"></table>
<script type="text/javascript" charset="utf-8">
var width = 53+2, height = 39+2;
var maze = new Array(width  * height);

for (var row = 0; row < height; ++row) {
    for (var col = 0; col < width; ++col) {
        maze[row * width + col] = row && col && row < height-1 && col < width-1;
    }
}

(function gen(p, d) {
    if (maze[p]) {
        var v = [-1, 1, -width, width];
        v.sort(function(a, b) { return Math.random() < 0.5;});
        maze[p] = maze [p - d] =  0;
        for (var i = 0; i < 4; ++i) 
            gen(p + 2 * v[i], v[i]);
    }
} (Math.floor(height/4) * 2 * width + Math.floor(width/4) * 2, 0));

var mazeTable = document.getElementById("maze");
for (var row = 0; row < height; ++row) {
    var tr = document.createElement("tr");
    for (var col = 0; col < width; ++col) {
        var td = document.createElement("td");
        if (maze[row*width + col]) 
            td.className += "wall";
        tr.appendChild(td);
    }
    mazeTable.appendChild(tr);
}
</script>