超越基础的巧妙之处：鼠标和触摸事件-js教程-PHP中文网

超越基础的巧妙之处：鼠标和触摸事件

王林

发布： 2023-09-03 19:29:06

原创

1440 人浏览过

超越基础的巧妙之处：鼠标和触摸事件

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

同样，当您为移动设备开发游戏时，Keyboard 组件将没有任何用处。在这种情况下，您将必须依赖触摸组件来创建游戏。在本教程中，您将了解 Crafty 中的鼠标和触摸组件。

鼠标组件

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

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

请记住，仅当您向实体添加了 Mouse 组件时，鼠标事件才会在实体上触发。以下是将 MouseMove 组件时，鼠标事件才会在实体上触发。以下是将 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() 方法用于将盒子的旋转点设置为中心。它还可以采用其他值，例如 "左上角"、"右下角" 等。

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

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

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

< h2>鼠标拖动组件

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() 方法将实体绑定到 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) 启用多点触控来实现。传递此方法 true 或 false 可打开和关闭多点触控。

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

结论

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

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

以上是超越基础的巧妙之处：鼠标和触摸事件的详细内容。更多信息请关注PHP中文网其他相关文章！