Beispielcode für die WebGL-3D-Version von Tetris basierend auf HTML5

Zusammenfassung: 2D-Tetris wurde von den Leuten schlecht gespielt, also habe ich aus einer Laune heraus eine 3D-Spielekonsole zum Spielen von Tetris entwickelt. . . Die Grundidee der Implementierung besteht darin, zunächst das Tetris-Minispiel in 2D zu implementieren, dann mithilfe der 3D-Modellierungsfunktion ein 3D-Arcade-Modell zu erstellen und schließlich das 2D-Minispiel in das 3D-Modell einzufügen.

(PS: Der letzte Erweiterungsteil realisiert die Kombination aus Video und 3D-Modell)

http://www.hightopo.com/demo/tetris/

Schließe zunächst das 2D-Minispiel ab

Bei der Überprüfung der offiziellen Dokumente habe ich erfahren, dass die Komponentenparameter von HT im Objekt ht.DataModel () gespeichert sind und nach dem Laden des Datenmodells in der Ansicht verschiedene Spezialeffekte angezeigt werden.

 gameDM = new ht.DataModel(); //Initialisieren Sie das Datenmodell g2d = new ht.graph.GraphView(gameDM); //Initialisieren Sie die 2D-Ansicht g2d.addToDOM(); //Erstellen Sie eine Ansicht auf der Seite

Beginnen Sie mit der Erstellung von Spielmodellen

Der erste Schritt besteht darin, einen Rahmen für das Spiel zu schaffen und den Umfang des Spiels zu definieren. Im Dokument können wir erkennen, dass ht.Node die Basisklasse für graphView zum Rendern von Knotenprimitiven ist. Neben der Anzeige von Bildern kann es auch eine Vielzahl vordefinierter Grafiken unterstützen. Daher werde ich diese Klasse verwenden, um vier Rechtecke zu erstellen und diese als Rahmen für das Spiel zu verwenden.

 var lineNode = new ht.Node();lineNode.s({ shape: rect, //Rechteck shape.background: #D8D8D8, //Hintergrundfarbe festlegen shape.border.width: 1, //Randbreite 1 shape. border .color: #979797 // Rahmenfarbe}); lineNode.setPosition(x, y); 0 Die Koordinaten der Grundelemente zeigen auf ihre Mittelpositionen lineNode.setSize(width, height); // Legen Sie die Breiten- und Höhenattribute der Grundelemente fest gameDM.add(lineNode); // Fügen Sie die eingestellten Grundelementinformationen zum Datenmodell hinzu

Nachdem wir x:552, y:111, width:704, height:22 eingestellt haben, können wir die erste Grafik erhalten:

Die Oberkante des Randes ist bereits vorhanden. Jetzt erstellen wir drei weitere Seiten, um einen Rahmen zu bilden:

 x:211, y:562, Breite:22, Breite:880x:893, y:562, Breite:22, Breite:880x:552, y:1013, Breite:704, Breite:22

Das Ergebnis ist wie folgt:

Die Ränder sind grundsätzlich fertig. Beim Durchsuchen habe ich festgestellt, dass 4 Ränder gezogen werden können. Passen Sie als Nächstes die Rahmeninitialisierungsmethode an:

 lineNode.s({ shape: rect, //Rechteck shape.background: #D8D8D8, //Legen Sie die Hintergrundfarbe fest shape.border.width: 1, //Randbreite 1 shape.border.color: #979797, //Border color 2d.editable: false, // Ob es bearbeitet werden kann 2d.movable: false, // Ob es verschoben werden kann 2d.selectable: false // Ob es ausgewählt werden kann });

Um Quadrate zu generieren, besteht meine Idee darin, mehrere Quadrate zu generieren, sie zu den von uns benötigten Grafiken zu kombinieren und sie durch Koordinatenberechnung an den entsprechenden Positionen zu platzieren:

Nachdem der Block generiert wurde, starten Sie den Rotationsvorgang für die Grafik. Es gibt zwei Lösungen: Die erste besteht darin, die umgedrehten Koordinaten der Grafiken der Reihe nach in einem Array zu speichern, und bei jeder Änderung der Form den vorherigen oder nächsten Koordinatensatz im Array zu verwenden, und die zweite darin, sie zu speichern Die gespiegelten Grafikkoordinaten der Reihenfolge werden verwendet, um die entsprechenden Grundelemente zu einem Ganzen zu kombinieren. Beim Verformen müssen Sie nur 90 ° in die entsprechende Richtung auswählen. Hier habe ich die zweite Methode gewählt, der Code lautet wie folgt:

 function createUnit(x, y) { var node = new ht.Node(); node.s({ shape: rect, shape.background: #D8D8D8, shape.border.width: 1, shape.border.color: #979797 }); node.setPosition(x, y); node.setSize(44, 44); gameDM.add(node); node;}var block = new ht.Block();block.addChild(createUnit(552, 133));block.addChild(createUnit(552, 89));block.addChild(createUnit(508, 133));block .addChild(createUnit(596, 133));block.setAnchor(0.5, 0,75); //Legen Sie die Mittelposition der Kombination fest.

Block legt den Mittelpunktanker wie unten gezeigt fest:

Wenn Sie die Drehung festlegen, verwenden Sie einfach die Funktion setRotation, um den Block zu drehen: