Crafty js開源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游戲框架是怎么樣的有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。