Comment ajouter des collisions à votre jeu HTML5 - les nuls

Les choses les plus intéressantes dans les jeux vidéo HTML5 se produisent lorsque les sprites se heurtent et s'entrechoquent. Les moteurs de jeu ont normalement une sorte d'outil pour tester si deux sprites se chevauchent. Ceci est appelé détection de collision , et cela peut être fait de plusieurs façons. Cet exemple utilise le schéma standard bounding rectangle . Ce n'est pas parfait, mais il est très facile à mettre en œuvre et est couramment utilisé.

Comment configurer les collisions de rectangle de délimitation dans votre jeu

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

Dans la colTest. Exemple html, l'utilisateur déplace la créature avec la souris, et vous recevrez un message lorsque la créature touchera la boîte au milieu de l'écran.

colTest. html checkCollisions (); boîte. mettre à jour(); critter. update ();} // mise à jour de fin; function checkCollisions () { if (case à cocher: collidesWith (critter)) { sortie. innerHTML = "Collision"; } else { sortie. innerHTML = "Aucune collision"; } // fin si } // fin checkCollisions vide

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

1. Masque le curseur normal de la souris.

   Lorsque vous voulez faire suivre un autre objet à la souris, vous voulez normalement cacher le curseur normal. Dans SimpleGame, utilisez le jeu. HideCursor () méthode pour cacher le curseur de la souris à l'intérieur de l'écran de jeu.

2. Créez plus d'un sprite.

   Il faut deux pour tanguer, ou entrer en collision. Dans cet exemple, la boîte restera stationnaire, et une créature qui suit la souris.

3. Donnez à la créature une méthode followMouse ().

   Dans cet exemple, la créature suit la souris. Commencez par créer une méthode followMouse ().

4. Détermine la position de la souris.

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

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

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

6. Appelez la méthode followMouse () de la créature à chaque image.

   Comme d'habitude, la fonction update () est l'endroit où vous placez du code qui devrait arriver de manière répétée.

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

Cela signifie que vous ne vérifiez pas réellement si les images entrent en collision, mais si les rectangles entourant les images entrent en collision. Dans cet exemple, la différence est mineure, mais vous verrez parfois des erreurs significatives avec ce mécanisme, notamment avec des éléments longs et fins. Pendant la rotation d'un sprite, la taille du rectangle englobant peut changer.

Collisions basées sur la distance pour votre jeu

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

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

• Le seuil de collision peut être modifié. Vous pouvez définir la sensibilité souhaitée. Définissez un grand rayon de collision pour des collisions faciles et un plus petit lorsque vous voulez que les collisions ne soient déclenchées que lorsque les sprites sont très proches les uns des autres.

La bibliothèque simpleGame L'objet Sprite a une méthode distanceTo () qui calcule la distance d'une image à l'autre. Vous pouvez voir un exemple de ce code dans la distance. Exemple html:

distance. jeu html var; var boîte; var critter; sortie var; Fonction init () {game = new Scène (); Jeu. hideCursor (); box = new Sprite (jeu, "simpleBox.png", 50, 50); critter = nouveau Sprite (jeu, "critter.gif", 50, 50); sortie = document. getElementById ("sortie"); // Donne une boîte de position fixe. setPosition (200, 150); boîte. setSpeed ​​(0); critter. setPosition (100, 100); critter. setSpeed ​​(0); // Critère contrôlée par la créature de la souris. followMouse = function () {this. setX (document. mouseX); ce. setY (document. mouseY);} // fin du jeu followMouse. start ();} // fin de la fonction d'initialisation update () {game. clair(); critter. followMouse (); checkDistance (); boîte. mettre à jour(); critter. update ();} // mise à jour de fin; function checkDistance () { dist = boîte. distanceTo (critter); sortie (dist <50) {. innerHTML = "Collision:" + dist; } else { sortie. innerHTML = "Pas de collision:" + dist; } // fin si } // fin checkDistance vide

La méthode de collision basée sur la distance est très similaire à la version du rectangle englobant. Créez une fonction checkDistance () qui agira exactement comme l'ancienne méthode checkCollisions (). Voici les étapes pour ce qui se passe dans checkDistance:

1. Trouvez la distance entre les deux sprites.

   Utilisez la méthode distanceTo () du sprite pour déterminer la distance entre les deux sprites.

2. Si la distance est inférieure à un certain seuil, comptez-la comme une collision.

   En règle générale, vous devez utiliser la largeur de l'image-objet la plus petite comme point de départ pour un seuil de collision, mais vous pouvez l'ajuster pour rendre les collisions plus ou moins probables.

3. Signaler l'état de collision.

   Dans cet exemple, il suffit d'imprimer "collision" ou "pas de collision", mais dans un jeu réel, les collisions sont déclencheurs d'autres actions: augmentation du score, diminution du nombre de vies, modification de la vitesse ou de la position des éléments en collision, ou peu importe. (Heureusement, cela implique des explosions.)