Exemple de code pour la version WebGL 3D de Tetris basée sur HTML5

Résumé : Les gens ont mal joué à Tetris en 2D, alors sur un coup de tête, j'ai créé une console de jeu en 3D pour jouer à Tetris. . . L'idée de base de la mise en œuvre est d'abord d'implémenter le mini-jeu Tetris en 2D, puis d'utiliser la fonction de modélisation 3D pour créer un modèle d'arcade 3D, et enfin de coller le mini-jeu 2D sur le modèle 3D.

(ps : la partie d'extension finale réalise la combinaison de la vidéo et du modèle 3D)

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

Tout d’abord, terminez le mini-jeu 2D

En vérifiant les documents officiels, j'ai appris que les paramètres des composants de HT sont stockés dans l'objet ht.DataModel() et que divers effets spéciaux sont présentés après le chargement du modèle de données dans la vue.

 gameDM = new ht.DataModel(); //Initialiser le modèle de données g2d = new ht.graph.GraphView(gameDM); //Initialiser la vue 2D g2d.addToDOM();

Commencez à créer des modèles de jeu

La première étape consiste à créer un cadre pour le jeu et à définir la portée du jeu. Dans le document, nous pouvons savoir que ht.Node est la classe de base permettant à graphView de restituer les primitives de nœuds. En plus d'afficher des images, il peut également prendre en charge une variété de graphiques prédéfinis. Je vais donc utiliser cette classe pour créer 4 rectangles et les utiliser pour définir la portée du jeu.

 var lineNode = new ht.Node();lineNode.s({ shape: rect, //Rectangle shape.background: #D8D8D8, //Définissez la couleur d'arrière-plan shape.border.width: 1, //Forme de largeur de bordure 1. border .color: #979797 // Couleur de la bordure}); lineNode.setPosition(x, y); // Définit la position d'affichage de l'élément, le coin supérieur gauche est 0, 0 Les coordonnées des primitives pointent vers leurs positions centrales lineNode.setSize(width, height); // Définit les attributs de largeur et de hauteur des primitives gameDM.add(lineNode); // Ajoute les informations primitives définies au modèle de données.

Après avoir défini x:552, y:111, width:704, height:22, nous pouvons obtenir le premier graphique :

Le haut de la bordure est déjà là, créons maintenant trois autres côtés pour former un cadre :

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

Le résultat est le suivant :

Les bordures sont pratiquement terminées. Au cours du processus de navigation, j'ai constaté que 4 bordures pouvaient être déplacées. Ensuite, ajustez la méthode d'initialisation de la bordure :

 lineNode.s({ shape: rect, //Rectangle shape.background: #D8D8D8, //Définir la couleur d'arrière-plan shape.border.width: 1, //Largeur de la bordure 1 shape.border.color: #979797, //Border color 2d.editable : false, // S'il peut être modifié 2d.movable : false, // S'il peut être déplacé 2d.selectable : false // S'il peut être sélectionné });

Pour générer des carrés, mon idée est de générer plusieurs carrés, de les combiner dans les graphiques dont nous avons besoin et de les placer dans les positions correspondantes grâce au calcul de coordonnées :

Une fois le bloc généré, démarrez l’opération de rotation sur les graphiques. Il existe deux solutions. La première consiste à stocker les coordonnées inversées des graphiques dans un tableau dans l'ordre, et chaque fois que la forme est modifiée, prenez l'ensemble de coordonnées précédent ou suivant dans le tableau pour apporter des modifications. les coordonnées graphiques inversées des graphiques dans l'ordre. L'objet ht.Block() est utilisé pour combiner les primitives correspondantes en un tout. Lors de la déformation, il vous suffit de sélectionner 90° dans la direction correspondante. Ici, j'ai choisi la deuxième méthode, le code est le suivant :

 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); 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); //Définir la position centrale de la combinaison. Ce point sera installé lors de la rotation de block.setPosition(552, 144);

Block définit le point central d'ancrage comme indiqué ci-dessous :

Lors du réglage de la rotation, utilisez simplement la fonction setRotation pour faire pivoter le bloc :