Devenir intelligent au-delà des bases : événements liés à la souris et au toucher

Dans la dernière série Crafty, vous avez découvert différentes façons de déplacer des éléments à l'aide de votre clavier. Bien que le clavier puisse vous aider à créer une variété de jeux, certaines situations nécessitent que vous contrôliez différents événements de souris pour rendre le jeu plus intéressant. Par exemple, considérons un jeu dans lequel des ballons apparaissent à des endroits aléatoires sur l'écran. Si l'utilisateur doit cliquer sur des ballons pour marquer des points, alors vous avez absolument besoin d'un composant souris.

De même, lorsque vous développez un jeu pour appareils mobiles, Keyboard les composants ne seront d'aucune utilité. Dans ce cas, vous devrez vous appuyer sur des composants tactiles pour créer votre jeu. Dans ce didacticiel, vous découvrirez les composants de la souris et du toucher dans Crafty.

Composant souris

Mouse Le composant est utilisé pour ajouter des événements de souris de base aux entités. Voici une liste de tous les événements contenus dans ce composant :

• MouseOver : Cet événement est déclenché lorsque la souris entre à l'intérieur de l'entité.
• MouseOut : Cet événement est déclenché lorsque la souris quitte l'entité.

• MouseDown : Cet événement est déclenché lorsque le bouton de la souris est enfoncé sur l'entité.

• MouseUp : Cet événement est déclenché lorsque le bouton de la souris est relâché au sein de l'entité.

• Click : Cet événement est déclenché lorsque le bouton de la souris est cliqué au sein de l'entité.

• DoubleClick : Cet événement est déclenché lorsque le bouton de la souris double-clique sur une entité.

• MouseMove : Cet événement est déclenché lorsque la souris se déplace au sein de l'entité.

N'oubliez pas que les événements de souris ne se déclencheront sur les entités que si vous leur avez ajouté le composant Mouse 组件时，鼠标事件才会在实体上触发。以下是将 MouseMove. Voici le code pour lier l'événement MouseMove à la case dans la démo ci-dessous :

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

La boîte est reliée MouseMove 事件后，鼠标在盒子上每移动一次，盒子就会旋转 1 度。 .origin() 方法用于将盒子的旋转点设置为中心。它还可以采用其他值，例如 "左上角"、"右下角" etc.

Essayez de déplacer votre curseur dans et hors des cases de la démo. Maintenir le bouton de la souris enfoncé à l'intérieur de la boîte déclenchera l'événement MouseDown et changera la couleur de la boîte en rouge.

L'objet MouseEvent est également passé en paramètre aux fonctions de rappel de tous ces événements souris. Il contient toutes les données liées à cet événement de souris spécifique.

Vous pouvez également utiliser mouseButton 属性检查用户单击了哪个鼠标按钮。例如，可以使用 Crafty.mouseButtons.LEFT 检测左键单击。同样，可以使用 Crafty.mouseButtons.MIDDLE pour détecter les clics du milieu.

Composant de déplacement de la souris

MouseDrag组件提供了具有不同拖放鼠标事件的实体。但是，如果实体本身无法拖放，那么添加这些事件就没有多大意义。您可以使用 Draggable 组件向实体添加拖放功能。该组件侦听来自 MouseDrag 组件的事件并相应地移动给定的实体。 MouseDrag 组件会自动添加到具有 Draggable Toute entité du composant.

Draggable 组件具有三个方法：.enableDrag()、.disableDrag() 和 .dragDirection().Les deux premières méthodes activent et désactivent respectivement le glisser-déposer sur les entités. La troisième méthode est utilisée pour définir la direction du déplacement.

Par défaut, les entités se déplaceront dans n'importe quelle direction dans laquelle le curseur se déplace. Cependant, vous pouvez utiliser this.dragDirection({x:0, y:1}) 将实体的运动限制为垂直方向。同样，您可以使用 this.dragDirection({x:1, y:0}) pour forcer l'entité à se déplacer uniquement dans le sens horizontal.

Vous pouvez également spécifier la direction directement en degrés. Par exemple, pour déplacer un élément de 45 degrés, utilisez simplement this.dragDirection(45) 而不是 this.dragDirection({x:1, y:1} ).

En plus de glisser-déposer des éléments, vous devez également savoir quand le glisser commence et s'arrête. Cela peut être fait en utilisant l'événement StartDrag 和 StopDrag 事件来完成。还有一个 Dragging, qui est déclenché lorsqu'une entité est déplacée.

Voici le code pour faire glisser la case rouge dans la démo ci-dessous :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!