基于 HTML5 的 WebGL 3D 版俄羅斯方塊的示例代碼

前言

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

（ps：最后拓展部分實現將視頻與3D模型的結合）

HTML5,WebGL,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 后我們可以得到第一個圖形：

HTML5,WebGL,3D,俄羅斯方塊

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

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

得到效果如下：

HTML5,WebGL,3D,俄羅斯方塊

邊框基本完成，在瀏覽的過程中發現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 //是否可選中});

生成方塊，我的想法是生成多個正方形，將它們組合成我們需要的圖形，通過坐標的計算來將它們擺放在相應的位置:

HTML5,WebGL,3D,俄羅斯方塊

方塊生成后，開始對圖形進行旋轉操作。這其中有兩個方案，第一種是將圖形的翻轉后的圖形坐標按順序保存在數組中，每次改變形狀時取數組中的前一組或后一組坐標來進行改變；第二種是使用 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 如下圖：

HTML5,WebGL,3D,俄羅斯方塊