Craftyjs开源html5游戏框架是怎么样的-创新互联

今天就跟大家聊聊有关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游戏框架是怎么样的有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。