HTML5怎么實現WebGL 3D版俄羅斯方塊

今天小編給大家分享一下HTML5怎么實現WebGL 3D版俄羅斯方塊的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

前言

摘要：2D 的俄羅斯方塊已經被人玩爛了，突發奇想就做了個 3D 的游戲機，用來玩俄羅斯方塊。。。實現的基本想法是先在 2D 上實現俄羅斯方塊小游戲，然后使用 3D 建模功能創建一個 3D 街機模型，最后將 2D 小游戲貼到 3D 模型上。

首先，先完成 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, width:704, height:22 后我們可以得到第一個圖形：

邊框的top已經有了，現在讓我們再創建另外三條邊來組成一個框體：

x:211, y:562, width:22, width:880

x:893, y:562, width:22, width:880

x:552, y:1013, width:704, width:22

得到效果如下：

邊框基本完成，在瀏覽的過程中發現4個邊框可以被拖拽。接下來對邊框初始化的方法進行調整：

lineNode.s({

 "shape": "rect", //矩形

　　"shape.background": "#D8D8D8", //設置底色

　　"shape.border.width": 1, //邊框寬度 1

　　"shape.border.color": "#979797", // 邊框顏色

　　"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);

    return 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);    

以上就是“HTML5怎么實現WebGL 3D版俄羅斯方塊”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。