Tutorial zum Erstellen eines einfachen Tischtennisspiels mit HTML5_html5-Tutorial-Tipps

Übrigens ist dies nur eine einfache DEMO. Ich habe nicht viel über das Gameplay, die Spielregeln usw. nachgedacht. Wenn Sie daran interessiert sind, es zu verfeinern, können Sie es verfeinern, z. B. durch Verfeinern der Regeln, Spielwechsel, Hinzufügen eines Sounds, Verfeinern der Zielerkennung und noch strenger . Überprüfen Sie die Stärke des Schlags, die tatsächliche Reibung des Tisches usw., um das Spiel mehr wie ein Spiel zu gestalten. Ich gebe Ihnen nur einige Programmierideen. Nehmen Sie einfach eine Demo und das Spielen wird nicht sehr angenehm sein ~~

Snooker-Spiel
Es gibt zwei Kategorien im gesamten Snooker-Spiel, eine ist der Ball und die andere ist die Hilfsziellinie. Wenn Sie das Spiel komplexer gestalten möchten, können Sie auch eine Formklasse abstrahieren, um Kollisionen zwischen dem Ball und Ecken und Toren zu erkennen. Das von mir erstellte Spiel verwendet die einfachste Wandkollisionserkennung, sodass es keine Kollisionserkennung zwischen Bällen und unregelmäßigen Formen gibt. Wenn Sie komplexere Kollisionen spielen möchten, können Sie über die einfache Kollisionserkennung stöbern immer noch sehr gut. Okay, machen wir es Schritt für Schritt:

【Ball】

Veröffentlichen Sie zuerst den 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 = {
constructionor: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);
                                                               > 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<420 && this.y>490) || && this.y>490)){
                    this.inhole = true;
                    if(this.ismine){
                        var that =. this;
                         setTimeout(function(){
                             das. x = 202;
                          that.y = canvas.height/2;
                          that.vx =. 0;
                            that.vy = 0;
                             that.inhole = false;
                        } , 500 )
                    }
                     else {
                      shotNum").innerHTML) 1
                     }
                 }
                 else {
                     if(this.y > canvas.height - (ballRadius tbw) || this.y < (ballRadius tbw)){
                         this.y = this.y < (ballRadius tbw) ? (ballRadius tbw) : (canvas.height - (ballRadius tbw));
                        this.derectionY = !this.derectionY;
                        this.vy =. -this.vy*0.6;
                     }
                     wenn (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]
Ballattribute: x-, y-Ballposition , vx, vy horizontale Geschwindigkeit und vertikale Geschwindigkeit des Balls, ismine stellt dar, ob es sich um einen weißen Ball oder einen anderen Ball handelt (verschiedene Bälle zeichnen unterschiedliche Bilder in der _paint-Methode), oldx, oldy werden verwendet, um die Position des Balls im vorherigen zu speichern Rahmen, aber sie wurden noch nicht verwendet, es sollte nützlich sein. Über die _paint-Methode gibt es nicht viel zu sagen. Die _run-Methode besteht darin, die Position des Balls zu verfolgen und das Verschiebungsinkrement und das Geschwindigkeitsinkrement des Balls basierend auf der Zeit jedes Frames des Balls zu berechnen , mcl ist die Reibungskraft und pxpm ist ungefähr Berechnen Sie das Pixel- und Realitätsumwandlungsverhältnis. . . . Dann gibt es eine Kollisionserkennung, die leicht zu verstehen ist. Sie berechnet, ob die Position des Balls die Grenze überschreitet. Diese Art der Kollisionserkennung ist jedoch sehr locker. Wenn Sie wirklich ein Spiel erstellen möchten, wird empfohlen, etwas Komplizierteres zu verwenden. Es gibt auch die Methode, den Ball entsprechend seiner Geschwindigkeit zu stoppen.





Code kopieren

Code kopieren