Código de exemplo para versão WebGL 3D do Tetris baseado em HTML5

Resumo: Tetris 2D tem sido mal jogado pelas pessoas, então, por capricho, criei um console de videogame 3D para jogar Tetris. . . A ideia básica de implementação é primeiro implementar o minijogo Tetris em 2D, depois usar a função de modelagem 3D para criar um modelo de arcade 3D e, finalmente, colar o minijogo 2D no modelo 3D.

(ps: A parte final da expansão realiza a combinação de vídeo e modelo 3D)

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

Primeiro, complete o minijogo 2D

No processo de verificação dos documentos oficiais, aprendi que os parâmetros dos componentes do HT são armazenados no objeto ht.DataModel() e vários efeitos especiais são apresentados após o carregamento do modelo de dados na visualização.

 gameDM = new ht.DataModel(); //Inicializar o modelo de dados g2d = new ht.graph.GraphView(gameDM); //Inicializar a visualização 2d g2d.addToDOM();

Comece a criar modelos de jogos

O primeiro passo é criar uma moldura para o jogo e definir o escopo do jogo. No documento, podemos saber que ht.Node é a classe básica do graphView para renderizar primitivas de nó. Além de exibir imagens, ele também pode suportar uma variedade de gráficos predefinidos. Então vou usar essa classe para criar 4 retângulos e usá-los para definir o escopo do jogo.

 var lineNode = new ht.Node();lineNode.s({ shape: rect, //Rectangle shape.background: #D8D8D8, //Definir a cor de fundo shape.border.width: 1, //Largura da borda 1 forma. border .color: #979797 // Cor da borda}); lineNode.setPosition(x, y); // Define a posição de exibição do elemento, o canto superior esquerdo é 0, 0 As coordenadas das primitivas apontam para suas posições centrais lineNode.setSize(width, height); // Define os atributos de largura e altura das primitivas gameDM.add(lineNode);

Após definir x:552, y:111, width:704, height:22 podemos obter o primeiro gráfico:

O topo da borda já está aí, agora vamos criar mais três lados para formar uma moldura:

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

O resultado é o seguinte:

As bordas estão basicamente concluídas. Durante o processo de navegação, descobri que 4 bordas podem ser arrastadas. A seguir, ajuste o método de inicialização da borda:

 lineNode.s({ shape: rect, //Retângulo shape.background: #D8D8D8, //Definir a cor de fundo shape.border.width: 1, //Largura da borda 1 shape.border.color: #979797, //Border color 2d.editable : false, // Se pode ser editado 2d.movable : false, // Se pode ser movido 2d.selectable : false // Se pode ser selecionado });

Para gerar quadrados, minha ideia é gerar vários quadrados, combiná-los nos gráficos que precisamos e colocá-los nas posições correspondentes através do cálculo de coordenadas:

Após a geração do bloco, inicie a operação de rotação nos gráficos. Existem duas soluções. A primeira é armazenar as coordenadas invertidas dos gráficos em uma matriz em ordem e, cada vez que a forma for alterada, pegue o conjunto anterior ou seguinte de coordenadas na matriz para fazer alterações; as coordenadas gráficas invertidas dos gráficos em ordem. O objeto ht.Block() é usado para combinar as primitivas correspondentes em um todo. Ao deformar, você só precisa selecionar 90° na direção correspondente. Aqui escolhi o segundo método, o código é o seguinte:

 função createUnit (x, y) { var node = new ht.Node (); }); node.setPosition(x, y); node.setSize(44, 44); node;}var bloco = new ht.Block();block.addChild(createUnit(552, 133));block.addChild(createUnit(552, 89));block.addChild(createUnit(508, 133));bloco .addChild(createUnit(596, 133));block.setAnchor(0.5, 0.75); //Definir a posição central da combinação. Este ponto será instalado ao girar block.setPosition(552, 144);

Block define o ponto central Anchor conforme mostrado abaixo:

Ao definir a rotação, basta usar a função setRotation para girar o bloco: