Html5游戏框架Craftyjs入门简单RPG及A*寻路

2016-10-29 17:22:11 4325 收藏
分类专栏： 移动HTML5 文章标签： html5 游戏 craftyjs 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dyyaries/article/details/52965506
版权
移动HTML5 专栏收录该内容
3 篇文章 0 订阅
订阅专栏

Crafty.js是一个比较简单轻量的Html5游戏框架，个人比较喜欢，是因为它足够简便（如果你只需要制作简单的小游戏，例如微信h5中的各种游戏）。

遗憾的是，Crafty.js的社区活跃的人越来越少，文档和新的版本也对不上号，所以有的API只能是从源码中获取使用方法了。

这次使用他自带的一个RPG示例加工升级而来，先看下大致的样子：


四周的灌木是防止人物越出屏幕，中间的没有碰撞检测，以下是图片素材：


原本示例中是使用按键控制人物四向行走，我将其改成人物自动寻路到点击坐标，这样手机上也能玩了。

首先需要一个A*算法实现，我在网上找了一个，基本可用

  1. window.AStar = {};
  2. (function(aStar){
  3.  
  4. 	//p1:起始节点[i,j] ， p2:最终节点[i,j]  p3:地图数据(2d)arr，p4:可以通过的标识
  5. 	aStar.find_path = function(start,end,map,marker){
  6. 		var open = [];
  7. 		var close = [];
  8.  
  9. 		var s_p = start;
  10. 		var e_p = end;
  11. 		var map_arr = map;
  12. 		var tra_marker = marker;
  13. 	
  14. 		var G = 0;
  15. 		var H = 0;
  16. 		var F = 0;
  17.  
  18. 		//加入起始节点  [x, y , G ,F ,father]
  19. 		open.push([s_p[0],s_p[1],0,(Math.abs(e_p[0]-s_p[0]) + Math.abs(e_p[1]-s_p[1])),null]);
  20.  
  21. 		return function(obj){
  22. 			//重拍，取最小的一个
  23. 			var count = 0;
  24. 			for(var i = obj[0]-1,ilen = i+3 ; i < ilen ; i++){
  25. 				for(var j = obj[1]-1,jlen = j+3 ;j < jlen; j++){
  26. 					//遍历周围八节点,排除自己
  27. 					if(i == obj[0] && j == obj[1])
  28. 						continue;
  29. 					//排除穿越的情况
  30. 					if(!((i == obj[0] ) || ( j == obj[1])) && ( map_arr[i] && map_arr[obj[0]] && map_arr[i][obj[1]] != tra_marker && map_arr[obj[0]][j] != tra_marker))
  31. 						continue;
  32. 					if(i == e_p[0] && j == e_p[1]){
  33. 						open.push([i,j,G,F,obj]);
  34. 						var ways = [];
  35. 						var ele = obj;
  36. 						do{
  37. 							ways.unshift(ele);
  38. 							ele = ele[4];
  39. 						}while(ele[4] != null);
  40. 						return ways;
  41. 					}
  42. 					
  43. 					if(map_arr[i] && map_arr[i][j] && map_arr[i][j] == tra_marker && is_exist(open,[i,j]) == -1 && is_exist(close,[i,j]) == -1){
  44. 						G = ( i == obj[0] ) || ( j == obj[1] ) ? obj[2]+1.0 : obj[2]+1.4 ;				
  45. 						H = Math.sqrt((e_p[0] - i)*(e_p[0] - i) + (e_p[1] - j)*(e_p[1] - j));
  46. 						F = G + H;
  47.  
  48. 						//var td = document.getElementById(i+"-"+j);
  49. 						//td.innerHTML = "G:" + G.toFixed(2) + "\nH:" + H.toFixed(2) + "\nF:" + F.toFixed(2);
  50. 						open.push([i,j,G,F,obj]);
  51. 						count++;
  52. 					}
  53. 				}
  54. 			}
  55. 			close.push(open.shift());
  56. 			var o;
  57. 			if(open[0] && open[0][4] == obj[4]){
  58. 				o = count == 0 ? get_brother(open,obj) : (arr_sort(open),open[0]);
  59. 			}else{
  60. 				o = (arr_sort(open),open[0]);
  61. 			}
  62. 			
  63. 			if(o){
  64. 				return arguments.callee(o);
  65. 			}else{
  66. 				return [];
  67. 			}
  68. 		}(open[0])
  69. 	}
  70.  
  71. 	var get_brother = function(arr,o){
  72. 		var a = [];
  73. 		for(var i = 0 ; i < arr.length ; i++){
  74. 			if(o && arr[i][4] == o[4]){
  75. 				return arr[i];
  76. 			}
  77. 		}
  78. 		if(o[4]){
  79. 			return arguments.callee(o[4]);
  80. 		}else{
  81. 			return null;
  82. 		}
  83. 	}
  84.  
  85. 	
  86. 	var arr_sort = function(){
  87. 		function s(a,b){
  88. 			return a[3] - b[3];
  89. 		}
  90. 		return function(arr){
  91. 			arr.sort(s);
  92. 		}
  93. 	}();
  94.  
  95. 	var is_exist = function(arr,p){
  96. 		for(var i = 0 ; i < arr.length ; i++){
  97. 			if(arr[i][0] == p[0] && arr[i][1] == p[1]){
  98. 				return i;
  99. 			}
  100. 		}
  101. 		return -1;
  102. 	}
  103. })(window.AStar)
