CRAFTYJS study three--Component

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.