요약: 2D 테트리스는 사람들이 나쁘게 플레이했기 때문에 즉흥적으로 테트리스 게임을 위한 3D 게임 콘솔을 만들었습니다. . . 구현의 기본 아이디어는 먼저 테트리스 미니 게임을 2D로 구현한 다음, 3D 모델링 기능을 사용하여 3D 아케이드 모델을 만들고, 마지막으로 2D 미니 게임을 3D 모델에 붙여넣는 것입니다.
(ps: 최종 확장부분은 영상과 3D모델의 결합을 구현합니다)
http://www.hightopo.com/demo/tetris/
코드 구현먼저 2D 미니게임을 완성해 보세요
공식 문서를 확인하는 과정에서 HT의 구성요소 매개변수가 ht.DataModel() 객체에 저장되고, 데이터 모델을 뷰에 로딩한 후 다양한 특수 효과가 나타나는 것을 알게 되었습니다.
gameDM = new ht.DataModel(); //데이터 모델 초기화 g2d = new ht.graph.GraphView(gameDM); //2D 뷰 초기화 g2d.addToDOM();
게임 모델 만들기 시작
첫 번째 단계는 게임의 프레임을 만들고 게임의 범위를 정의하는 것입니다. 문서에서 우리는 ht.Node가 노드 프리미티브를 렌더링하는 graphView의 기본 클래스라는 것을 알 수 있습니다. 이는 그림을 표시하는 것 외에도 다양한 사전 정의된 그래픽을 지원할 수도 있습니다. 그래서 저는 이 클래스를 사용하여 4개의 직사각형을 만들고 이를 사용하여 게임의 범위를 지정하겠습니다.
var lineNode = new ht.Node();lineNode.s({ Shape: ret, //Rectangle Shape.Background: #D8D8D8, //배경색을 설정합니다. Shape.border.width: 1, //테두리 너비 1 모양. border .color: #979797 // 테두리 색상}); lineNode.setPosition(x, y); // 요소 표시 위치를 설정합니다. 왼쪽 상단은 0입니다. 0 프리미티브의 좌표는 중심 위치를 가리킵니다. lineNode.setSize(width, height); // 프리미티브의 너비 및 높이 속성을 설정합니다. gameDM.add(lineNode) // 설정된 프리미티브 정보를 데이터 모델에 추가합니다.x:552, y:111, width:704, height:22를 설정한 후 첫 번째 그래픽을 얻을 수 있습니다.
테두리의 상단이 이미 있으므로 프레임을 형성하기 위해 또 다른 세 면을 만들어 보겠습니다.
x:211, y:562, 너비:22, 너비:880x:893, y:562, 너비:22, 너비:880x:552, y:1013, 너비:704, 너비:22
결과는 다음과 같습니다.
테두리는 기본적으로 완성되었습니다. 브라우징 과정에서 4개의 테두리를 드래그할 수 있는 것을 발견했습니다. 다음으로 테두리 초기화 방법을 조정합니다.
lineNode.s({ 모양: 각형, //사각형 모양.배경: #D8D8D8, //배경색 설정 Shape.border.width: 1, //테두리 너비 1 Shape.border.color: #979797, //테두리 color 2d.editable : false, // 편집 가능 여부 2d.movable : false, // 이동 가능 여부 2d.selectable : false // 선택 가능 여부 });정사각형을 생성하려면 여러 개의 정사각형을 생성하고 이를 필요한 그래픽으로 결합한 다음 좌표 계산을 통해 해당 위치에 배치하는 것이 내 생각입니다.
블록이 생성된 후 그래픽에서 회전 작업을 시작합니다. 두 가지 해결책이 있습니다. 첫 번째는 그래픽의 뒤집힌 좌표를 순서대로 배열에 저장하고, 모양이 변경될 때마다 배열의 이전 또는 다음 좌표 세트를 가져와 변경하는 것입니다. ht.Block() 객체는 해당 프리미티브를 전체로 결합하는 데 사용됩니다. 변형 시 해당 방향으로 90°만 선택하면 됩니다. 여기서는 두 번째 방법을 선택했는데, 코드는 다음과 같습니다.
function createUnit(x, y) { var node = new ht.Node(); node.s({ 모양: 직사각형, 모양.배경: #D8D8D8, 모양.border.width: 1, 모양.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); //조합의 중심 위치를 설정합니다. block.setPosition(552, 144);블록은 아래와 같이 중심점 앵커를 설정합니다.
회전을 설정할 때 setRotation 함수를 사용하여 블록을 회전하면 됩니다.
코드 복사