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

2024-08-26 00:20:43

字體：大中小

供稿：網(wǎng)友

前言

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

（ps：最后拓展部分實現(xiàn)將視頻與3D模型的結(jié)合）

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

http://www.hightopo.com/demo/tetris/

代碼實現(xiàn)

首先，先完成 2D 小游戲

在查看官方文檔的過程中，了解到 HT 的組件參數(shù)都是保存在 ht.DataModel() 對象中，將數(shù)據(jù)模型在視圖中進行加載后呈現(xiàn)各種特效。

gameDM = new ht.DataModel(); //初始化數(shù)據(jù)模型g2d = new ht.graph.GraphView(gameDM); //初始化2d視圖g2d.addToDOM(); //在頁面上創(chuàng)建視圖

開始游戲模型的創(chuàng)建

第一步，先讓我們?yōu)橛螒騽?chuàng)建一個框體，為游戲限定范圍。在文檔中，我們可以知道 ht.Node 是 graphView 呈現(xiàn)節(jié)點圖元的基礎(chǔ)類，除了可以顯示圖片外，還能支持多種預(yù)定義的圖形。所以我打算使用該類創(chuàng)建4個長方形，用它們來做游戲的范圍限定。

var lineNode = new ht.Node();lineNode.s({　　"shape": "rect", //矩形　　"shape.background": "#D8D8D8", //設(shè)置底色　　"shape.border.width": 1, //邊框?qū)挾?1　　"shape.border.color": "#979797" // 邊框顏色});lineNode.setPosition(x, y); // 設(shè)置圖元展示位置，左上角為0, 0 圖元坐標(biāo)指向它們的中心位置lineNode.setSize(width, height); // 設(shè)置圖元寬、高屬性gameDM.add(lineNode); // 將設(shè)置好后的圖元信息加入數(shù)據(jù)模型中

設(shè)置 x:552, y:111, width:704, height:22 后我們可以得到第一個圖形：

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

邊框的top已經(jīng)有了，現(xiàn)在讓我們再創(chuàng)建另外三條邊來組成一個框體：

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,俄羅斯方塊

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

lineNode.s({　　"shape": "rect", //矩形　　"shape.background": "#D8D8D8", //設(shè)置底色　　"shape.border.width": 1, //邊框?qū)挾?1　　"shape.border.color": "#979797", // 邊框顏色　　"2d.editable" : false, // 是否可編輯　　"2d.movable" : false, //是否可移動　　"2d.selectable" : false //是否可選中});

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

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

方塊生成后，開始對圖形進行旋轉(zhuǎn)操作。這其中有兩個方案，第一種是將圖形的翻轉(zhuǎn)后的圖形坐標(biāo)按順序保存在數(shù)組中，每次改變形狀時取數(shù)組中的前一組或后一組坐標(biāo)來進行改變；第二種是使用 ht.Block() 對象將對應(yīng)的圖元組合成一個整體，在變形時只需按對應(yīng)的方向選擇 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); //設(shè)置組合的中心位置， 旋轉(zhuǎn)時將安裝此點來進行block.setPosition(552, 144);

Block 設(shè)置中心點 Anchor 如下圖：

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