基於HTML5 的WebGL 3D 版俄羅斯方塊的範例程式碼

摘要：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, width:704, height:22 後我們可以得到第一個圖形：

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

 x:211, y:562, width:22, width:880x:893, y:562, width:22, width:880x: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);

Block 設定中心點Anchor 如下圖：

設定旋轉時，只需使用setRotation 函數對block 進行旋轉即可：