c++随机生成迷宫_用Canvas + WASM画一个迷宫

最新推荐文章于 2024-11-01 16:06:38 发布

叶翼

最新推荐文章于 2024-11-01 16:06:38 发布

阅读量939

点赞数

文章标签： c++随机生成迷宫

本文链接：https://blog.csdn.net/weixin_33577989/article/details/113050181

版权

本篇博客介绍如何使用C++的连通集算法生成迷宫，结合Canvas和WebAssembly（WASM）进行绘制。首先，详细解释了如何利用连通集算法生成迷宫，包括随机拆墙和优化查找效率。接着，展示了如何用Canvas绘制迷宫，包括优化技巧和双缓存技术。然后，用最短路径算法找到迷宫的出路，实现路径搜索。最后，通过WASM提升了生成迷宫的效率，比较了JS与WASM在生成迷宫速度上的差异。

摘要由CSDN通过智能技术生成

本篇将尝使用canvas + wasm画一个迷宫，生成算法主要用到连通集算法，使用wasm主要是为了提升运行效率。然后再用一个最短路径算法找到迷宫的出路，最后的效果如下：

1. 用连通集算法生成迷宫

生成迷宫的算法其实很简单，假设迷宫的大小是10 * 10，即这个迷宫有100个格子，通过不断地随机拆掉这100个格子中间的墙，直到可以从第一个格子走到最后一个格子，也就是说第一个格子和最后一个格子处于同一个连通集。具体如下操作：

（1）生成100个格子，每个格子都不相通

（2）随机选取相邻的两个格子，可以是左右相邻或者是上下相邻，判断这两个格子是不是处于同一个连通集，即能否从其中一个格子走到另外一个格子，如果不能，就拆掉它们中间的墙，让它们相连，处于同一个连通集。

（3）重复第二步，直到第一个格子和最后一个格子相连。

那这个连通集应该怎么表示呢？我们用一个一维数组来表示不同的已连通的集合，初始化的时候每个格子的值都为-1，如下图所示，假设迷宫为3 * 3，即有9个格子：

每个索引在迷宫的位置：

负数表示它们是不同的连通集，因为我们还没开始拆墙，所以一开始它们都是独立的。

现在把3、4中间的墙拆掉，也就是说让3和4连通，把4的值置成3，表示4在3这个连通集，3是它们的根，如下图所示：

再把5、8给拆了：

再把4、5给拆了：

这个时候3、4、5、8就处于同一个连通集了，但是0和8依旧是两个不同的连通集，这个时候再把3和0中间的墙给拆了：

由于0的连通集是3，而8的连通集也是3，即它们处于同一个连通集，因此这个时候从第一个格子到最后一个格子的路是相通的，就生成了一个迷宫。

我们用UnionSet的类表示连通集，如下代码所示：

class UnionSet{
    
    constructor(size){
    
        this.set = new Array(size);
        for(var i = this.set.length - 1; i >= 0; i--){
    
            this.set[i] = -1;
        }
    }
    union(root1, root2){
    
        this.set[root1] = root2;
    }
    findSet(x){
    
        while(this.set[x] >= 0){
    
            x = this.set[x];
        }
        return x;
    }
    sameSet(x, y){
    
        return this.findSet(x) === this.findSet(y);
    }
    unionElement(x, y){
    
        this.union(this.findSet(x), this.findSet(y));
    }
}

我们总共用了22行代码就实现了一个连通集。上面的代码应该比较好理解，对照上面的示意图。如findSet函数得到某个元素所在的set的根元素，而根元素存放的是负数，只要存放的值是正数那么它就是指向另一个结点，通过while循环一层层的往上找直到负数。unionElement可以连通两个元素，先找到它们所在的set，然后把它们的set union一下变成同一个连通集。

现在写一个Maze，用来控制画迷宫的操作，它组合一个UnionSet的实例，如下代码所示：

class Maze{
    
    constructor(columns, rows, cavans){
    
        this.columns = columns;
        this.rows = rows;
        this.cells = columns * rows;
        //存放是连通的格子，{1: [2, 11]}表示第1个格子和第2、11个格子是相通的
        this.linkedMap = {};
        this.unionSets = new UnionSet(this.cells);
        this.canvas = canvas;
    }
}

Maze构造函数传三个参数，前两个是迷宫的列数和行数，最后一个是canvas元素。在构造函数里面初始化一个连通集，作为这个Maze的核心模型，还初始化了一个linkedMap，用来存放拆掉的墙，进而提供给canvas绘图。

Maze类再添加一个生成迷宫的函数，如下代码所示：

//生成迷宫
generate(){
    
    //每次任意取两个相邻的格子，如果它们不在同一个连通集，
    //则拆掉中间的墙，让它们连在一起成为一个连通集
    while(!this.firstLastLinked()){
    
        var cellPairs = this.pickRandomCellPairs();
        if(!this.unionSets.sameSet(cellPairs[0], cellPairs[1])){
    
            this.unionSets.unionElement(cellPairs[0], cellPairs[1]);
            this.addLinkedMap(cellPairs[0], cellPairs[1]);
        }   
    }   
}

生成迷宫的核心逻辑很简单，在while循环里面判断第一个是否与最后一个格子连通，如果不是的话，则每次随机选取两个相邻的格子，