CraftyJS 学习三 -- Component
CraftyJS 学习三 -- Component
tonglei0429
发布于 2019-07-22 12:24:08
发布于 2019-07-22 12:24:08
自定义组件
下面代码直接创建两个带颜色的矩形组件:
var sq1 = Crafty.e("2D, Canvas, Color")
.attr({x:10, y:10, w:30, h:30})
.color("red");var sq1 = Crafty.e("2D, Canvas, Color")
.attr({x:150, y:100, w:30, h:30})
.color("green");现在我们改用组件的方法创建，首先定义一个组件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.c 有两个参数，第一个是组件名，第二个是组件的方法及属性，当组件被声明成实体，所有的属性及方法都会被复制到实体上，init 方法会被自动执行，remove方法在组件销毁时自动执行。
之后我们再从新创建两个矩形：
var sq1 = Crafty.e("Square")
.place(10, 10)
.color("red");var sq2 = Crafty.e("Square")
.place(150, 100)
.color("green");init方法让代码更简洁，同时 创建 Square 时，Color组件也被自动加入。
为了让place()方法能够连续执行，一定要在方法最后加上返回值
return this事实真相
容器是如何加入到实体中：
- 首先，组件有个代表组件存在的标志
- 然后组件的所有属性及方法被复制，如果有重复的，将会覆盖掉
- 如果是数组或者对象，则复制的是其应用
- 最后，执行init 方法。
共享对象的陷阱
如下代码所示：
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!如果不希望这个对象被共享，请在init方法内创建该属性：
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本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读