Краткое описание: Люди плохо играли в 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: rect, //Прямоугольник shape.background: #D8D8D8, //Установим цвет фона shape.border.width: 1, //Ширина границы 1 shape. border .color: #979797 // Цвет границы}); lineNode.setPosition(x, y); // Устанавливаем позицию отображения элемента, верхний левый угол равен 0, 0 Координаты примитивов указывают на их центральные положения lineNode.setSize(width, height); // Устанавливаем атрибуты ширины и высоты примитивов gameDM.add(lineNode); // Добавляем заданную информацию о примитивах в модель данных;После установки x:552, y:111, ширины:704, высоты:22 мы можем получить первое изображение:
Верх границы уже есть, теперь давайте создадим еще три стороны, чтобы сформировать рамку:
x:211, y:562, ширина:22, ширина:880x:893, y:562, ширина:22, ширина:880x:552, y:1013, ширина:704, ширина:22
Результат следующий:
Границы в основном готовы. В процессе просмотра я обнаружил, что можно перетаскивать 4 границы. Затем настройте метод инициализации границы:
lineNode.s({ shape: rect, //Прямоугольник shape.background: #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({ shape: rect, shape.background: #D8D8D8, shape.border.width: 1, shape.border.color: #979797 }); node.setPosition(x, y); node.setSize(44, 44); gameDM.add(узел); node;}var блок = новый 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); //Установим центральное положение комбинации. Эта точка будет установлена при вращении блока.setPosition(552, 144);Блок устанавливает центральную точку Anchor, как показано ниже:
При настройке вращения просто используйте функцию setRotation, чтобы повернуть блок:
Скопировать код