Código de muestra para la versión WebGL 3D de Tetris basada en HTML5

Resumen: La gente ha jugado mal al Tetris 2D, así que por capricho, hice una consola de juegos 3D para jugar Tetris. . . La idea básica de implementación es implementar primero el minijuego de Tetris en 2D, luego usar la función de modelado 3D para crear un modelo arcade 3D y finalmente pegar el minijuego 2D en el modelo 3D.

(PD: la parte de expansión final realiza la combinación de video y modelo 3D)

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

Primero, completa el minijuego 2D.

En el proceso de verificar los documentos oficiales, aprendí que los parámetros de los componentes de HT se almacenan en el objeto ht.DataModel() y que se presentan varios efectos especiales después de cargar el modelo de datos en la vista.

 gameDM = new ht.DataModel(); //Inicializa el modelo de datos g2d = new ht.graph.GraphView(gameDM); //Inicializa la vista 2d g2d.addToDOM();

Comience a crear modelos de juegos

El primer paso es crear un marco para el juego y definir el alcance del juego. En el documento, podemos saber que ht.Node es la clase básica de GraphView para representar primitivas de nodo. Además de mostrar imágenes, también puede admitir una variedad de gráficos predefinidos. Así que usaré esta clase para crear 4 rectángulos y usarlos para definir el alcance del juego.

 var lineNode = new ht.Node();lineNode.s({ forma: rect, //Rectángulo forma.fondo: #D8D8D8, //Establece el color de fondo forma.border.width: 1, //Ancho del borde 1 forma. border .color: #979797 // Color del borde}); lineNode.setPosition(x, y); // Establece la posición de visualización del elemento, la esquina superior izquierda es 0, 0 Las coordenadas de las primitivas apuntan a sus posiciones centrales lineNode.setSize(width, height); // Establece los atributos de ancho y alto de las primitivas gameDM.add(lineNode); // Agrega la información primitiva establecida al modelo de datos.

Después de configurar x:552, y:111, ancho:704, alto:22 podemos obtener el primer gráfico:

La parte superior del borde ya está allí, ahora creemos otros tres lados para formar un marco:

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

El resultado es el siguiente:

Básicamente, los bordes están completos. Durante el proceso de navegación, descubrí que se pueden arrastrar 4 bordes. A continuación, ajuste el método de inicialización del borde:

 lineNode.s({ forma: rect, //Rectángulo forma.fondo: #D8D8D8, //Establecer el color de fondo forma.border.width: 1, //Ancho del borde 1 forma.border.color: #979797, //Borde color 2d.editable: false, // Si se puede editar 2d.movable: false, // Si se puede mover 2d.selectable: false // Si se puede seleccionar });

Para generar cuadrados, mi idea es generar múltiples cuadrados, combinarlos en los gráficos que necesitamos y colocarlos en las posiciones correspondientes mediante el cálculo de coordenadas:

Una vez generado el bloque, inicie la operación de rotación en los gráficos. Hay dos soluciones. La primera es almacenar las coordenadas invertidas de los gráficos en una matriz en orden, y cada vez que se cambia la forma, tomar el conjunto de coordenadas anterior o siguiente en la matriz para realizar cambios. las coordenadas de los gráficos invertidos en orden. El objeto ht.Block () se utiliza para combinar las primitivas correspondientes en un todo. Al deformar, solo necesita seleccionar 90 ° en la dirección correspondiente. Aquí elegí el segundo método, el código es el siguiente:

 función createUnit(x, y) { var node = new ht.Node(); node.s({ forma: rect, forma.fondo: #D8D8D8, forma.border.width: 1, forma.border.color: #979797 }); nodo.setPosition(x, y); nodo.setSize(44, 44); nodo;}var bloque = nuevo 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); //Establece la posición central de la combinación. Este punto se instalará al girar block.setPosition(552, 144);

Block establece el punto central Anchor como se muestra a continuación:

Al configurar la rotación, simplemente use la función setRotation para rotar el bloque: