一個HTML 5 躲避游戲的實現

作者：Billyellow's 2012-09-24 11:11:32

開發前端

HTML5寫游戲和傳統的游戲思路完全一樣，同樣也是不停刷新屏幕，游戲實際上也就是圖片的適時擺放問題，HTML5無非就只用到了一個canvas(畫布)的性質用來擺放圖片。

前段時間BrowserQuest激起了我對html5的樂趣，接下來記下一個小型html5躲避游戲的實現。

先上圖

QQ20120921 3

游戲很簡單，鍵盤控制人物上下左右移動，躲開怪物，時間越長越牛x。

主要是兩部分組成:一部分就是人物、地圖的結構搭建，另一部分就是讓英雄、怪物相應地動起來。

Step 1 做好準備

新建一個html文件，命名為index.html，用作游戲的容器。代碼如下:

<html>   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
<title>html5 game</title>   
</head>   
<body>   
<h1>html5 game</h1>   
<script type="text/javascript" src="move.js"></script>   
</body>   
</html>

ps:script的引用最好放在body里放在body會有問題。

再新建個文件,move.js

var canvas = document.createElement("canvas"); //創建元素canvas，即我們要用的畫布   
var ctx = canvas.getContext("2d");//說明我們要用的畫布是2d，因為canvas也有WebGL支持3d   
canvas.width = 512;//設置畫布的長寬   
canvas.height = 480;   
document.body.appendChild(canvas);//前面基本信息都設置好了之后，將這個元素添加到body標簽下。

這樣畫布就算是搭建好了。

順帶在下面加幾個和圖片有關的函數。

var bgReady = false;   
var bgImage = new Image();   
bgImage.src = "move/background.png";   
bgImage.onload = function(){   
bgReady = true;   
}   
    
var heroReady = false;   
var heroImage = new Image();   
heroImage.src = "move/hero.png";   
heroImage.onload = function(){   
heroReady = true;   
}   
    
var monsterReady = false;   
var monsterImage = new Image();   
monsterImage.src = "move/monster.png";   
monsterImage.onload = function(){   
monsterReady = true;   
}

這個游戲用了三張圖片，依次為背景、英雄、怪物。這段代碼很容易理解，為了不在圖片沒有加載完成的時候就draw圖片。

#p#

Step 2 定義原型

接下來定義一下英雄的原型。

var hero = {   
speed: 256,   
x: canvas.width/2,   
y: canvas.height/2   
}

這個原型也很好理解，每秒鐘英雄可以移動256個像素，英雄初始的位置為畫布中央(x,y分別為坐標)。

接下來輪到怪物了。: )

function monster() {   
this.x = Math.random() * canvas.width;//初始為止隨機   
this.y = Math.random() * canvas.height;   
this.speed = 100;   
this.xDirection = 1;//默認移動方向為x軸正方向(以左上角為零點，下方和右方為正)   
this.yDirection = 1;//同樣也為y軸正方向   
this.move = function (modifier) {//移動函數   
this.x += this.xDirection * this.speed * modifier;   
this.y += this.yDirection * this.speed * modifier;   
if (this.x >= canvas.width - 32)//碰撞返回部分   
{   
this.x = canvas.width - 32;   
this.xDirection = -1;   
}else if (this.x <= 0)   
{   
this.x = 0;   
this.xDirection = 1;   
}else if (this.y >= canvas.height - 32)   
{   
this.y = canvas.height - 32;   
this.yDirection = -1;   
}else if (this.y <= 0)   
{   
this.y = 0;   
this.yDirection = 1;   
}   
};   
}

怪物比英雄的定義要復雜得多。首先，怪物每隔五秒會增加一個(為增加難度)，故不能單純創建一個數組，而是需要一個類，再用類創建怪物對象。js當中只有類的半實現，具體使用function來創建。然后，怪物需要有撞墻返回的性質。

怪物的速度比英雄略慢，為100像素/秒。默認坐標在畫布當中隨機。怪物以45度移動。xDirection,yDirection合起來表示左上、左下、右上、右下4個方向。然后monster這個類有個move的動作，modifier表示兩次刷新的時間間隔，可以計算出經過時間間隔后怪物的坐標。下面4個if函數用來判斷，是否超越邊界，超越則馬上轉向，以實現碰撞的效果。

var monsterSum = 0;   
var monsterList = new Array();   
monsterList[monsterSum] = new monster();

前面用var已經創建了英雄的實例，但是monster我們只建立了類而已，接下來要實例化。monsterSum表示怪物的數量，為方便，按照c的習慣，從0開始技術，即0表示有一個怪物。monsterList用來表示一個存怪物對象的數組，然后順帶新建一個怪物。

#p#

Step 3 游戲動起來！

先添加一個事件來接收鍵盤的動作，上下左右用對應的ascii碼。因為游戲并不是摁一下方向鍵，就移動一段距離。而是，判斷一個時間間隔內的動作(最后的動作，中間有可能會變化，故用數組保存最后結果)。

