超越基本的技巧：鼠标和触摸事件

在上一个Crafty系列文章中，您了解了使用键盘移动元素的不同方式。 尽管键盘可以帮助您创建各种游戏，但在某些情况下，您需要控制不同的鼠标事件以使游戏更有趣。 例如，考虑一个游戏，气球在屏幕上的随机位置出现。 如果用户需要单击气球以得分，则肯定需要一个Mouse组件。

同样，在为移动设备开发游戏时，“ Keyboard组件将无用。 在这种情况下，您将不得不依靠Touch组件来创建游戏。 在本教程中，您将了解Crafty中的Mouse和Touch组件。

鼠标组件

Mouse组件用于将基本鼠标事件添加到实体。 以下是此组件中包含的所有事件的列表：

• MouseOver ：当鼠标进入实体内部时触发此事件。
• MouseOut ：鼠标离开实体时触发此事件。
  
• MouseDown ：在实体上按下鼠标按钮时触发此事件。
  
• MouseUp ：在实体内部释放鼠标按钮时触发此事件。
  
• Click ：在实体内单击鼠标按钮时触发此事件。
  
• DoubleClick ：在实体上双击鼠标按钮时触发此事件。
  
• MouseMove ：当鼠标在实体内移动时触发此事件。

请记住，只有将Mouse组件添加到实体上时，鼠标事件才会在实体上触发。 这是一些将MouseMove事件绑定到下面的演示框中的代码：

var Box = Crafty.e("2D, Canvas, Color, Mouse")
  .attr({
    x: 200,
    y: 100,
    w: 200,
    h: 200
  })
  .color("black")
  .origin("center")
  .bind('MouseMove', function() {
    this.rotation += 1;
  });

将框绑定到MouseMove事件后，鼠标在框上的每一次移动都会将其旋转1度。 .origin()方法已用于将框的旋转点设置为居中。 它还可以采用其他值，例如"top left" ， "bottom right"等。

尝试将光标移入和移出演示框。 按住框内的鼠标按钮将触发MouseDown事件，并将框的颜色更改为红色。

MouseEvent对象也作为参数传递给所有这些鼠标事件的回调函数。 它包含与该特定鼠标事件有关的所有数据。

您还可以使用mouseButton属性检查用户单击了哪个鼠标按钮。 例如，可以使用Crafty.mouseButtons.LEFT检测到左键单击。 同样，可以使用Crafty.mouseButtons.MIDDLE来检测中间按钮的单击。

MouseDrag组件

MouseDrag组件为实体提供了不同的拖放鼠标事件。 但是，如果实体本身不能拖放，添加这些事件将没有多大意义。 您可以使用Draggable组件将拖放功能添加到实体。 该组件侦听MouseDrag组件的事件，并相应地移动给定的实体。 MouseDrag组件会通过Draggable组件自动添加到任何实体。

Draggable组件具有三种方法： .enableDrag() .disableDrag()和.dragDirection() 。 前两种方法分别启用和禁用对实体的拖动。 第三种方法用于设置拖动方向。

默认情况下，实体将沿光标移动的任何方向移动。 但是，可以使用this.dragDirection({x:0, y:1})限制实体在垂直方向上的运动。 同样，可以使用this.dragDirection({x:1, y:0})强制实体仅在水平方向上移动。

您也可以直接以度为单位指定方向。 例如，要将元素移动45度，只需使用this.dragDirection(45)代替this.dragDirection({x:1, y:1}) 。

除了在周围拖放元素之外，还必须知道拖动何时开始和停止。 这可以通过使用StartDrag和StopDrag事件来完成。 还有一个Dragging事件，在Dragging实体时会触发该事件。

这是在下面的演示中拖动红色框的代码：

var hBox = Crafty.e("2D, Canvas, Color, Draggable")
  .attr({
    x: 50,
    y: 50,
    w: 50,
    h: 50
  })
  .color("red")
  .dragDirection(0)
  .bind('Dragging', function(evt) {
    this.color("black");
  })
  .bind('StopDrag', function(evt) {
    this.color("red");
  });

设置盒子的宽度，高度和位置之后，我使用了.dragDirection(0)来限制盒子在水平方向上的移动。 我也有使用.bind()方法将实体绑定到Dragging和StopDrag方法。

将颜色更改为黑色可为用户提供当前正在拖动实体的指示。 您也可以使用StartDrag事件代替“ Dragging事件，因为实体的颜色只需更改一次。 当必须连续更改或监视要拖动的实体的属性时，“ Dragging事件更合适。 例如，您可以使用以下代码在到达所需位置后禁用在框上的拖动。

hBox.bind('Dragging', function(evt) {
    this.color("black");
    if(this.x > 300) {
      this.disableDrag();
    }
});

触控组件

如果需要访问实体的与触摸相关的事件，则可以使用“ Touch组件。 该组件使您可以访问四个不同的事件：

• TouchStart ：触摸实体时触发此事件。
• TouchMove ：当手指在实体上移动时触发此事件。
• TouchCancel ：当某些事件中断触摸事件时触发此事件。
• TouchEnd ：当手指悬停在实体上或离开实体时触发此事件。

前三个事件可以访问TouchEvent对象，该对象包含有关触摸的所有信息。

某些游戏或项目可能需要您检测多个触摸。 这可以通过使用Crafty.multitouch(true)启用多点触摸来Crafty.multitouch(true) 。 传递此方法的true或false打开和关闭多点触摸。

在项目中使用Touch组件之前，您应该知道它当前与Draggable组件不兼容。

结论

完成本教程后，您现在应该能够正确处理不同的鼠标事件或轻松创建基于拖放的游戏。 请记住，在本教程中我使用的是Crafty版本0.7.1，并且这些演示可能不适用于该库的其他版本。

在下一个教程中，您将学习如何使用Sprite表格为Crafty中的不同游戏角色设置动画。

翻译自: https://code.tutsplus.com/tutorials/crafty-beyond-the-basics-mouse-and-touch-events--cms-28041