一個HTML 5 躲避游戲的實現
前段時間BrowserQuest激起了我對html5的樂趣，接下來記下一個小型html5躲避游戲的實現。
先上圖
游戲很簡單，鍵盤控制人物上下左右移動，躲開怪物，時間越長越牛x。
主要是兩部分組成:一部分就是人物、地圖的結構搭建，另一部分就是讓英雄、怪物相應地動起來。
HTML5寫游戲和傳統的游戲思路完全一樣，同樣也是不停刷新屏幕，游戲實際上也就是圖片的適時擺放問題，HTML5無非就只用到了一個canvas(畫布)的性質用來擺放圖片。
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
