Comment créer pong dans votre jeu de html5

Pas de jeu de HTML5 discussion de développement ne serait complète sans une mention du célèbre jeu Pong. Bien que ce ne fut pas, techniquement, le premier jeu vidéo, il a été le premier à attirer l'attention populaire, et il est de loin l'un des jeux les plus influents jamais réalisés.

Construire la palette de jeu

L'objet de pagaie est assez simple, mais il ya en fait deux palettes avec des comportements différents. Dans cette version du jeu, la palette de gauche est contrôlé par le joueur, et le droit palette est commandé par un ordinateur AI. Un objet de pagaie simple peut servir soit un joueur ou un paddle AI. Le joueur paddle suit juste la souris:

 tPaddle.followMouse = function () {// suit la souris pour le joueur controlthis.setImgAngle (90) -this.setPosition (this.x, scene.getMouseY ()) -} // méthode de followmouse final

Ajouter la stupidité artificielle à votre jeu

Il est effectivement très facile de construire une intelligence artificielle (IA) pour l'adversaire. Il suffit de définir la valeur Y de la palette égale à la valeur de la balle de Y. Cependant, ce sera ennuyeux, parce que l'adversaire ne sera jamais manquer, et sera toujours frapper la balle en plein milieu de la palette, le rendant facile à retourner. Ceci est pas drôle du tout. Donne la pagaie AI certain genre de problèmes d'attention.

L'AI ne devrait pas suivre directement la balle. Au lieu de cela, il doit vérifier si la balle est au-dessus ou au-dessous, et réagir en conséquence.

Deux variables ont été ajoutés pour contrôler le mouvement de la pagaie AI. La CERVEAUX constante est un pourcentage. Si CERVEAUX est fixé à 0,5, la palette va vérifier l'emplacement de la balle que la moitié du temps. Pour un jeu plus facile, réglez le CERVEAUX faible valeur.

L'autre valeur primaire est V_SPEED, ou la vitesse verticale de la palette. Cela indique à quelle vitesse la palette se déplace vers le ballon. Une valeur plus élevée créera un joueur IA plus puissant. Trouver la bonne combinaison de ces deux valeurs pour obtenir le comportement AI vous voulez. Voici le code pour le AutoMove () méthode:

 tPaddle.autoMove = function () {// automatiquement movesthis.setImgAngle (90) - // ne se déplacent pas sur chaque turnif (Math.random () lt; CERVEAUX) {if (this.y> ball.y) {this.setMoveAngle (0) -} else {this.setMoveAngle (180) -} // fin ifthis.setSpeed ​​(V_SPEED) -} // fin si} // fin AutoMove

Construire une balle hors limites rebondir

Alors que le ballon est un sprite en apparence simpliste, il ne possède un comportement intéressant. La balle a un régime de frontière vérification unique. Il rebondit sur le haut et le bas de l'écran, mais si elle laisse les côtés, elle enveloppe.

Si vous ne disposez pas d'un régime limite qui correspond à l'un des modèles standard, vous pouvez simplement écraser le CheckBounds () méthode pour faire ce que vous voulez. (Notez que vous ne devez pas appeler explicitement CheckBounds (). Il est appelée automatiquement par le sprite de mettre à jour() Procédé. Votre version personnalisée de CheckBounds remplace simplement la version intégrée. Voici une variante:

 tBall.checkBounds = function () {// écrasent CheckBounds fonctionnent pour donner // comportement personnalisé // rebondir de haut et bottomif (this.y lt; 0) {this.setDY (this.dy * -1) -} if (this.y> scene.height) {this.setDY (this.dy * -1) -} // envelopper hors de sidesif (this.x lt; 0) {this.setPosition (scene.width - 150, this.y) - // scores informatiques} // fin IFIF (this.x> scene.width) {this.setPosition (150, this.y) - // joueur marque} // fin si} // CheckBounds finaux

Si le ballon touche le haut ou le bas de l'écran, inverti dy pour le faire rebondir. Si elle touche gauche ou à droite de l'écran, déplacez-le vers l'autre côté.

Mettez un peu de spin sur la balle de jeu

Dans les versions traditionnelles de Pong, la balle peut être contrôlée en choisissant où sur la palette pour frapper la balle. Si vous frappez la balle près du haut de la palette, la balle se déplace vers le haut. Si vous frappez la balle près du centre de la palette, il volera à travers l'écran horizontalement, et si vous frappez près du fond, la balle se déplace vers le bas.

 tBall.checkBounce = function (paddle) {// répond à une collision avec la palette donnée // Max et min DyMax = 10Si (this.collidesWith (paddle)) {this.setDX (this.dx * -1) = -dy this.y - paddle.y-dy = ((dy / paddle.height) * 2) -dy * = MAX-this.setDY (dy) -} // fin si} // fin checkBounce

La dx valeur est facile à calculer parce que vous inversez simplement dx à se déplacer dans l'autre sens. La dy La valeur est calculée en déterminant la différence entre la balle de y position et celle de la palette:

1. Déterminer un maximum dy.

   Cette valeur détermine le plus haut niveau de la déviation vous permettez. Si le MAX valeur est fixée à 10, la balle de dy valeur sera -10 au sommet de la palette, 0 au milieu, et 10 en bas de la palette.

2. Inverti dx.

   Si la balle est déplaçant de gauche, multipliez le dx valeur de -1 pour le faire aller à droite. Si ça va bien, la même opération (multiplication par -1), il sera aller à gauche. Toute paddle collision inverse de la balle dx.

3. Trouvez la différence première dans y des valeurs.

   Calculez la distance qui sépare le y valeur de la palette et la balle sont.

4. Normaliser cette valeur.

   Si vous divisez le brut dy valeur par la hauteur de la palette, vous obtiendrez une fourchette comprise entre 0,5 et -.5. Multipliez cette valeur par 2 pour obtenir un -1 à 1 plage.

5. Multiplier la normalisé dy par MAX.

   En multipliant la normalisé dy par la valeur MAX valeur donnera une dy valeur comprise entre -MAX et MAX.

Comment améliorer le jeu Pong

Bien que ce jeu Pong a le comportement de base vers le bas, il est loin d'être prêt pour le jeu réel. Voici quelques choses à considérer ajoutant:

• Ajouter esthétique. Vous pouvez faire beaucoup pour le faire paraître mieux, de personnaliser les palettes pour ajouter des animations à billes et des effets sonores.

• Ajouter scorekeeping. Ajouter la capacité de suivre les scores utilisateur et ordinateur. Ajoutez également un moyen de déterminer la fin de la partie.

• Ajouter des bonus. Modifier la taille de chaque palette, inverser le contrôle du joueur paddle, changer la vitesse de la balle, rendre le ballon à l'occasion invisible, ou inverser l'algorithme de collision balle-raquette pour commencer.

• Tune up l'AI. Il devient assez nerveux quand la balle se déplace sur une trajectoire plat. Voyez si vous pouvez trouver un moyen de lisser ce comportement.