vue 并查集 迷宫生成 bfs 路径寻找

最新推荐文章于 2024-08-17 12:54:01 发布
最新推荐文章于 2024-08-17 12:54:01 发布
阅读量99 收藏
点赞数
文章标签： 可视化 python js java vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35516360/article/details/122066076
版权
本文介绍如何使用Vue、JavaScript和Canvas实现迷宫生成及BFS（宽度优先搜索）路径寻找。通过并查集维护迷宫中格子的联通状态，随机选择格子和方向进行联通，直到起点与终点相连。在路径寻找过程中，确保路径在指定方向上可通行，避免穿墙问题。项目结构清晰，代码中Maze.js用于逻辑处理，game.vue则在应用中调用相关功能。
摘要由CSDN通过智能技术生成

原文链接: vue 并查集 迷宫生成 bfs 路径寻找

上一篇: TensorFlow 简单梯度下降可视化

下一篇: TensorFlow layers slim 模块搭建cnn对mnist分类，比较bn效果

用Canvas画迷宫

https://juejin.im/post/597e0982f265da3e2529f560

生成迷宫，并画出一条路径

b7439ae97496490d372b0b76c3ff8441f79.jpg

9969a395f3704cbd77b1c3cf615671927d1.jpg

项目结构

5afe0f2f7b3eceb1d7a3a136c017fc92fb8.jpg

使用数字表示格子联通状态

使用并查集表示格子所属联通集

随机选择格子和方向，联通两个格子，如果此时起点和终点联通，结束

路径使用标志位表示

寻找路径时，需要注意，两个格子可以联通，但是有可能在指定的方向上不可通过，必须在指定的方向上可以通过，才能放入队列中，否则会发生路径穿墙的问题

Maze.js 




                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  阿豪boy
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
vue-maze-一个由Vue.js组件制作的小巧迷宫游戏-Vue.js开发

				
			

			

				

					05-27
				

			

		

		

			
				