var keysDown = {};   
addEventListener("keydown", function (e) {   
keysDown[e.keyCode] = true;//如果有"keydown"這個動作，即摁下某鍵，就會存進keysDown數組   
}, false);   
addEventListener("keyup", function (e) {   
delete keysDown[e.keyCode];   
});

下面上主函數

var main = function () {   
var now = Date.now();   
var delta = now - then;   
Move(delta / 1000);//每次間隔時間根本不是1ms，比1ms要大得多   
Draw();   
Check();   
then = now;   
}

main函數就是主函數，就是一個刷新所執行的函數。now、then兩個變量記錄兩次刷新的時間間隔，這個時間間隔并不是固定的，一般為幾百毫秒。delta 是兩者之差，單位為毫秒。下面依次解釋各個函數:Move()用來計算英雄和怪物的新位置。Draw()用來畫背景、人物、文字。Check()用來檢查，怪物和英雄是否相撞。

Move():

var Move = function (modifier) {   
if (38 in keysDown) {   
hero.y -= hero.speed * modifier;   
}   
if (40 in keysDown) {   
hero.y += hero.speed * modifier;   
}   
if (37 in keysDown) {   
hero.x -= hero.speed * modifier;   
}   
if (39 in keysDown) {   
hero.x += hero.speed * modifier;   
}   
if (hero.x >= canvas.width - 32) {   
hero.x = 0;   
}else if (hero.x <= 0) {   
hero.x = canvas.width - 32;   
}   
if (hero.y >= canvas.height - 32) {   
hero.y = 0;   
}else if (hero.y <= 0) {   
hero.y = canvas.height - 32;   
}   
for (var i = 0; i <= monsterSum; i++) {   
monsterList[i].move(modifier);   
}   
}

這里很好理解，判斷這段時間間隔英雄的動作。算出新位置后，判斷英雄是否跑出了畫布，跑出了就從另一頭出來(感謝 @昭曈的創意)。接下來依次調用各個怪物的move函數，計算他們的新位置。

Draw():

var Draw = function () {   
if (bgReady) {   
ctx.drawImage(bgImage, 0 ,0);   
}   
if (heroReady) {   
ctx.drawImage(heroImage, hero.x, hero.y);   
}   
if (monsterReady) {   
for (var i = 0; i <= monsterSum; i++)   
ctx.drawImage(monsterImage, monsterList[i].x, monsterList[i].y);   
}   
ctx.fillStyle = "rgb(250, 250, 250)";   
ctx.font = "24px Helvetica";   
ctx.textAlign = "left";   
ctx.textBaseline = "top";   
last = Date.now() - start;   
ctx.fillText(last/1000, 32, canvas.height - 64);   
}

前三個函數類似，就是如果準備好了圖片就畫東西上去(前面的三個ready函數派上了用場)。下面先定義了文字的style，然后計算出時間間隔last，然后畫上去。

Check():

var Check = function () {   
if (monsterSum != Math.floor(last / 5000)){//如果時間經過5秒就增加一個怪獸實例   
monsterSum ++;   
monsterList[monsterSum] = new monster();   
}   
for (var i = 0; i <= monsterSum; i++) {   
if (   
(monsterList[i].x - 32) <= hero.x   
&& hero.x <= (monsterList[i].x + 32)   
&& (monsterList[i].y - 32) <= hero.y   
&& hero.y <= (monsterList[i].y + 32)   
) {   
end = Date.now();   
alert("你堅持了" + (end - start)/1000 + "秒");   
End();   
}   
}   
}

第一步是如果經過5秒就增加一個怪獸，然后下面一個個判斷怪獸與英雄是否接觸。(這里用的是矩形，@小樟說可以用圓心，感興趣的可以試試: ) )

大家注意到了下面用到了一個end函數。下面補充，如果不停止一直刷新就瀏覽器就一直動了，故要有個結束函數。

End():

var End = function () {   
if (bgReady) {   
ctx.drawImage(bgImage, 0 ,0); //留住背景   
}   
window.clearInterval(timer);   
return;   
}

用到的clearInterval()稍后會說到。

#p#

Step 4 程序入口

var then = Date.now();   
var start = then;   
timer = setInterval(main, 1);

定義了初始的then和start，接下里用了setInterval(),意為每隔1ms就執行一次main函數。1ms是虛指，就是立即執行的意思。要想停止就用前面的clearInterval()函數。

到這里為止一個完整的游戲就寫好了~ : )

后來 @志謙實踐出了一個bug，就是窗口如果最小化后，會一直計時，但不會被撞。問題在于高級的瀏覽器(當然沒在說IE : ) )，默認如果最小化后，會終止interval、timeout這類函數的執行，以節約資源。但我們計時的方法是結束時間減去開始時間，所以就造成這個刷分的bug。感謝 @小樟提供了main函數遞歸，全局變量表示是否停止的辦法。

哦，第一次就那么沒了~

源碼下載地址:html5game

原文鏈接：http://billyellow.com/?p=10

責任編輯：張偉來源： Billyellow's