Menjadi bijak melebihi asas: Acara tetikus dan sentuhan

Dalam siri Crafty yang lalu, anda belajar tentang cara yang berbeza untuk menggerakkan elemen menggunakan papan kekunci anda. Walaupun papan kekunci boleh membantu anda mencipta pelbagai permainan, sesetengah situasi memerlukan anda mengawal acara tetikus yang berbeza untuk menjadikan permainan lebih menarik. Sebagai contoh, pertimbangkan permainan di mana belon muncul di lokasi rawak pada skrin. Jika pengguna perlu mengklik pada belon untuk mendapatkan mata, maka anda pasti memerlukan komponen tetikus.

Begitu juga, apabila anda membangunkan permainan untuk peranti mudah alih, komponen Papan Kekunci tidak akan berguna. Dalam kes ini, anda perlu bergantung pada komponen sentuhan untuk mencipta permainan anda. Dalam tutorial ini, anda akan belajar tentang komponen tetikus dan sentuhan dalam 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

Komponen tetikus

Mouse komponen digunakan untuk menambah acara asas tetikus pada entiti. Berikut ialah senarai semua acara yang terkandung dalam komponen ini:

• MouseOver: Peristiwa ini dicetuskan apabila tetikus memasuki entiti.
• MouseOut: Peristiwa ini dicetuskan apabila tetikus meninggalkan entiti. 🎜
• MouseDown: Acara ini dicetuskan apabila butang tetikus ditekan pada entiti. 🎜🎜
• MouseUp: Acara ini dicetuskan apabila butang tetikus dilepaskan dalam entiti. 🎜🎜
• Klik: Peristiwa ini dicetuskan apabila butang tetikus diklik dalam entiti. 🎜🎜
• DoubleClick: Acara ini dicetuskan apabila butang tetikus mengklik dua kali pada entiti. 🎜🎜
• MouseMove: Peristiwa ini dicetuskan apabila tetikus bergerak dalam entiti.

🎜Ingat bahawa peristiwa tetikus hanya akan menyala pada entiti jika anda telah menambahkan komponen Mouse pada entiti tersebut. Berikut ialah kod untuk mengikat acara MouseMove pada kotak dalam demo di bawah: 🎜

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");
  });

🎜Selepas kotak terikat pada acara MouseMove, setiap kali tetikus bergerak pada kotak, kotak akan berputar 1 darjah. Kaedah .origin() digunakan untuk menetapkan titik putaran kotak ke tengah. Ia juga boleh mengambil nilai lain, seperti "kiri atas", "kanan bawah", dsb. 🎜 🎜Cuba gerakkan kursor anda masuk dan keluar dari kotak dalam tunjuk cara. Menahan butang tetikus di dalam kotak akan mencetuskan acara MouseDown dan menukar warna kotak kepada merah. 🎜 MouseEvent juga dihantar sebagai parameter kepada fungsi panggil balik semua acara tetikus ini. Ia mengandungi semua data yang berkaitan dengan peristiwa tetikus khusus itu. 🎜 🎜Anda juga boleh menggunakan atribut mouseButton untuk menyemak butang tetikus yang pengguna klik. Contohnya, anda boleh menggunakan Crafty.mouseButtons.LEFT untuk mengesan klik kiri. Begitu juga, anda boleh menggunakan Crafty.mouseButtons.MIDDLE untuk mengesan klik tengah. 🎜🎜🎜 Komponen seret tetikus 🎜 MouseDrag komponen menyediakan entiti dengan acara seret dan lepas tetikus yang berbeza. Walau bagaimanapun, tidak ada gunanya menambah acara ini jika entiti itu sendiri tidak boleh diseret dan digugurkan. Anda boleh menambah fungsi drag-and-drop pada entiti menggunakan komponen Draggable. Komponen ini mendengar acara daripada komponen MouseDrag dan mengalihkan entiti yang diberikan sewajarnya. Komponen MouseDrag ditambah secara automatik pada mana-mana entiti yang mempunyai komponen Draggable. 🎜 🎜 Draggable komponen mempunyai tiga kaedah: .enableDrag(), .disableDrag() dan <code class="inline">.dragDirection() masing-masing mendayakan dan melumpuhkan penyeretan pada entiti. Kaedah ketiga digunakan untuk menetapkan arah seretan. 🎜 🎜Secara lalai, entiti akan bergerak ke mana-mana arah yang kursor bergerak. Walau bagaimanapun, anda boleh menggunakan this.dragDirection({x:0, y:1}) untuk mengekang pergerakan entiti ke arah menegak. Begitu juga, anda boleh menggunakan this.dragDirection({x:1, y:0}) untuk memaksa entiti bergerak hanya dalam arah mendatar. 🎜 🎜Anda juga boleh menentukan arah terus dalam darjah. Sebagai contoh, untuk memindahkan elemen 45 darjah, anda hanya perlu menggunakan this.dragDirection(45) dan bukannya this.dragDirection({x:1 , y:1} ). 🎜 🎜Selain menyeret dan menjatuhkan elemen, anda juga perlu tahu apabila menyeret bermula dan berhenti. Ini boleh dicapai menggunakan acara <code class="inline">StartDrag dan StopDrag. Terdapat juga acara Menyeret yang berlaku apabila entiti diseret. 🎜 🎜Berikut ialah kod untuk menyeret kotak merah dalam demo di bawah: 🎜

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 中为不同的游戏角色设置动画。

Atas ialah kandungan terperinci Menjadi bijak melebihi asas: Acara tetikus dan sentuhan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!