Vue-maze由Vue.js组件制作的迷宫游戏PLAY DEMO自动适应组件大小Mousemove / Touchmove / ArrowKey移动p Vue-maze由Vue.js组件制作的迷宫游戏PLAY DEMO Fit自动更改为组件大小Mousemove / Touchmove / ArrowKey移动玩家选择难度选择迷宫生成策略使用您自己的飞行员/目标图像安装$ npm install maze vue-maze-从'vue'保存import Vue从'vue- import import迷宫” let v = new Vue（{el：'#app'，template：`
`，组件：{迷宫}}）道具道具类型



			
		

	



                

              
                



	

		

			

				
					
小程序-走迷宫

				
			

			

				

					weixin_72426331的博客
				

				

					11-01
					
					303
					
				

			

		

		

			
				
每走到一步，检查这一步的上下左右四个格子是否可以走：如果可以，就继续下一步，并且记录之前走的路径。//是否是从这里出发的。首先定义每个格子是一个对象：MiGongItem(楼主读书少，拼音和英文混动。如何用程序来实现从左上角走到右下角？并且程序给出行走路径？再就是定义一个Test的类。白色格子：表示可以走。黑色格子：表示不能走。

			
		

	



                


  
              

                


	

		

			

				
					
前端实现 迷宫

				
			

			

				

					rao790754995的博客
				

				

					12-01
					
					1184
					
				

			

		

		

			
				
package.json
{
  "name": "rfei",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "http-server -

			
		

	





	

		

			

				
					
vue使用canvas生成地图图例

				
			

			

				

					wyw223的博客
				

				

					03-14
					
					2621
					
				

			

		

		

			
				
1.写canvas标签
<canvas ref='cvs' width="150px" height="200px"></canvas>
2.数据
  ldata:[{
                 "label": "30000 以上",
                &

			
		

	



		

			
		



	

		

			

				
					
html5的canvas绘制迷宫地图

				
			

			

				

					weixin_33918114的博客
				

				

					09-30
					
					419
					
				

			

		

		

			
				
canvas标签一直是html5的亮点，用它可以实现很多东西。我想用它来绘画像迷宫那样的地图。借助到的工具有瓦片地图编辑器tiled（点击跳转到下载链接）。

如图：如果你想要画像这样的迷宫地图，如果不用canvas，可以通过dom操作拼接一个一个div，以达成这个效果。那样是不是很不合理？首先，页面上会存在大量的div，并且通过dom操作生成很耗性能，如果地图大了，会非常不流畅，非常卡。如果...

			
		

	





	

		

			

				
					
三种迷宫生成算法概述

				
			

			

				

					L__ear的博客
				

				

					02-03
					
					5814
					
				

			

		

		

			
				
1. Randomized Prim’s algorithm（随机Prim算法）
随机Prim算法属于打通墙壁生成迷宫的算法，下面我将以集合的角度来描述此算法。

首先是初始化，建立一个所有单元格都被墙隔开的迷宫。
以8*8的迷宫为例，将每个单元格进行编号。使用集...

			
		

	





	

		

			

				
					
JS前端迷宫生成+寻路

				
			

			

				

					TeAmo
				

				

					05-08
					
					537
					
				

			

		

		

			
				
JS前端迷宫生成+寻路

			
		

	





	

		

			

				
					
JS前端迷宫生成

				
			

			

				

					TeAmo
				

				

					05-04
					
					478
					
				

			

		

		

			
				
迷宫，js,vue

			
		

	





	

		

			

				
					
迷宫实现

				
			

			

				

					qq_35857125的博客
				

				

					10-30
					
					239
					
				

			

		

		

			
				
迷宫生成

采用递归的思想，先用十字交叉线将迷宫分为四部分，从任意的四部分中选择三个，开一个小口，这样这四部分就是一个连通的整体，再依次将一个小部分递归生成四个更小的部分，这样，最后将生成具有路径的迷宫。

代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  ...

			
		

	





	

		

			

				
					
vue.js 2.0的一些变化（一、基本API）

				
			

			

				

					前端迷宫
				

				

					08-31
					
					535
					
				

			

		

		

			
				
全局配置


Vue.config.silent

Vue.config.optionMergeStrategies

Vue.config.devtools

Vue.config.errorHandler（新API，全局的挂钩用于在组件渲染和监控的时候处理未捕获的错误）

Vue.config.keyCodes（新API，为v-on配置自定义的key的别名）

Vue

			
		

	





	

		

			

				
					
机器学习常用包numpy篇（零）前置知识·数值类型

				
			

			

				

					2301_79144343的博客
				

				

					08-14
					
					403
					
				

			

		

		

			
				
本文仅介绍numpy中的数值类型

			
		

	





	

		

			

				
					
【Python】入门到放弃之第九章《字典》

				
			

			

				

					MP13537560060的博客
				

				

					08-15
					
					654
					
				

			

		

		

			
				
这是本系列的第九章节内容，《字典》。在Python中，字典（Dictionary）是一种内置的数据结构，用于存储键值对（key-value pairs）。字典是可变的，意味着你可以在创建字典后添加、删除或修改其中的元素。字典的键（key）必须是唯一的，并且是不可变的（即，它们必须是不可变数据类型，如字符串、数字或元组，但不能是列表或字典等可变类型）。字典的值（value）则可以是任何数据类型，包括列表、元组、字典等。以上，就是Python中字典的全部内容。

			
		

	





	

		

			

				
					
【python学习】深入解析 `jq` 库：JSON 处理的利器

				
			

			

				

					m0_54007171的博客
				

				

					08-13
					
					423
					
				

			

		

		

			
				
jq库是 Python 对流行的命令行工具jq的封装。它允许你直接在 Python 中使用jq的查询语言来处理 JSON 数据。借助jq，你可以轻松地对 JSON 数据进行过滤、选择、转换、聚合等操作，极大地简化了代码复杂度。

			
		

	





	

		

			

				
					
GraphRAG：复杂查询的知识图谱新框架

				
			

			

				

					YeJuliaLi的博客
				

				

					08-14
					
					907
					
				

			

		

		

			
				
微软最近发布了名为 GraphRAG（Graphs + Retrieval Augmented Generation）的创新 RAG 框架，这是一个将文本提取、语义网络分析，与大语言模型（LLM）的提示和总结功能结合在一起的端到端系统，用于深入理解文本数据集。在对私有数据中的复杂文本信息进行文档分析时，GrahRAG 使用 LLM 生成的知识图谱来大幅提高问答性能。这里的私有数据集是指 LLM 没...

			
		

	





	

		

			

				
					
汽车免拆诊断案例 | DAF（达富）汽油尾气处理液故障警示

				
			

			

				

					虹科Pico汽车示波器的博客
				

				

					08-14
					
					861
					
				

			

		

		

			
				
一辆DAF（达富）故障警示灯亮，提示DEF系统故障，使用虹科Pico汽车示波器检查发现故障的原因是......

			
		

	





	

		

			

				
					
C++_基本语法笔记_模板

				
			

			

				

					qq_45629864的博客
				

				

					08-14
					
					417
					
				

			

		

		

			
				
思想是Java里的泛型（不确定用什么类型的数据）这里template这一句，意思是声明T是泛型，后面写用到泛型T的函数。建议都用应用场景：不同数据类型的交换函数。

			
		

	





	

		

			

				
					
【Python使用】嘿马头条项目从到完整开发教程第1篇：简介,1. 内容【附代码文档】

				
			

			

				

					一诺的博客
				

				

					08-16
					
					531
					
				

			

		

		

			
				
本教程的知识点为:简介 1. 内容 2. 目标 产品效果 ToutiaoWeb虚拟机使用说明 数据库 理解ORM 作用 思考： 使用ORM的方式选择 数据库 SQLAlchemy操作 1 新增 2 查询 all() 数据库 分布式ID 1 方案选择 2 头条 使用雪花算法 （代码 toutiao-backend/common/utils/snowflake) 数据库 Redis 1 Redis事务 基本事务指令 Python客户端操作 Git工用流 调试方法 JWT认证方案 JWT & JWS & JWE 

			
		

	





	

		

			

				
					
CSS的:defined伪类：选择已定义元素的新选择器

					
最新发布

				
			

			

				

					2401_85743969的博客
				

				

					08-17
					
					469
					
				

			

		

		

			
				
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。

			
		

	





	

		

			

				
					
Vue路由参数传递方法详解：路径、查询与属性

				
			

			

				

					
				

			

		

		

			
				
总结来说，Vue路由传参有多种方式，包括路径参数、查询参数、属性传参、全局路由守卫和Vuex状态管理。根据实际需求选择合适的方法，可以灵活地在Vue项目中控制组件间的通信，确保数据的流动和页面的跳转逻辑清晰易懂...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值