专栏首页信息安全小学生CraftyJS 学习二 -- Event

CraftyJS 学习二 -- Event

Event 事件系统

Crafty 使用 Event 来完成消息传递。

基本思想就是,为实体绑定事件,然后在其他地方触发事件,事件被立即执行。

// Create a red squarevar square = Crafty.e("2D, Canvas, Color")
        .attr({x:10,y:10, w:30, h:30})
        .color("blue");// When a "Blush" event is triggered, turn pinksquare.bind("Blush", function() {    // the function will be called in the context of the entity
    this.color("pink")
});// Trigger the event, causing the square to turn pinksquare.trigger("Blush");

上面代码中演示了如何绑定代码并立即触发它。

传递数据

例如,我们定义一个 ChangeColor 事件

square.bind("ChangeColor", function(color) {    this.color(color);
});

square.trigger("ChangeColor", "pink"); // Turn pink

当你使用 trigger 方法触发事件时,第二个参数将作为事件的参数传递到对象中。此外,还可以定义更复杂的参数类型,例如:

// Assume that color is an objectsquare.bind("ChangeColor", function(color) {    this.color(color.r, color,g, color.b);
})// Specify the RGB values corresponding to pinksquare.trigger("ChangeColor", {r:255, g:192, b:203});

解绑事件

用绑定事件的引用去解绑事件,所以当需要解绑时,尽量不要使用匿名方法。

var turnPink = function() { 
    this.color("pink");
}// Bind the function to an eventsquare.bind("Blush", turnPink);// Immediately unbind it!square.unbind("Blush", turnPink);

当然,如果你只希望事件被执行一次,可以使用 one 方法替代 trigger。

// Use the .one() method instead of .bind()square.one("JumpRight", function() {    // Move 10 px to the right
    this.x += 100;
});// If we trigger the event twice, the bound function will be called only the first timesquare.trigger("JumpRight");
square.trigger("JumpRight");

使用内置事件

Crafty 内置了很多事件,常用的如 2D 组件中的 “Move” 事件,每当对象的位置发生变化,这个事件都会被触发,事件参数包含了其移动前得位置。

// Bind a function to the "Move" event// It will log the initial and new x position anytime the entity movessquare.bind("Move", function(oldPosition) {    console.log(oldPosition._x, this.x);
});

square.x = 100; // Will print "10, 100"

在 Grafty API 中,绿色高亮部分都是内置 Crafty 事件

全局事件

我们关心的所有的事件都最终被定位到某个具体对象,同时,事件也可以是全局的,触发它会影响到每一个对象。

// Define two entities at x=5 and x=10var varrick = Crafty.e("2D").attr({x:5});var xhuli = Crafty.e("2D").attr({x:10});// Bind to an event called "Thing"varrick.bind("Thing", function() { this.x += 20; });
xhuli.bind("Thing", function() { this.x += 10; });// Do the thing!// varrick and xhuli will *both* move to the rightCrafty.trigger("Thing");// You can still trigger the same events directly on an entityxhuli.trigger("Thing");

我们也可以直接将事件绑定到 Crafty 上。

Crafty.bind("Thing", function() {    console.log("Crafty does the thing.")
});

这个方法的上下文既是 Crafty 对象本身 (this === Crafty)。

Crafty 对象同时也包括了 Crafty.unbind() 和 Crafty.one() 方法。

"EnterFrame" 时 Crafty 中的一个很重要的事件,以后会做重点介绍。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CraftyJS 学习四 -- 2D Graphics

    很容易吧!我们已经绘制了一个红色的矩形,现在我们要让它动起来,"2D"组件里面有个 rotation 属性,要让它旋转,我们可以通过绑定 "EnterFrame...

    tonglei0429
  • Python变量作用域

      Python 中,程序的变量并不是在哪个位置都可以访问的,访问权限决定于这个变量是在哪里赋值的。

    tonglei0429
  • 学习 Phaser.js HTML5游戏开发-DAY1

    Github: https://github.com/photonstorm/phaser

    tonglei0429
  • selenium webdriver自动化对日期控件的处理

    --------------------------------------------------------------------------------...

    流柯
  • Android技能树 — PopupWindow小结

    关于下拉选择框,估计大家都有很多选择,我在以前的文章:项目需求讨论-HyBrid模式需求改造 上写过下拉框选择这一块,正好用的Spinner。

    青蛙要fly
  • RMAN Catalog创建、配置和管理

    可以vi批量替换,比如:%s#/u01/logs/my#/u01/redologs/a#g替换所有/u01/logs/my为/u01/redologs/a。 ...

    Alfred Zhao
  • Linux LVM逻辑卷配置过程详解(创建,增加,减少,删除,卸载)

    许多Linux使用者安装操作系统时都会遇到这样的困境:如何精确评估和分配各个硬盘分区的容量,如果当初评估不准确,一旦系统分区不够用时可能不得不备份、删除相关数据...

    yaohong
  • 浅谈DES加密算法

    听着music睡
  • Redis技术知识总结之二——Redis线程模型

    redis 内部使用文件事件处理器 (File Event Handler),这个文件事件处理器是单线程的,所以 redis 才叫做单线程的模型。它采用 IO ...

    剑影啸清寒
  • 向量化与HashTrick在文本挖掘中预处理中的体现

    关键字全网搜索最新排名 【机器学习算法】:排名第一 【机器学习】:排名第二 【Python】:排名第三 【算法】:排名第四 前言 在(文本挖掘的分词原理)中,我...

    昱良

扫码关注云+社区

领取腾讯云代金券