Javascript A*寻路(Craftyjs engine)

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量120 收藏
点赞数
文章标签： javascript xhtml ViewUI 
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<script type="text/javascript" src="../crafty-0.6.1.js"></script>
	<script type="text/javascript" src="game.js"></script>
	<script type="text/javascript" src="scene.js"></script>
	
	<script>
		window.οnlοad=function(){
			Game.start();
			//console.log("make map "+i+","+j);
		}
	</script>
	<title>AStar</title>
</head>
<body>
</body>
</html>

scene.js

Crafty.scene('Main', function(){
	//
	console.log("main scene is load...");
	var walls = new Array();
	var wallNodes = new Array();
	var pathCubes = new Array();
	for(var i = 0; i < Game.tileX; i++){
		for(var j = 0; j < Game.tileY; j++){
			if(Crafty.math.randomNumber(1, Game.tileX-1)<9 && i>0 && i<Game.tileX-1 && j>0 && j<Game.tileY-1){
				//floor
				var wall = Crafty.e("2D, Canvas, Color, Solid").color("#A52A2A").attr({
					w: Game.tileWidth, h: Game.tileHeight,
					x: Game.tileWidth*i, y: Game.tileHeight*j
				});
				walls.push(wall);
				wallNodes.push(new Node(i, j));
			}else{
				//floor
				Crafty.e("2D, Canvas, Color, Mouse").color("#778899").attr({
					w: Game.tileWidth, h: Game.tileHeight,
					x: Game.tileWidth*i, y: Game.tileHeight*j
				}).bind('Click', function(e){
					
					//alert(Math.floor(e.clientX/Game.tileWidth)+","+Math.floor(e.clientY/Game.tileHeight));
					pathCubes.length = 0;
					/*
					for(el in pathCubes){
						el.destroy();
					}
					*/
					var path = Game.findPath(new Node(player.x, player.y), new Node(e.clientX, e.clientY), wallNodes);
					//console.log(path);
					
					for(var k=0; k<path.length; k++){
						var pathCube = Crafty.e("2D, Canvas, Color").color("#00FF00").attr({
							w: Game.tileWidth, h: Game.tileHeight,
							x: Game.tileWidth*path[k].x, y: Game.tileHeight*path[k].y
						}).timeout(function(){
								this.destroy();
						}, 3000);
						pathCubes.push(pathCube);
					}
					var dest = path.shift();
					player.x = dest.x * Game.tileWidth;
					player.y = dest.y * Game.tileHeight;
					
					
				});
			}
		}
	}
		
	//
	var player;
	var flag = true;
	while(flag){
		var playerX = Crafty.math.randomInt(1,Game.tileX-1);
		var playerY = Crafty.math.randomInt(1,Game.tileY-1);
		console.log("playerX:"+playerX+",playerY:"+playerY);
		for(var i=0; i<walls.length; i++){
			if(walls[i].x != playerX && walls[i].y != playerY){
				player = Crafty.e("2D, Canvas, Color").color("orange").attr({
					w: Game.tileWidth, h: Game.tileHeight,
					x: playerX*Game.tileWidth, y: playerY*Game.tileHeight, z: 99
				});
				flag = false;
				break;
			}
		}
	}
});

game.js 

