HTML5遊戲開發系列教程8 譯

這是我們最新一篇html5遊戲開發系列文章。我們將繼續使用canvas來進行html5遊戲開發系列的文章。這次我將展示在你的專案中，如何使用box2d的建立物體。box2d是乙個非常流行的開源物理引擎對於那些需要模擬2d物體的應用來說。在遊戲開發中，2d物理引擎是個非常熱門的話題。有了物理引擎的幫助，再設定環境和簡單的規則，我們可以很容易的建立好玩的遊戲。

準備：

第一步：html

這次我們必須引用所有必需的庫檔案到我們專案中。

index.html

1

2379
808182
class="stuts">back to original tutorial on script tutorials
8384
class="container">
8586
8788

第二步：css

css/main.css

這次就不打算顯示出css檔案的內容了，因為僅僅只是些頁面布局樣式。你可以在源**包裡找到該檔案。

第三步：js

js/jquery-2.0.0.min.js  和 js/protoclass.js

上面兩個js檔案都在源**包裡。下面的js檔案是最重要的，是我們遊戲的主要**。

js/script.js

1

varcanvas, ctx;
2var
canvaswidth;
3var
canvasheight;
4var
world;
5var iborder = 5;67
//隨機產生介於x和y之間的數
8function
getrand(x, y) 
1112 $(function
() );
2829
function
addobjects() else
if(ivar == 2) 
4445 settimeout(addobjects, 500);46}
4748
function
frame() 
5657
function
createworld() 
7172
function
createground(x, y, width, height, rotation) 
8384
function
createboxat(x, y, w, h) 
9697
function
createcircleat(x, y, r) 
109110
function
drawworld(world, context) 
116}
117}
118119
function
drawshape(shape, context) 
139 context.lineto(pos.x +r, pos.y);
140context.moveto(pos.x, pos.y);
141var ax =circle.m_r.col1;
142var pos2 = new b2vec2(pos.x + r * ax.x, pos.y + r *ax.y);
143context.lineto(pos2.x, pos2.y);
144break
;145
case
b2shape.e_polyshape:
146var poly =shape;
147var tv = b2math.addvv(poly.m_position, b2math.b2mulmv(poly.m_r, poly.m_vertices[0]));
148context.moveto(tv.x, tv.y);
149for (var i = 0; i < poly.m_vertexcount; i++) 
153context.lineto(tv.x, tv.y);
154break
;155
}156
context.fill();
157context.stroke();
158 }

結論：

就是這樣了，你已經用html5和box2d完成了這次的教程，恭喜！

HTML5遊戲開發系列教程6 譯

這是我們最新一篇html5遊戲開發系列文章。我們將繼續使用canvas來進行html5遊戲開發系列的文章。這次是個完整的遊戲例子，再現一款經典的電腦遊戲 坦克大戰。我將教你們使用交替的陣列地圖 alternative array maps 同時將說明如何檢測活動物件 坦克 和周圍環境之間的碰撞。前一...

譯 Html5遊戲開發示例 3

jquery 介紹 這部分就不翻了，網上有很多的。如果有不懂的部分找度娘 用jquery操作遊戲元素 我們已經用jquery初始化了球拍。現在我們做乙個如何使用jquery安置遊戲元素的實驗。動起來 使用jquery修改元素的位置 讓我們用網格背景來檢查我們遊戲的元素位置 1 我們繼續使用pingp...

html5遊戲開發

一 前言 本次教程將向大家講解如何用html5將小地圖塊拼成大地圖，以及如何用現有的高階html5遊戲開發庫件lufylegend.js開發遊戲。首先讓我們來了解了解如何用html5實現動畫，畢竟 動靜結合 是先有動再有靜。看了上一章的內容，或許你就有了對html5實現動畫有了初步了解 二 html...