Beispiel dafür, wie Canvas Tetris implementiert

Ich habe Canvas schon lange nicht mehr verwendet und bin daher durch das Schreiben des kleinen Spiels Tetris wieder mit Canvas vertraut geworden. Wenn Sie über eine bestimmte Canvas-Grundlage verfügen, ist die Implementierung nicht schwierig.

Wenn wir uns die endgültige Benutzeroberfläche des Spiels ansehen, können wir sehen, dass die folgenden Schlüsselfunktionen implementiert werden müssen:

• Das Spielbrett, das ein 12 * 20-Quadrat ist, und ob die Quadratinformationen ausgefüllt sind;
• Beim Bewegen von Blöcken müssen Blöcke die Funktionen Bewegung und Verformung realisieren.

Das gesamte Panel ist ein Koordinatensystem mit der oberen linken Ecke (0,0) als Ursprung, der oberen rechten Ecke (12,0), der unteren linken Ecke (0,20) und der unteren rechten Ecke (12,20). ). Die Koordinatenposition jedes Punktes kann bestimmt werden. Unabhängig davon, ob das Quadrat gefüllt ist, können wir uns jedes Quadrat als Array-Element vorstellen. 0 bedeutet nicht, 1 bedeutet, dass es gefüllt ist. Das 12 * 20-Panel verwendet zwei Array-Ebenen, d. h. es werden 20 Arrays mit einer Länge von 12 implementiert.

 var Maps = [[0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,1,0 ,1,0], ...];

Der Code zum Zeichnen des Panels kann mithilfe der einfachsten Canvas-API implementiert werden.

 //Gitter for(var i=0;i<12;i++){ for(var j=0;j<20;j++){ ctx.fillRect(i*40,j*40,40,40); ctx. StrokeRect(i*40,j*40,40,40); if(this.maps[j][i]==1){//Das Quadrat wurde mit Inhalt gefüllt ctx.save(); ctx.lineWidth=4; ctx.fillStyle='hsla(200,100%,50%,.5)'; j*40,40,40); ctx.StrokeRect(i*40+2,j*40+2,38,38); ctx.restore(); } } } //Border ctx.lineWidth=4; ctx.StrokeStyle='hsla(0,100%,0 %,.3)'; ctx.moveTo(0,0); ctx.lineTo(0,20*40); ctx.lineTo(12*40,20*40); ctx.lineTo(12*40,0); ctx.restore();

Die folgenden 7 Grafiken werden im Spiel verwendet

In Kombination mit dem oben eingeführten Koordinatensystem ist das Array [x1, y1, x2, y2, x3, y3, x4, y4] die Datendarstellung der Koordinaten der vier Punkte in den obigen Grafiken wie folgt:

 var Arr = [[4,0,4,1,5,1,6,1],[4,1,5,1,6,1,6,0],[4,0,5,0,5,1, 6,1],[4,1,5,0, 5,1,6,0],[5,0,4,1,5,1,6,1],[4,0,5,0,6,0,7,0],[5,0, 6,0,5,1,6,1]];

