了解Crafty中的Mouse和Touch组件

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

同样，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事件并将框的颜色更改为红色。

See the Pen  Mouse Component in Crafty by Monty (@Shokeen)  on CodePen.

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

您还可以使用该 mouseButton 属性检查用户单击了哪个鼠标按钮。例如，可以使用 检测左键单击 Crafty.mouseButtons.LEFT。类似地，可以使用 检测中键单击Crafty.mouseButtons.MIDDLE。

See the Pen  Mouse Component in Crafty - II by Monty (@Shokeen)  on CodePen.

鼠标拖动组件

该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在实体被拖动时触发的事件。

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

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()方法将实体绑定到DraggingandStopDrag方法。 

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

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

See the Pen  MouseDrag Component in Crafty by Monty (@Shokeen)  on CodePen.

触控组件

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

• TouchStart：当实体被触摸时触发此事件。

• TouchMove：当手指在实体上移动时触发此事件。

• TouchCancel：当某些东西破坏了触摸事件时触发此事件。

• TouchEnd：当手指在实体上方抬起或离开实体时触发此事件。

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

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

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

结论

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

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