Vidéo: Les formulaires - Part IV - Chap 2 (Créez votre site web avec HTML5 et CSS3) 2025
Une fois que les sprites commencent à bouger, il y a toujours la possibilité qu'ils quittent les limites de l'écran. En règle générale, les développeurs de jeux HTML5 répondent de l'une des cinq façons suivantes: envelopper, rebondir, arrêter, mourir ou continuer. La bibliothèque simpleGame a une routine de vérification des limites qui vous permet de spécifier lequel de ces comportements par défaut utiliser. La propriété boundAction du sprite indique quelle action doit être utilisée. Vous pouvez utiliser le vérificateur de limites pour effectuer les opérations suivantes:
-
Déterminer les bordures.
Les bordures sont déterminées par la largeur du canevas.
-
Vérifiez que l'utilisateur ne se trouve pas sur une bordure.
Ensuite, une autre série de variables contenant des valeurs booléennes indiquant si l'image-objet est hors de l'une des frontières a été créée: offRight, offLeft, offTop et offBottom. Utilisez les instructions basic if pour déterminer si l'image-objet est désactivée de l'une de ces façons.
-
Déterminer l'action de limite.
Utilisez une instruction simple if pour déterminer quelle action de limite est actuellement définie pour l'image-objet.
-
Si boundAction est WRAP:
Changez la variable x ou y du côté opposé, mais laissez les valeurs dx et dy seules.
-
Si boundAction est BOUNCE:
Inverser dy si l'image-objet rebondit en haut ou en bas, et dx si l'image-objet rebondit sur la gauche ou la droite. Il n'est pas nécessaire de changer x ou y directement.
-
Si boundAction est STOP:
Réglez simplement la vitesse sur zéro, quelle que soit la limite.
-
Si boundAction est DIE:
Fixe la vitesse à zéro et appelle la méthode hide () de l'image-objet. Cela entraînera la disparition du sprite et ne sera plus pris en compte dans les calculs de collision.
-
Toute autre boundAction est considérée comme CONTINUE.
Aucune action n'est nécessaire ici car l'image-objet continuera à se déplacer même si elle n'est pas visible. Si tel est l'effet désiré, vous devriez d'une manière ou d'une autre indiquer à l'utilisateur où se trouve l'image-objet, ou fournir un moyen pour que l'image-objet revienne.
Voici une partie du code de la routine de vérification de collision:
offRight = false; offLeft = faux; offTop = faux; offBottom = faux; if (this. x> rightBorder) {offRight = true;} si (this.x bottomBorder) {offBottom = true;} si (this.y <0) {offTop = true;} if (this. boundAction == WRAP) {if (offRight) {this. x = leftBorder;} // fin si if (offBottom) {this. y = topBorder;} // fin si if (offLeft) {this. x = rightBorder;} // fin si if (offTop) {this. y = bottomBorder;}} else if (this. boundAction == BOUNCE) {if (horsTop || offBottom) {this.dy * = -1; ce. calcSpeedAngle (); ce. imgAngle = ceci. moveAngle;} if (offLeft || offRight) {this. dx * = -1; ce. calcSpeedAngle (); ce. imgAngle = ceci. moveAngle;}} else if (this. boundAction == STOP) {if (offLeft || offDroit || offTop || offBottom) {this. setSpeed (0);}} else si (this. boundAction == DIE) {if (offLeft || offDroite || offTop || offBottom) {this. cacher(); ce. setSpeed (0);}} else {// continue à exister}} // end checkbounds
Si vous souhaitez modifier l'action boundary d'une image-objet dans simpleGame, vous pouvez utiliser la méthode setBoundAction () pour cela.
Notez que quelques situations peuvent nécessiter des comportements différents. Par exemple, vous voudrez peut-être envelopper les côtés, mais arrêtez-vous en haut ou en bas. Si vous avez besoin d'un comportement plus spécifique, créez simplement une nouvelle méthode checkBounds () pour votre sprite. Cependant, vous devrez vérifier toutes les limites car votre nouveau checkBounds () remplacera complètement celui créé dans simpleGame.
