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给大家介绍了一些，希望大家能够喜欢。