Game={
	tileWidth: 16,
	tileHeight: 16,
	width: 1280,
	height: 480,
	tileX: 80,
	tileY: 30,
	start: function(){
		Crafty.init(Game.width, Game.height);
		Crafty.background('rgb(87, 109, 20)');
		
		Crafty.scene('Main');
		
	},
	findPath: function(start, dest, walls){
		if(start.x == undefined || start.y == undefined || dest.x == undefined || dest.y == undefined){
			return undefined;
		}
		start.x = Math.floor(start.x/Game.tileWidth);
		start.y = Math.floor(start.y/Game.tileHeight);
		dest.x = Math.floor(dest.x/Game.tileWidth);
		dest.y = Math.floor(dest.y/Game.tileHeight);
		
		console.log("start:"+start.x+","+start.y+"/dest:"+dest.x+","+dest.y);
		var openList = new Array();
		var closeList = new Array();
		
		
		start.costFromStart = 0;
		start.costToObject = start.getCost(dest);
		
		openList.push(start);
		
		while(openList.length > 0){
			var firstNode = openList.shift(); //返回并删除第一个元素
			if(firstNode.x == dest.x && firstNode.y == dest.y){
				return Game.makePath(firstNode);
			}else{
				closeList.push(firstNode);
				var neighbors = firstNode.getNeighborNodes();
				for(var i=0; i<neighbors.length; i++){
					var neighborNode = neighbors[i];
					//是否在打开列表
					var isOpended = neighborNode.isPosCollided(openList);
					//是否在关闭列表
					var isClosed = neighborNode.isPosCollided(closeList);
					//是否和障碍碰撞
					var isCollideWithWall = neighborNode.isPosCollided(walls);
					
					if(!isOpended && !isClosed && !isCollideWithWall){
						neighborNode.costFromStart = firstNode.costFromStart + 1;
						neighborNode.costToObject = neighborNode.getCost(dest);
						neighborNode.parentNode = firstNode;
						
						//
						openList.push(neighborNode);
						Crafty.e("2D, Canvas, Color, Solid").color("lightblue").attr({
							w: Game.tileWidth, h: Game.tileHeight,
							x: Game.tileWidth*neighborNode.x, y: Game.tileHeight*neighborNode.y
						}).timeout(function(){this.destroy();}, 1500);
						//按近-远排序
						openList.sort(function(node1, node2){
							return (node1.costFromStart + node1.costToObject) - (node2.costFromStart + node2.costToObject);
						});
					}
				}
			}
		}
		openList = undefined;
		closeList = undefined;
		return undefined;
	},
	makePath: function(node){
		var path = new Array();
		while(node.parentNode != undefined){
			path.push(node);
			node = node.parentNode;
		}
		//add last node
		path.push(node);
		return path;
	},
	
};

function Node(posX, posY){
	this.x = posX;
	this.y = posY;
	this.costFromStart = undefined;
	this.costToObject = undefined;
	this.parentNode = undefined;
};

Node.prototype = {
	constructor: Node,
	getCost: function(node){
		if(node == undefined){
			return undefined;
		}
		return Crafty.math.distance(node.x, node.y, this.x , this.y);
	},
	getNeighborNodes: function(){
		var neighbors = new Array();
		neighbors.push(new Node(this.x + 1, this.y));
		neighbors.push(new Node(this.x, this.y + 1));
		neighbors.push(new Node(this.x - 1, this.y));
		neighbors.push(new Node(this.x, this.y - 1));
		return neighbors;
	},
	isPosCollided: function(arr){
		for(var i=0; i<arr.length; i++){
			if(arr[i] != undefined && arr[i].x == this.x && arr[i].y == this.y){
				return true;
			}
		}
		return false;
	}
};
顺便吐槽一下firefox32.0.3，改用360浏览器7.1挺好


