基於HTML5的WebGL實現的2D3D迷宮小遊戲

為了實現乙個基於html5的場景小遊戲，我採用了ht for web來實現，短短200行**，我就能實現用「第一人稱」來操作前進後退上下左右，並且實現了碰撞檢測。

先來看下實現的效果：

玩玩，滑鼠或者觸屏都可以，不過我覺得最方便的還是操作鍵盤wsad控制上下左右。

我的想法是先把場景布局好，**如下：

createht([100, -20, 100], '#e74c3c');                  
createht([-100, -20, 100], '#1abc9c'); 
createht([100, -20, -100], '#3498db'); 
createht([-100, -20, -100], '#9b59b6'); 
createcurve([0, -20, 0]);
createcircle();

這幾個都是自定義的函式，createht為描繪ht形狀的圖，場景中有四個，所以呼叫了四次；createcurve是描繪場景中間的黃色的曲線；createcircle是描繪最外層的圓，因為不是全包的圓，所以也是描點畫的。

ht中封裝了乙個元件，ht.shape（以下簡稱shape），能夠根據描點來自由描繪圖形，可以通過shape.setpoints(pointsarray)將所有的點新增進陣列中，並且設定到shape中，然後通過setsegments()設定線段陣列資訊，也就是用什麼樣的方式來連線兩點，在shape手冊中有著重描寫，感興趣的可以參考ht for web shape 手冊。抽其中的乙個描繪點的函式來看看：

function createht(p3, color)); shape.settall(40); shape.setthickness(5); shape.setpoints([ // draw h , , , , , , // draw t , , ,  ]); shape.setsegments([ // draw h 1, // moveto 2, // lineto 1, // moveto 2, // lineto 1, // moveto 2, // lineto // draw t 1, // moveto 2, // lineto 1, // moveto 2 // lineto  ]); shape.p3(p3); datamodel.add(shape); return shape; }

因為「ht」這個字眼要描繪的點比較多，所以**看起來有點大，如果你看到如何描繪乙個不完全的圓用20行**來完成，而且包括樣式，還是會驚訝的：

shape = new ht.shape();                
shape.s();
shape.settall(40); shape.p3(0, -20, 0); shape.setthickness(10); var r = 300; for(var i=0; i<36; i++)); } datamodel.add(shape); return shape;

場景設定完畢，接下來要將在3d中「我」處於的位置在2d中也顯示出來。首先我得先設定「我」是「第一人稱漫遊模式」，直接將g3d.setfirstpersonmode(true)即可。第一人稱漫遊模式本質是控制eye和center，如果沒有設定第一人稱漫遊模式，那麼滑鼠或者觸控板拖拽會繞著center旋轉。詳情參考ht for web 3d手冊。

因為ht 3d中封裝了兩個方法geteye和getcenter，這兩個方法分別是獲取camera的位置和目標中心點的位置，前者按照想象來說就比方你頭上有個攝像機，你走到**它的中心點就拍攝到**，可以很方便的記錄你的位置；後者就相當於你看出去的位置，但是這裡跟我們人不太一樣，因為人是可以廣度看到大範圍的，但是這個center相當於你眼球和都不能轉動，是正前方的某一點的位置就是你的視線聚焦位置。

了解了geteye和getcenter後我們就可以獲取當前位置和視線位置了：

g2d.addtoppainter(function(g));

但是在**中我們發現，這個方法只被繪製了一次，如果不一直重繪，那麼2d介面的「我」的位置和移動也是不會變的，所以我們又監聽了3d中屬性的變化：

g3d.mp(function(e) 
});

function updateboundaries()); 
g3d.setboundaries(boundaries);//setboundary()可指定碰撞邊界
}

那麼我們好奇的點在於，如何在拖拽圖元改變大小的時候還能保持碰撞檢測呢？

ht中有乙個對於屬性變化的監聽事件adddatapropertychangelistener()，可簡寫為md()，在我們拖拽圖元的時候，繪製這個圖元的基礎points就會被改變，所以我們只要監聽points有沒有被改變就行了，如何使用這個事件可以參考ht for web 資料模型手冊

datamodel.md(function(e)
});

基於HTML5的WebGL實現的2D3D迷宮小遊戲

2 基於html5的模板

基於 HTML5 WebGL 的醫療物流系統

基於Html5實現的react拖拽排序元件示例

基於HTML5的WebGL實現的2D3D迷宮小遊戲

2 基於html5的模板

基於 HTML5 WebGL 的醫療物流系統

基於Html5實現的react拖拽排序元件示例

相關推薦