今天就跟大家聊聊有关Crafty js开源html5游戏框架是怎么样的，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
Crafty.js是一个比较简单轻量的Html5游戏框架，个人比较喜欢，是因为它足够简便（如果你只需要制作简单的小游戏，例如微信h6中的各种游戏）。craftyjs将自己定义为针对JavaScript游戏的框架。
craftyjs设计理念
由于框架的定位，craftyjs在设计上提供了一些系统级别支持，例如将canvas和Dom两种渲染方式封装为同一套API，尽量小的文件体积，实体组件系统，显示对象封装，碰撞检测，事件系统，还有很多功能组件模块。所有的模块都依赖于实体组件系统的设计。
在实际测试中，craftyjs在API上的设计思路也是使用起来最为不舒服的一个。
craftyjs怎么用
遗憾的是，Crafty.js的社区活跃的人越来越少，文档和新的版本也对不上号，所以有的API只能是从源码中获取使用方法了。
这次使用他自带的一个RPG示例加工升级而来，先看下大致的样子：
四周的灌木是防止人物越出屏幕，中间的没有碰撞检测，以下是图片素材：
原本示例中是使用按键控制人物四向行走，我将其改成人物自动寻路到点击坐标，这样手机上也能玩了。
首先需要一个A*算法实现，我在网上找了一个，基本可用
window.AStar={};
(function(aStar){
//p1:起始节点[i,j]，p2:最终节点[i,j]p3:地图数据(2d)arr，p4:可以通过的标识
aStar.find_path=function(start,end,map,marker){
varopen=[];
varclose=[];
vars_p=start;
vare_p=end;
varmap_arr=map;
vartra_marker=marker;
varG=0;
varH=0;
varF=0;
//加入起始节点[x,y,G,F,father]
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]);
总之，craftyjs给大家介绍了一些，希望大家能够喜欢。
看完上述内容，你们对Crafty js开源html5游戏框架是怎么样的有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。