這是我們最新一篇html5遊戲開發系列文章。我們將繼續使用canvas來進行html5遊戲開發系列的文章。這次是個完整的遊戲例子，再現一款經典的電腦遊戲--坦克大戰。我將教你們使用交替的陣列地圖(alternative array-maps)，同時將說明如何檢測活動物件(坦克)和周圍環境之間的碰撞。
前一篇的的介紹在html5遊戲開發系列教程5(譯)。
第一步：html
index.html
1doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
/>
5<
title
>html5 game development - lesson 6 | script tutorials
title
>
6<
link
href
="css/main.css"
rel="stylesheet"
type
="text/css"
/>
7<
script
src="js/jquery-2.0.0.min.js"
>
script
>
8<
script
src="js/script.js"
>
script
>
9head
>
10<
body
>
11<
header
>
12<
h2>html5 game development - lesson 6
h2>
13<
a href
=""class
="stuts"
>back to original tutorial on <
span
>script tutorials
span
>
a>
14header
>
15<
div
class
="container"
>
16<
canvas
id="scene"
width
="800"
height
="600"
>
canvas
>
17div
>
18body
>
19html
>
第二步：css
css/main.css
我將不會把css檔案內容發布出來，css檔案裡面僅僅是一些頁面的層疊樣式，你可以在源**包中找到該檔案。
第三步：js
js/jquery-2.0.0.min.js(原文是1.5.2版本)
我們的**使用了jquery。jquery檔案在源**包中。下面的js檔案是最重要的對於我們的遊戲，因為它實現了我們遊戲所有的邏輯。
js/script.js
1//內部變數
2var canvas, context; //
畫布和其上下文物件
3var imgbrick, imgsteel, imgwater, imgforest, imgtank; //
各種實體的
4var amap; //
地圖陣列
5var otank; //
坦克物件67
var icellsize = 24; //
地圖單元格的大小
8var ixcnt = 26;
9var iycnt = 26;
1011/**
12* x: 坦克左上角x軸座標
13* y: 坦克左上角y軸座標
14* w: 坦克寬度
15* h: 坦克高度
16* image: 坦克
17*/
18function
tank(x, y, w, h, image)
2627
//清除畫布
28function
clear()
3132
//重繪畫布
33function
drawscene() 61}
62}6364
context.restore();
6566
//畫坦克 這裡可以看出坦克佔4個單元格
67 context.drawimage(otank.image, otank.i * otank.w, 0, otank.w, otank.h, otank.x, otank.y, otank.w, otank.h);68}
6970 $(function
() 137
}138
}139
break
;140
case 40: //
down key
141 otank.i = 3;
142143
var icurcelx = (2 * otank.x) / 48;
144var icurcely = (2 * otank.y) / 48;
145if (icurcely + 2 154}
155}
156break
;157
case 37: //
left key
158 otank.i = 1;
159160
var icurcelx = (2 * otank.x) / 48;
161var icurcely = (2 * otank.y) / 48;
162var itest1 = amap[icurcely][icurcelx - 1];
163var itest2 = amap[icurcely + 1][icurcelx - 1];
164165
if ((itest1 == 0 || itest1 == 3) && (itest2 == 0 || itest2 == 3))
170}
171break
;172
case 39: //
right key
173 otank.i = 0;
174175
var icurcelx = (2 * otank.x) / 48;
176var icurcely = (2 * otank.y) / 48;
177var itest1 = amap[icurcely][icurcelx + 2];
178var itest2 = amap[icurcely + 1][icurcelx + 2];
179180
if ((itest1 == 0 || itest1 == 3) && (itest2 == 0 || itest2 == 3))
185}
186break
;187
}188
});189 setinterval(drawscene, 40);
190 });
我在很多地方加上了注釋，依此希望這**是容易理解的。
結論：
HTML5遊戲開發系列教程8 譯
這是我們最新一篇html5遊戲開發系列文章。我們將繼續使用canvas來進行html5遊戲開發系列的文章。這次我將展示在你的專案中，如何使用box2d的建立物體。box2d是乙個非常流行的開源物理引擎對於那些需要模擬2d物體的應用來說。在遊戲開發中，2d物理引擎是個非常熱門的話題。有了物理引擎的幫助...
譯 Html5遊戲開發示例 3
jquery 介紹 這部分就不翻了，網上有很多的。如果有不懂的部分找度娘 用jquery操作遊戲元素 我們已經用jquery初始化了球拍。現在我們做乙個如何使用jquery安置遊戲元素的實驗。動起來 使用jquery修改元素的位置 讓我們用網格背景來檢查我們遊戲的元素位置 1 我們繼續使用pingp...
html5遊戲開發
一 前言 本次教程將向大家講解如何用html5將小地圖塊拼成大地圖，以及如何用現有的高階html5遊戲開發庫件lufylegend.js開發遊戲。首先讓我們來了解了解如何用html5實現動畫，畢竟 動靜結合 是先有動再有靜。看了上一章的內容，或許你就有了對html5實現動畫有了初步了解 二 html...