Tutoriel sur la création d'un jeu de tennis de table simple avec des astuces du didacticiel HTML5_html5

Au fait, ce n'est qu'une simple DÉMO. Je n'ai pas beaucoup réfléchi au gameplay, aux règles du jeu, etc. Si vous souhaitez l'affiner, vous pouvez l'affiner, comme affiner les règles, les changements de jeu, ajouter un son, affiner la détection des objectifs, et encore plus rigoureux . Vérifiez la force du tir, la friction réelle de la table, etc. pour que le jeu ressemble davantage à un jeu. Je te donne juste quelques idées de programmation, prends juste une démo et ce ne sera pas très agréable à jouer~~

Jeu de snooker
Il existe deux catégories dans tout le jeu de snooker, l'une est la balle et l'autre est la ligne de visée auxiliaire. Si vous souhaitez rendre le jeu plus complexe, vous pouvez également extraire une classe de forme pour détecter les collisions entre le ballon, les coins et les buts. Le jeu que j'ai créé utilise la détection de collision murale la plus simple, il n'y a donc pas de détection de collision entre des balles et des formes irrégulières. Si vous souhaitez jouer à des collisions plus complexes, vous pouvez fouiller sur la détection de collision simple Cen An Le discours était. toujours très bon. Bon, procédons étape par étape :

【Balle】

Postez d'abord le code :
[/code]var Ball = function(x, y, ismine){
this.x = x;
this.y = y;
this. ismine = ismine;
this.oldx = x;
this.oldy = y;
this.vx = 0;
this.vy = 0;
this.radius = ballRadius;
this.inhole = false;this.moving = true;
}
Ball.prototype = {
constructor:Ball,
_paint:function(){
      var b = this. ismine ?document.getElementById("wb") : document.getElementById("yb")
if(b.complete) {
ctx.drawImage(b , this.x-this.radius , this.y- this .radius , 2*this.radius , 2*this.radius);
                                                                                  ctx.drawImage(b , this.x-this .radius , this.y-this.radius , 2*this.radius , 2* this.radius);
                                                                                run:function(t){
this.oldx = this.x;
this.oldy = this.y;

this.vx = Math.abs(this.vx)<0.1? 0 : (this.vx>0? this.vx-mcl*t : this.vx mcl*t);
this.vy = Math.abs(this.vy)<0.1? 0 : (this.vy>0? this.vy-mcl*t : this.vy mcl*t);
                                      // this.vx = this.vx> ;0? -mcl*t : mcl*t;
                                                                                                                    

                 this.x = t * this.vx * pxpm;
                this.y = t * this.vy * pxpm;

                if((this.x<50 && this.y<50) || (this.x>370 && this.x<430 && this.y<50) || (this.x > 758 && this .y<50) || (this.x<46 && this.y>490) || (this.x>377 && this.x<420 && this.y>490) || && this.y>490)){
                     this.inhole = true;
                    if(this.ismine){
                        var that ;                         setTimeout(function(){
                            that. x = 202;
                             that.y = toile.hauteur/2;
                            that.vx = 0;
                             that.vy = 0;
                             that.inhole = false;
                          } , 500 )
                     }
                                        document.getElementById("shotNum").innerHTML = ("shotNum").innerHTML) 1
                     }
                 }
                  else {
                     if(this.y > toile.hauteur - (ballRadius tbw) || ceci.y &Lt ; (ballRadius tbw)){
                         this.y = this.y < (ballRadius tbw) ? (ballRadius tbw) : (canvas.height - (ballRadius tbw));
                         this.derectionY = !this.derectionY;
                         this.vy = -this.vy*0.6;
                     }
                     si (this.x > canvas.width - (ballRadius tbw) || this.x < (ballRadius tbw)){
                        this.x = this.x < (ballRadius tbw) ? (ballRadius tbw) : (canvas.width - (ballRadius tbw));
                         this.derectionX = !this.derectionX;
                         this.vx = -this.vx*0.6;
                                                                                                                                                                                                            
this.moving = false;
                    else {

}
}
}[/code]
Attributs de la balle : x, y position de la balle , vx, vy ball vitesse horizontale et vitesse verticale, ismine représente s'il s'agit d'une balle blanche ou d'une autre balle (différentes balles dessinent des images différentes dans la méthode _paint), oldx, oldy sont utilisés pour enregistrer la position de la balle dans la méthode précédente. cadre, mais ils n'ont pas encore été utilisés, cela devrait être utile. Il n'y a pas grand chose à dire sur la méthode _paint. La méthode _run consiste à suivre la position de la balle et à calculer l'incrément de déplacement et l'incrément de vitesse de la balle en fonction du temps de chaque image de la balle. mcl et pxpm sont tous deux constants. , mcl est la force de friction et pxpm est approximativement Calculez le taux de conversion des pixels et de la réalité. . . . Ensuite, il y a la détection de collision. C'est facile à comprendre. Il calcule si la position de la balle dépasse la limite. Si elle dépasse, elle rebondira. Cependant, ce type de détection de collision est très vague. Si vous voulez vraiment créer un jeu, il est recommandé d'utiliser quelque chose de plus compliqué. Il existe également la méthode pour arrêter la balle en fonction de sa vitesse.





Copier le code

Copier le code