Comment ajouter des collisions à votre jeu de html5

Les choses les plus intéressantes dans les jeux vidéo HTML5 se produisent lorsque les sprites pif et entrent en collision dans l'autre. Moteurs de jeux ont normalement une sorte d'outil pour tester si deux sprites se chevauchent. C'est appelé Détection de collision

, et cela peut se faire de plusieurs façons. Cet exemple utilise la norme rectangle délimitant régime. Il est pas parfait, mais il est très facile à mettre en œuvre et est couramment utilisé.

Comment mettre en place bondissant collisions rectangle dans votre jeu

Jeter un coup d'œil à colTest.html et vous verrez un exemple simple.

Dans le colTest.html par exemple, l'utilisateur déplace la créature avec la souris, et vous obtiendrez un message lorsque la créature est en contact avec la boîte au milieu de l'écran.

vide

Un certain nombre de choses intéressantes se passent dans ce code:

1. Cacher le curseur de la souris normale.

   Lorsque vous allez avoir un autre objet suive la souris, vous voulez normalement pour cacher la flèche curseur normal. Dans simpleGame, Utilisez le game.hideCursor () méthode pour cacher le curseur de la souris à l'intérieur de l'écran de jeu.

2. Créer plus d'un sprite.

   Il faut être deux pour danser le tango, ou entrer en collision. Dans cet exemple, la boîte reste stationnaire, et une créature qui suit la souris.

3. Donner la créature une followmouse () Procédé.

   
   
   
   
   

   Dans cet exemple, vous avez la créature suivre la souris. Commencez par créer un followmouse () Procédé.

4. Déterminer la position de la souris.

   La position de la souris est déterminée (en simpleGame.js) avec le document.mouseX et document.mouseY propriétés.

5. Copiez la position de la souris à la position de créature.

   Utilisez x la position de la souris pour définir la position x de la créature, et répéter avec y.

6. Appelez la créature de followmouse () méthode chaque trame.

   Comme d'habitude, la mettre à jour() fonction est où vous mettez le code qui devrait se produire à plusieurs reprises.

Si vous jouez avec la colTest.html page, vous remarquerez probablement que les collisions ne sont pas exactes. Il est possible d'avoir un registre de collision, même lorsque la créature ne touche effectivement la boîte. Ceci est important car simpleGame utilise un programme appelé Boîte englobante collisions.

Cela signifie que vous n'êtes pas en train de vérifier pour voir si les images entrent en collision, mais si les rectangles autour des images entrent en collision. Dans cet exemple, la différence est mineure, mais vous verrez parfois des erreurs significatives avec ce mécanisme, en particulier avec des éléments qui sont longues et minces. Comme une image-objet en rotation, la taille du rectangle englobant peut changer.

Collisions basé sur la distance pour votre jeu

Une autre forme de détection de collision, appelée cercle englobante collisions, est disponible. Avec ce mécanisme, vous calculez tout simplement la distance entre le centre de deux sprites, et si cette valeur est inférieure à un certain seuil, vous le considérez une collision. Cette approche présente deux avantages:

• La distance de collision est constante. La distance entre les centres de l'image ne changera pas lorsque les images sont tournées, même si les images changent de taille.

• Le seuil de collision peut être modifiée. Vous pouvez régler la sensibilité tout vous voulez. Définir un rayon de collision grande pour les collisions facile et une plus petite quand vous voulez collisions à être déclenchées uniquement lorsque les sprites sont très proches les uns des autres.

La simpleGame bibliothèque Lutin objet a une distanceTo () Procédé qui calcule la distance entre une image-objet à l'autre. Vous pouvez voir un exemple de ce code dans la distance.html exemple:

vide

La méthode de collision basé sur la distance est très similaire à la version délimitation rectangle. Créer un checkDistance () fonction qui va agir comme le vieux checkCollisions (). Voici les étapes à suivre pour ce qui se passe dans checkDistance:

1. Trouver la distance entre les deux sprites.

   Utilisez le sprite de distanceTo () Procédé pour déterminer la distance entre les deux images-objets.

2. Si la distance est inférieure à un certain seuil, le considérer comme une collision.

   En général, vous devez utiliser la largeur de la plus petite sprite comme un point de départ pour un seuil de collision, mais vous pouvez ajuster ce faire collisions plus ou moins probable.

3. Signaler le statut de collision.

   Dans cet exemple, il suffit d'imprimer “ collision ” ou “ pas de collision, ” mais dans un vrai jeu, les collisions sont des déclencheurs pour d'autres actions: augmenter le score, en diminuant le nombre de vies, changer la vitesse ou la position des éléments sont entrés en collision, ou que ce soit. (Heureusement, il implique des explosions.)