CRAFTYJS study three--Component

Custom components

The following code creates two colored rectangular components directly:

var = crafty.e ("sq1, canvas, Color"). attr ({x:10, y:10, w:30, h:30}). Color ("red"); var sq1 = CRAFTY.E ("The canvas , color "). attr ({x:150, y:100, w:30, h:30}). Color (" green ");

Now we use the method of the component to create, first define a component Crafty.c .

CRAFTY.C ("Square",  {    // this function will be called  when the component is added to an entity    //  so it sets up the things that both our entities had  in common    init: function ()  {         this.addcomponent ("2d, canvas, color");         this.w = 30;        this.h = 30;     },    // our two entities had different positions,      // so we define a method for setting the  position    place: function (x, y)  {         this.x = x;        this.y = y;         // there ' s no magic to method chaining.         // to allow it, we have to return the  entity!        return this;    }})

Crafty.cThere are two parameters, the first is the component name, the second is the method and property of the component, when the component is declared as an entity, all properties and methods are copied to the entity, the Init method is automatically executed, and the Remove method executes automatically when the component is destroyed.

Then we'll create a new two rectangles:

var sq1 = crafty.e ("Square"). Place (Ten). Color ("red"), var sq2 = crafty.e ("Square"). place (n.). Color ("green");

The Init method makes the code more concise, and when you create Square, the color component is automatically added.

In order for the place () method to execute continuously, be sure to add the return value at the end of the method

return this

The truth

How the container is joined to the entity:

• First, the component has a flag that represents the component's presence

• Then all the properties and methods of the component are copied, and if there are duplicates, they will be overwritten.

• If it is an array or an object, it is copied by its application

• Finally, execute the Init method.

Traps for shared objects

As shown in the following code:

CRAFTY.C ("MyComponent", {sharedobject: {a:1, B:2}}), var e1 = crafty.e ("MyComponent"), var e2 = CRAFTY.E ("MyComponent"); E1.SHAREDOBJECT.A = 5;console.log (E2.SHAREDOBJECT.A); Logs 5!

If you do not want this object to be shared, create the property within the Init method:

CRAFTY.C ("MyComponent", {init:function () {this.myobject = {a:1, b:2}; }}); var e1 = crafty.e ("MyComponent"), var e2 = CRAFTY.E ("MyComponent"); e1.myobject.a = 5;console.log (E2.MYOBJECT.A); Logs the original value of 1

CRAFTYJS study three--Component