超越基礎的巧妙之處：滑鼠與觸控事件

在上一個 Crafty 系列中，您了解了使用鍵盤移動元素的不同方法。雖然鍵盤可以幫助您創建各種遊戲，但在某些情況下需要您控制不同的滑鼠事件以使遊戲更加有趣。例如，考慮一個氣球出現在螢幕上隨機位置的遊戲。如果使用者需要點擊氣球來得分，那麼您肯定需要一個滑鼠組件。

同樣，當您為行動裝置開發遊戲時，Keyboard 元件將沒有任何用處。在這種情況下，您將必須依賴觸控組件來創建遊戲。在本教程中，您將了解 Crafty 中的滑鼠和觸控組件。

滑鼠元件

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() 方法用於將盒子的旋轉點設定為中心。它還可以採用其他值，例如 "左上角"、"右下角" 等。

嘗試將遊標移入和移出演示中的方塊。在框內按住滑鼠按鈕將觸發 MouseDown 事件並將框的顏色變更為紅色。

MouseEvent 物件也作為參數傳遞給所有這些滑鼠事件的回呼函數。它包含與該特定滑鼠事件相關的所有資料。

您也可以使用 mouseButton 屬性檢查使用者點擊了哪個滑鼠按鈕。例如，可以使用 Crafty.mouseButtons.LEFT 來偵測左鍵點擊。同樣，可以使用 Crafty.mouseButtons.MIDDLE 檢測中鍵單擊。

#滑鼠拖曳元件

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中文網其他相關文章！