iteye_12028
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript：实现多启发式a star A*算法(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
09-02 48
javascript：实现多启发式a star A*算法(附完整源码)
P5Astar:用P5.js制作的AStar寻路算法的可视化
03-28
P5明星 用P5.js制作的AStar寻路算法的可视化
【A*算法实现 javascript版】A星算法javascript库，5行代码计算最短路径
微笑君的博客
07-31 1386
演示地址：http://changjiuxiong.gitee.io/a_star/ 源码地址：https://gitee.com/changjiuxiong/A_Star 运行截图： 不讲原理，A*算法已被讲烂。 我将A*算法封装成一个JS库，名为AStar。要计算一条路径，只需几行代码！ let task = new AStar.Task(); //新建寻路任务 task.setStart(40,0); //设置起点 task.setEnd(40,80); //设置终点 //设置障碍/
CraftyJs初探
xyface的博客
07-08 1034
CraftyJs初探1. 前言前不久听了一趟分享课，分享课的主题是JS游戏的制作，但是如果是自己写游戏比较的繁琐，如果能应用一个游戏引擎，就能大大的简化游戏的开发速度和开发效率，于是我在网上参考了几个游戏引擎，找到了CraftyJs这个游戏引擎还是挺不错的，但是苦于网上的教程不是很全面，所以今天就开个坑，写个入门级的教程，仅供参考。如果有不对的地方欢迎指正
javascript 实现 A-star 寻路算法
weixin_34343689的博客
03-17 212
在游戏开发中，又一个很常见的需求，就是让一角色从A点走到B点，而我们期望所走的路是最短的，最容易想到的就是两点之间直线最短，我们可以通过勾股定理来求出两点之间的距离，但这个情况只能用于两点之间没有障碍物的情况，如果两点之间有很多不可避免无法穿过的障碍物的时候，怎么办呢？因此，我们的需求就是：计算出两点之间的最短路径，而且能够避开所有的障碍物 A-star javascript实现 第...
cocos creator 实现A*寻路
06-30
使用javascript在cocos creator上实现了A*寻路算法，使用方块格表示起始点以及障碍路径等，动态调整行列数，障碍物密度，初始点坐标，实现鼠标点击计算起始点到点击位置方块的路径。
javascript版 A*寻路算法实例
09-05
完整的javascript版A*寻路算法展示，有贪心算法与穷举法两种配置，可视化展示层可设置展示寻路过程。
javascript A*寻路算法DEMO
07-30
javascript A*寻路算法DEMO
pathfinding:JavaScript 中的 A* 寻路
06-02
演示如何在网格上使用 A* 在世界各地移动 AI 实体。
js算法之A*寻路算法
06-23
用js写的实现的A*寻路算法(包含UI) 用js写的实现的A*寻路算法(包含UI)
javaScript AStar 寻路算法
12-24
javaScript AStar 寻路算法。demo可以直接运行，方便大家相互学习。
A*寻路算法
08-22
实现的功能： 1 把open队列中的元素移到close队列中，表示起始节点已经走过了，那么接下来应该走哪一步呢？ * 2 把起始位置周围的 8 个点都找出来 并且 计算出 估价函数值最低的那个元素 那么这个元素就是接下来要走的这步 * 3 接下来走的这步确定了 那么就又该把这个位置的点移动到 close队列中，然后继续找周围的点 并且进行估价
一个高效的A-star寻路算法（八方向）(
aikb6223的博客
11-13 1021
这种写法比较垃圾，表现在每次搜索一个点要遍历整个地图那么大的数组，如果地图为256*256，每次搜索都要执行65535次，如果遍历多个点就是n*65535，速度上实在是太垃圾了 简单说下思路，以后补充算法 优化重点在在open表和close表的遍历上，这两个地方优化后，astar会大量提速 close只用来查询所以可以用hash这样就避免了遍历 ...
[A*寻路]基于javascript A*寻路获取最佳路径（附带例子）
苹果蜀黍与福尔猫斯
08-22 669
直接上代码仓库https://github.com/applelee/a-star-path 关于A*算法，网上有太多的讲解，我这里就不班门弄斧了。有兴趣的小伙伴，可以去仓库下载。（注释还算比较清楚）
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 450
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 806
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
element-ui的bug记录
nick_zhang的博客
04-29 379
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 123
注释很详细，直接上代码……
bpmn-js推荐几款常用的插件
飞云先生
04-30 76
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
threejs: a*寻路算法
11-07
threejs是一个用于创建和显示3D图形的JavaScript库。它可以帮助开发人员在网页上实现逼真的3D效果。 A*寻路算法是一种常用的路径规划算法，用于找到从起点到终点的最短路径。它基于图的搜索，并使用启发式函数来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值