HTML5怎么實(shí)現(xiàn)WebGL3D版俄羅斯方塊

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

公司主營(yíng)業(yè)務(wù)：成都做網(wǎng)站、網(wǎng)站制作、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出萊州免費(fèi)做網(wǎng)站回饋大家。

前言

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

首先，先完成 2D 小游戲

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

gameDM = new ht.DataModel(); //初始化數(shù)據(jù)模型

g2d = new ht.graph.GraphView(gameDM); //初始化2d視圖

g2d.addToDOM(); //在頁(yè)面上創(chuàng)建視圖

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

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

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 后我們可以得到第一個(gè)圖形：

邊框的top已經(jīng)有了，現(xiàn)在讓我們?cè)賱?chuàng)建另外三條邊來(lái)組成一個(gè)框體：

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

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

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

得到效果如下：

邊框基本完成，在瀏覽的過(guò)程中發(fā)現(xiàn)4個(gè)邊框可以被拖拽。接下來(lái)對(duì)邊框初始化的方法進(jìn)行調(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, //是否可移動(dòng)

"2d.selectable" : false //是否可選中

});

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

方塊生成后，開(kāi)始對(duì)圖形進(jìn)行旋轉(zhuǎn)操作。這其中有兩個(gè)方案，第一種是將圖形的翻轉(zhuǎn)后的圖形坐標(biāo)按順序保存在數(shù)組中，每次改變形狀時(shí)取數(shù)組中的前一組或后一組坐標(biāo)來(lái)進(jìn)行改變；第二種是使用 ht.Block() 對(duì)象將對(duì)應(yīng)的圖元組合成一個(gè)整體，在變形時(shí)只需按對(duì)應(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)時(shí)將安裝此點(diǎn)來(lái)進(jìn)行

block.setPosition(552, 144);    

以上就是“HTML5怎么實(shí)現(xiàn)WebGL 3D版俄羅斯方塊”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：HTML5怎么實(shí)現(xiàn)WebGL3D版俄羅斯方塊
標(biāo)題網(wǎng)址：http://muchs.cn/article32/ispgsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、外貿(mào)網(wǎng)站建設(shè)、ChatGPT、靜態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司