Um den Block zu verschieben, durchlaufen Sie einfach das gesamte Array und fügen Sie den Verschiebungsvektor hinzu. Das ist sehr einfach.

 class Shape { constructionor(m){ this.m = Object.assign([],m); } move(x,y){ // Verschiebung var m = this.m, l = m.length; |0; for (var i=0;i<l;i=i+2){ m[i]+=x; m[i+1]+=y;

Rotation der Blöcke: Zusätzlich zur Bewegung nach links und rechts sowie nach oben und unten drehen sich die Blöcke in Tetris auch, oder? Nach kurzem Nachdenken werden Sie wissen, dass es sich hier nur um eine Matrixtransformation handelt, d. h. jedes Mal wird die Form um 90 Grad um den Mittelpunkt gedreht. Ich verwende den dritten Punkt im Array als Mittelpunkt der Grafiktransformation. Natürlich ist diese Verarbeitung nicht perfekt.

 Klasse Shape { transform(){//Zweidimensionale Matrixtransformation var m =this.m, l = m.length, c = Math.ceil(l/2), x = m[c], y = m[c+ 1], cos = Math.cos(Math.PI/180 * 90), sin = Math.sin(Math.PI/180 * 90); for (var i=0;i<l;i=i+2) { if(i == c) continue; var mx = m[i]- x, my = m[i+1] - y, nx = mx*cos - my*sin, ny = my*cos + mx*sin; m[i]=x+nx; m[i+1]=y+ny } return this;

Es umfasst hauptsächlich die folgenden drei Aspekte

• Die Position des Blocks darf die Beurteilung der Schnittstelle nicht überschreiten;
• Beurteilung, wenn der Block den Boden erreicht oder die Platzierung abgeschlossen ist;
• Spiel über Urteil.

Das Array durchqueren (1) Wenn die y-Koordinate eines Punktes 19 ist, bedeutet dies, dass er den Boden erreicht hat. (2) Informationen über die y+1-Position der Koordinate in der Karte abrufen es ist gefüllt. In beiden Fällen füllen Sie am Ende der Periode des sich bewegenden Blocks einfach die Koordinaten des Blocks in das den Karten entsprechende Array ein.

Wenn y + 1 der Koordinate ausgefüllt wurde und die aktuelle Koordinate kleiner als 1 ist, sich also bereits oben auf der Schnittstelle befindet, ist das Spiel beendet.

 var isEnd = false,isOver=false,x,y;for(var i=0,sl=that.shape.m.length;i<sl;i=i+2){ x=that.shape.m[i ]; y=that.shape.m[i+1]; if(y >= 19){ // Unten isEnd = true;break; 1 ){ // Die y+1-Position wurde besetzt isEnd = true; if(y <= 1){isOver=true;} // Das Spiel ist vorbei break }}

Am Ende des Blockbewegungszyklus wird überprüft, ob jede Ebene voll ist, und die Verarbeitung erfolgt, nachdem das Quadrat voll ist. Wenn alle Elemente eines bestimmten Arrays 1 sind, bedeutet dies, dass das Raster voll ist. Löschen Sie dann das Array und verschieben Sie gleichzeitig ein Array mit jedem Element von 0 an den Kopf der Liste.

 checkPoint(){ var that = this, maps = that.maps; for(var i=0,l=maps.length;i<l;i++){ if(Math.min.apply(null,maps[i]) == 1){// Zeigt an, dass die Ebene voll ist that.maps.splice(i,1); that.score+=10; Erhöhen Sie die Punktzahl that.maps.unshift([0,0,0,0,0,0,0,0,0,0,0,0]);

Die Hauptsache besteht darin, das Keydown-Ereignis zu binden. Es ist zu beachten, dass die Linksverschiebungs- und Rechtsverschiebungsereignisse eine Grenzbeurteilung beinhalten.

 bindEvent(){ var that = this; document.addEventListener('keydown',function(e){ switch(e.keyCode){ case 13: //enter cancelAnimationFrame(that.timer); that.init().update( ); break; case 80: //p that.pause = !that.pause; //down that.d = 0.5; //left var over = false, maps = that.maps, shape = that.shape, m = shape.m for(var i=0,l=m.length;i<l;i=i+2){ if(m[i]<=0 || maps[m[i+1]][m[i]-1] == 1){ over = true;break } } if(!over) shape.move( -1,0); Fall; 39: //right var over = false, shape = that.shape, maps = that.maps, m = shape.m; for(var i=0,l=m.length;i<l;i=i+2 ){ if(m[i]>=11 || maps[m[i+1]][m[i]+1] == 1){ over = true;break } } if(!over) shape; move(1,0); break; Fall 32: //space that.shape.transform(); break;}

Die grundlegendsten Funktionen von Tetris sind hier implementiert, funktionale Punkte wie Levels sind jedoch nicht implementiert. Gleichzeitig weist die Demo noch Mängel auf, die korrigiert werden müssen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.