下面就是具体实现，分为loading和main两个场景 

  1. <html>
  2. <head>
  3. 	<title>simple rpg a* star</title>
  4. 	<meta charset="UTF-8">
  5. 	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  6. 	<style type="text/css">
  7. 		html,body{
  8. 			padding: 0;
  9. 			margin: 0;
  10. 		}
  11. 	</style>
  12. 	<script type="text/javascript" src="a_star.js"></script>
  13. </head>
  14. <body>
  15. 	<div id="game"></div>
  16. 	<script type="text/javascript" src="crafty.js"></script>
  17. 	<script type="text/javascript">
  18. 		var stageWidth = screen.availWidth;		//获取设备屏幕尺寸
  19. 		var stageHeight = screen.availHeight;
  20. 		var cellWidth = 16;						//地图网格尺寸
  21. 		var map_arr = [];
  22. 		Crafty.init(stageWidth, stageHeight, "game");
  23. 		Crafty.background("#000000");
  24. 		//待加载的资源，参考craftyjs.com的API文档
  25. 		var assets = {
  26. 			sprites: {
  27. 				"bb_sprite.png": {
  28. 		            tile: cellWidth,
  29. 		            tileh: cellWidth,
  30. 		            map: {
  31. 		                grass1: [0,0],
  32. 					    grass2: [1,0],
  33. 					    grass3: [2,0],
  34. 					    grass4: [3,0],
  35. 					    flower: [0,1],
  36. 					    bush1:  [0,2],
  37. 					    bush2:  [1,2],
  38. 					    player: [0,3]
  39. 		            }
  40. 		        }
  41. 			}
  42. 		};
  43. 		Crafty.scene("loading", function(){
  44. 			//资源加载完成，进入主场景
  45. 			Crafty.load(assets, function(){
  46. 				Crafty.scene("main");
  47. 			}, function(e){
  48. 				//资源加载进度
  49. 				if(this.loadText){
  50. 					this.loadText = this.loadText.text + e.percent + "%";
  51. 				}
  52. 			}, function(e){
  53. 				console.log("资源加载失败!");
  54. 			});
  55. 		});
  56.  
  57. 		//显示正在加载场景
  58. 		this.loadText = Crafty.e("2D, DOM, Text").attr({x:0, y:200, w:400, h:30}).text("loading").css({"text-align":"center"});
  59. 		Crafty.scene("loading");
  60.  
  61. 		//制作主场景
  62. 		Crafty.scene("main", function(){
  63. 			var xn = Math.ceil(stageWidth/cellWidth);
  64. 			var yn = Math.ceil(stageHeight/cellWidth);
  65. 			var xs = stageWidth%cellWidth;
  66. 			var ys = stageHeight%cellWidth;
  67. 			//构建游戏地图
  68. 			for(var i=0; i<yn; i++){
  69. 				for(var j=0; j<xn; j++){
  70. 					var grass = Crafty.e("2D, Canvas, grass"+Crafty.math.randomInt(1, 4)+",Mouse").attr({x: cellWidth*j, y:cellWidth*i});	
  71. 					//处理点击寻路事件
  72. 					grass.bind("MouseUp", function(e){
  73. 						if( e.mouseButton == Crafty.mouseButtons.LEFT ){
  74. 							var startX,endX,startY,endY;
  75. 							//计算开始和结束点（换算为地图网格坐标）
  76. 							if(this.x > player.x){
  77. 								startX = Math.floor(player.y/cellWidth);
  78. 								endX = Math.ceil(this.y/cellWidth);
  79. 							}else{
  80. 								startX = Math.ceil(player.y/cellWidth);
  81. 								endX = Math.floor(this.y/cellWidth);
  82. 							}
  83. 							if(this.y > player.y){
  84. 								startY = Math.floor(player.x/cellWidth);
  85. 								endY = Math.ceil(this.x/cellWidth)
  86. 							}else{
  87. 								startY = Math.ceil(player.x/cellWidth);
  88. 								endY = Math.floor(this.x/cellWidth)
  89. 							}
  90. 							var end = [endX, endY];
  91. 							var start = [startX, startY];
  92. 							//A*寻路
  93. 							var ways = AStar.find_path(start,end,map_arr,1);
  94. 							//console.log(ways);
  95. 							if(ways.length == 0 ){
  96. 								alert("没有可行的路！");
  97. 								return ;
  98. 							}
  99. 							//清除路标（花）
  100. 							if(player.flowers){
  101. 								for(var i=0; i<player.flowers.length; i++){
  102. 									player.flowers[i].destroy();
  103. 								}
  104. 							}
  105. 							
  106. 							player.ways = ways;
  107. 							var flowers = [];
  108. 							for(var i = 0;i < ways.length; i++){
  109. 								var cellX = ways[i][1];
  110. 								var cellY = ways[i][0];	
  111. 								var flower = Crafty.e("2D, Canvas, flower, SpriteAnimation").attr({x: cellWidth*cellX, y:cellWidth*cellY});
  112. 								flowers.push(flower);
  113. 							}
  114. 							player.flowers = flowers;
  115. 							player.wayN = 0;
  116. 							if(player.walkTimer){
  117. 								//清除原有定时器
  118. 								clearTimeout(player.walkTimer);
  119. 							}
  120. 							//动画模拟走路
  121. 							walkWay(player);
  122. 							
  123. 						}
  124. 					});
  125. 					if(!map_arr[i]) map_arr[i] = [];
  126. 					//填充寻路网格，暂设定1为可行路块，0为不可行
  127. 					map_arr[i][j] = 1;
  128.  
  129. 					if (j > 0 && j < xn-1 && i > 0 && i < yn-1 && Crafty.math.randomInt(0, 50) > 36) {
  130. 						Crafty.e("2D, Canvas, bush"+Crafty.math.randomInt(1, 2)+", SpriteAnimation").attr({x: cellWidth*j, y:cellWidth*i});
  131. 						map_arr[i][j] = 0;
  132. 					}
  133.  
  134. 				}
  135. 			}
  136. 			//构建地图周围的灌木围栏，人物不可以越出围栏
  137. 			for(var i=0; i<xn; i++){
  138. 				//上下
  139. 				if(xs/2+i*cellWidth+cellWidth>stageWidth){
  140. 					break;
  141. 				}
  142. 				Crafty.e("2D, Canvas, wall_top, bush"+Crafty.math.randomInt(1, 2)).attr({x:xs/2+i*cellWidth,y:0});
  143. 				Crafty.e("2D, Canvas, wall_bottom, bush"+Crafty.math.randomInt(1, 2)).attr({x:xs/2+i*cellWidth,y:stageHeight-cellWidth});
  144. 				if(!map_arr[0]) map_arr[0] = [];
  145. 				map_arr[0][i] = 0;
  146. 				if(!map_arr[yn-1]) map_arr[yn-1] = [];
  147. 				map_arr[yn-1][i] = 0;
  148. 			}
  149. 			for(var i=1; i<yn-1; i++){
  150. 				//左右
  151. 				if(ys/2+i*cellWidth+2*cellWidth>stageHeight){
  152. 					break;
  153. 				}
  154. 				Crafty.e("2D, Canvas, wall_left, bush"+Crafty.math.randomInt(1, 2)).attr({x:0, y:ys/2+i*cellWidth});
  155. 				Crafty.e("2D, Canvas, wall_right, bush"+Crafty.math.randomInt(1, 2)).attr({x:stageWidth-cellWidth,y:ys/2+i*cellWidth});
  156. 				if(!map_arr[i]) map_arr[i] = [];
  157. 				map_arr[i][0] = 0;
  158. 				map_arr[i][xn-1] = 0;
  159. 			}
  160.  
  161. 			//人物，构建四向行走动画
  162. 			var player = Crafty.e("2D, Canvas, player, SpriteAnimation, Collision, Tween").attr({x:stageWidth/2, y:stageHeight/5})
  163. 							.reel("walk_left", 300, 6, 3, 3)
  164. 							.reel("walk_right", 300, 9, 3, 3)
  165. 							.reel("walk_up", 300, 3, 3, 3)
  166. 							.reel("walk_down", 300, 0, 3, 3)
  167. 							.reel("idle_left", 300, 6, 3, 1)
  168. 							.reel("idle_right", 300, 9, 3, 1)
  169. 							.reel("idle_up", 300, 3, 3, 1)
  170. 							.reel("idle_down", 300, 0, 3, 1);
  171. 			//碰撞检测（与四周灌木围栏，路标）
  172. 			player.collision().onHit("wall_left", function(e) {
  173. 				var tile = e[0].obj;
  174. 				this.x = tile.x + tile.w;
  175. 			}).onHit("wall_right", function(e) {
  176. 				var tile = e[0].obj;
  177. 				this.x = tile.x - tile.w;
  178. 			}).onHit("wall_bottom", function(e) {
  179. 				var tile = e[0].obj;
  180. 				this.y = tile.y - tile.h;
  181. 			}).onHit("wall_top", function(e) {
  182. 				var tile = e[0].obj;
  183. 				this.y = tile.y + tile.h;
  184. 			}).onHit("flower", function(e){
  185. 				var flower = e[0].obj;
  186. 				flower.destroy();
  187. 			});
  188. 			Crafty.bind("EnterFrame", function(){
  189. 			});
  190. 		});
  191. 		//模拟行走到目的地的方法
  192. 		function walkWay(player){
  193. 			//计时器执行方法，每次从ways中取一个坐标作为人物移动的目的地网格点
  194. 			if(!player.wayN){
  195. 				player.wayN = 0;
  196. 			}
  197. 			if(!player.ways){
  198. 				return;
  199. 			}
  200. 			var ways = player.ways;
  201. 			var dest = ways[player.wayN];
  202. 			//计算人物所在地图网格坐标
  203. 			var playerX = Math.round(player.x/cellWidth);
  204. 			var playerY = Math.round(player.y/cellWidth); 
  205. 			var destX = dest[1];
  206. 			var destY = dest[0];
  207. 			//首选取消x, y方向的动作
  208. 			player.cancelTween("x");
  209. 			player.cancelTween("y");
  210. 			//以下是根据目标网格坐标判断人物行走动画
  211. 			//-->右下
  212. 			if(playerX < destX && playerY < destY){
  213. 				if(!player.isPlaying("walk_right"))
  214. 					player.animate("walk_right", 100);	
  215. 			}
  216. 			//-->左上
  217. 			if(playerX > destX && playerY > destY){
  218. 				if(!player.isPlaying("walk_left"))
  219. 					player.animate("walk_left", 100);	
  220. 			}
  221. 			//-->右上
  222. 			if(playerX < destX && playerY > destY){
  223. 				if(!player.isPlaying("walk_right"))
  224. 					player.animate("walk_right", 100);
  225. 			}
  226. 			//-->左下
  227. 			if(playerX > destX && playerY < destY){
  228. 				if(!player.isPlaying("walk_left"))
  229. 					player.animate("walk_left", 100);
  230. 			}
  231.  
  232. 			if(playerX == destX && playerY < destY){
  233. 				if(!player.isPlaying("walk_down"))
  234. 					player.animate("walk_down", 100);
  235. 			}
  236.  
  237. 			if(playerX == destX && playerY > destY){
  238. 				if(!player.isPlaying("walk_up"))
  239. 					player.animate("walk_up", 100);	
  240. 			}
  241.  
  242. 			if(playerY == destY && playerX < destX){
  243. 				if(!player.isPlaying("walk_right"))
  244. 					player.animate("walk_right", 100);	
  245. 			}
  246.  
  247. 			if(playerY == destY && playerX > destX){
  248. 				if(!player.isPlaying("walk_left"))
  249. 					player.animate("walk_left", 100);	
  250. 			}
  251. 			//动画位移
  252. 			player.tween({x: destX * cellWidth, y: destY * cellWidth}, 700);
  253. 			//console.log("wayN", player.wayN);
  254. 			if(player.wayN >= ways.length-1){
  255. 				console.log("arrived!");
  256. 				//到达最后一个目标网格坐标，延迟停止行走动画，为了是等tween完成
  257. 				setTimeout(function(){
  258. 					var reels = ["left", "right", "up", "down"];
  259. 					for(var i=0; i<reels.length; i++){
  260. 						if(player.isPlaying("walk_"+reels[i])){
  261. 							player.animate("idle_"+reels[i]);
  262. 						}
  263. 					}
  264. 				}, 800)
  265. 				
  266. 			}	
  267. 			if(player.wayN < ways.length-1){
  268. 				//递增取坐标点
  269. 				player.wayN += 1;	
  270. 			}else{
  271. 				//销毁变量
  272. 				player.ways = undefined;
  273. 				player.wayN = undefined;
  274. 			}
  275. 			//定时器迭代执行走路方法
  276. 			player.walkTimer = setTimeout(function(){
  277. 				walkWay(player);
  278. 			},500);
  279. 			
  280. 		}
  281. 	</script>
  282. </body>
  283. </html>



实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值

举报

选择你想要举报的内容（必选）
  • 内容涉黄
  • 政治相关
  • 内容抄袭
  • 涉嫌广告
  • 内容侵权
  • 侮辱谩骂
  • 样式问题
  • 其他

取消

确定

新手
引导 客服 举报 返回
顶部