Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about what the Crafty js open source html5 game framework is like. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Crafty.js is a relatively simple and lightweight Html5 game framework, which I prefer because it is simple enough (if you only need to make simple Mini Game, such as various games in Wechat H6). Craftyjs defines itself as a framework for JavaScript games.

Craftyjs design concept

Due to the positioning of the framework, craftyjs provides some system-level support in design, such as encapsulating canvas and Dom rendering methods into the same set of API, minimizing file volume, entity component system, display object encapsulation, collision detection, event system, and many functional component modules. All modules depend on the design of entity component system.

In the actual test, the design idea of craftyjs on API is also the most uncomfortable to use.

How to use craftyjs

Unfortunately, there are fewer and fewer active people in the Crafty.js community, and the documentation and new versions do not match, so some API can only get usage from the source code.

This time it is upgraded using an example of RPG that he brought with him, so let's take a look at what it looks like:

The shrubs around are designed to prevent characters from getting off the screen, and there is no collision detection in the middle. Here is the picture material:

In the original example, the button is used to control the character to walk in four directions, but I changed it to automatically find the way to the click coordinates, so that I can also play on the phone.

First of all, I need an A* algorithm to implement. I found one on the Internet, which is basically available.

Window.AStar= {}

(function (aStar) {

/ / p1: start node [iMagnej], p2: final node [iMagnej] p3: map data (2d) arr,p4: logo that can be passed

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

/ / add the start node [xmeny pencils Gjorfjung]

Open.push ([Math.abs [0]-sampp [0]) + Math.abs (efolp [1]-sp [1]), null])

In short, craftyjs introduced some to you, I hope you can like it.

After reading the above, do you have any further understanding of the Crafty js open source html5 game framework? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.