一、前言

本次教程將向大家講解如何用html5將小地圖塊拼成大地圖，以及如何用現有的高級html5游戲開發庫件lufylegend.js開發游戲。

首先讓我們來了解了解如何用html5實現動畫，畢竟“動靜結合”是先有動再有靜。看了上一章的內容，或許你就有了對html5實現動畫有了初步了解：

html5游戲開發--"動靜"結合(一):?

http://blog.csdn.net/yorhomwang/article/details/8301451

二、html5實現用小地圖塊拼成大地圖

早在上一章以前我就向大家介紹過，許多游戲的地圖是用小地圖塊拼成的。那么既然那些游戲能通過AS或者其他編程語言實現，那我們的html5也絲毫不遜色于它們。接下來就是今天我要為大家準備的圖片：

map.png

這張圖片具體來自哪里我不太清楚，不過它是為我們來服務的，做好事不留名的，因此暫且將他的來源放在一邊，我們只用知道它叫map.png就OK;

光有圖還不行，得來點代碼。

map.js里的幾行代碼：

var i;
var j;window.onload = function (){gamemap();
}var mapimg = new Image();
var map = [[2,2,3,3,0,0,2,2,2,3,3,3,2],[2,0,3,3,0,0,0,0,0,0,0,0,0],[2,0,0,0,0,0,0,0,0,0,0,0,2],[2,0,0,0,0,0,0,0,0,0,3,0,2],	[1,3,0,0,0,0,0,0,0,0,2,0,2],[1,3,0,0,0,0,2,2,3,3,2,0,2],[2,1,1,1,0,0,0,0,0,0,0,0,3],[2,1,1,1,0,0,0,0,0,0,0,0,3],[0,0,0,1,0,0,1,1,2,2,3,0,0],[2,0,0,1,0,0,0,0,0,0,0,0,0],[3,0,0,1,1,1,0,0,1,1,1,0,1],[3,0,0,0,0,0,0,0,0,0,0,0,1],[2,2,2,2,2,3,3,3,0,0,1,1,1],
];
//創建構成地圖的二維數組function gamemap(){var canvas = document.getElementById("map");var context = canvas.getContext("2d");mapimg.src = "./image/map.png";	mapimg.onload = function(){context.fillRect(0, 0, 416, 416);//畫一個長416，寬416的矩形for(i = 0; i < 13; i++){for(j = 0; j < 13; j++){drawTile(i*32, j*32, map[j][i]);}}//循環調用繪制地圖的函數，直到畫完為止}
}function drawTile(x, y, type){var canvas = document.getElementById("map");var context = canvas.getContext("2d");context.drawImage(mapimg, type*32, 0, 32, 32, x, y, 32, 32);
}
//畫地圖的函數

html里很少的幾行代碼：

<!DOCTYPE html>
<html>
<head>
<title>html5 map</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script type="text/javascript" src="./map.js"></script> 
</head>
<body><canvas id="map" width="415px" height="415px" style="border: 1px solid gray;"></canvas>
</body>
</html>

現在的形式相當于我說了一句莫名其妙的英語，而我接下來就要自說自譯。首先html里的代碼等于我說了一句連農村人都懂的“hello”，因此不解釋。當然不排除有些朋友是無意間中計被迫到這里來看的，如果這類朋友對此感興趣但有看不懂的話，在下也不妨給你們提供一些服務：

1.中文的朋友請看：http://www.w3school.com.cn/，上面有詳細的編程介紹

2.Foreign friends：?http://www.w3schools.com/?，The above detailed introduction of the programming

P.S.在下并非是來打廣告的，純屬真心想幫助大家。

進入正題，話雖扯到一邊，但我想一些苦苦求學的同學依然在留戀那些代碼。那么不消耗大家的興趣，接下來就要讓我來用我那"九"寸不爛之舌向大家傾述這些代碼的意義。

Frist,我定義了兩個用來確定地圖塊在地圖數組所對應的變量j和i，這句話說得很模糊，大家看到最后便會懂得。如下：

var i;
var j;

Then,我用window.onload對畫地圖函數進行調用。這里不多說，因為最主要不是這個。如下：

window.onload = function (){gamemap();
}

Next,就是我們建立的用來裝圖片的mapimg和地圖數組了。地圖數組中，0,1,2,3分別代表不同的圖片樣式，但其實，用到的就只有一張圖，這張圖就是我們做好事不留名的map.png，在后面的講解中，大家會明白這是如何辦的。如下代碼：

var mapimg = new Image();
var map = [[2,2,3,3,0,0,2,2,2,3,3,3,2],[2,0,3,3,0,0,0,0,0,0,0,0,0],[2,0,0,0,0,0,0,0,0,0,0,0,2],[2,0,0,0,0,0,0,0,0,0,3,0,2],	[1,3,0,0,0,0,0,0,0,0,2,0,2],[1,3,0,0,0,0,2,2,3,3,2,0,2],[2,1,1,1,0,0,0,0,0,0,0,0,3],[2,1,1,1,0,0,0,0,0,0,0,0,3],[0,0,0,1,0,0,1,1,2,2,3,0,0],[2,0,0,1,0,0,0,0,0,0,0,0,0],[3,0,0,1,1,1,0,0,1,1,1,0,1],[3,0,0,0,0,0,0,0,0,0,0,0,1],[2,2,2,2,2,3,3,3,0,0,1,1,1],
];
//創建構成地圖的二維數組

現在貌似已經準備齊全，但缺少核心部分，因此我用了gamemap()的方法配合drawTile()方法一起用。那么再現一下核心內容：

function gamemap(){var canvas = document.getElementById("map");var context = canvas.getContext("2d");mapimg.src = "./image/map.png";	mapimg.onload = function(){context.fillRect(0, 0, 416, 416);//畫一個長416，寬416的矩形for(i = 0; i < 13; i++){for(j = 0; j < 13; j++){drawTile(i*32, j*32, map[j][i]);}}//循環調用繪制地圖的函數，直到畫完為止}
}function drawTile(x, y, type){var canvas = document.getElementById("map");var context = canvas.getContext("2d");context.drawImage(mapimg, type*32, 0, 32, 32, x, y, 32, 32);
}
//畫地圖的函數

首先在gamemap()中在下取出<body>里的<canvas>的id，然后用mapimg.src="";定義了要顯示的圖片，具體用canvas顯示圖片可以去w3cschool上看看，或者去我上一篇看看，這里不多說了。然后進行繪畫。首先我畫了一個矩形，看注釋就知道。然后進入我最愛的循環for。因為要畫13*13的地圖，所以要循環十三次，然后在循環里再進行循環，使i和j遍歷數組map，當i的值為0時，j對應的值如下：

循環次數	i的值	j的值
1	0	0
2	0	1
3	0	2
4	0	4
5	0	5
6	0	6
7	0	7
8	0	8
9	0	9
10	0	10
11	0	11
12	0	12
13	0	13

由此可見，當i為0時，也就是說遍歷二維數組map第一行，然后進入j的循環，從而把第一行遍歷所有數據都讀完。當i為2使，就是說遍歷二維數組map第二行，然后又進入j的循環，從而把第二行遍歷所有數據都讀完。由此類推，整個二維數組map就被讀完了。然后每當j變一次，就調用drawTile()并給他的參數賦值，再在drawTile()中進行繪制，從而達到畫出地圖的效果。

那么在drawTile中，我們做了什么處理呢？首先我們同樣是取出id，這樣可以方便繪制，然后用html5中drawImage()的方法，進行繪制。那么drawImage()怎么用呢？

看看w3cschool上的介紹吧，底下是幾張截圖

（來自http://www.w3school.com.cn/htmldom/met_canvasrenderingcontext2d_drawimage.asp）

語法

drawImage(image, x, y)
drawImage(image, x, y, width, height)
drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight,destX, destY, destWidth, destHeight)

參數	描述
image	所要繪制的圖像。這必須是表示 <img> 標記或者屏幕外圖像的 Image 對象，或者是 Canvas 元素。
x, y	要繪制的圖像的左上角的位置。
width, height	圖像所應該繪制的尺寸。指定這些參數使得圖像可以縮放。
sourceX, sourceY	圖像將要被繪制的區域的左上角。這些整數參數用圖像像素來度量。
sourceWidth, sourceHeight	圖像所要繪制區域的大小，用圖像像素表示。
destX, destY	所要繪制的圖像區域的左上角的畫布坐標。
destWidth, destHeight	圖像區域所要繪制的畫布大小。

看了介紹，相信大家對它有了了解，那么我就不解釋了。當drawTile()的參數被賦值完成時，就會按照要求畫出地圖。由于沒個地圖塊大小為32，所以大家可以看到很多32，哈哈。恐怕大家早就看得不賴煩了，因為這些對于大伙很簡單，我還沒講，我相信大家早就明白了。至于代碼下載，這次暫時沒有，我最近越來越懶了。。。代碼不多，大家就小心翼翼的復制粘貼吧。。。

運行效果：

那么我們接下來就來研究研究程序大師張路斌的html5開源引擎——lufylegend.js。

三、lufylegend.js的使用

首先我引用官方的介紹作為開篇：lufylegend是一個HTML5開源引擎，它實現了利用仿ActionScript3.0的語法進行HTML5的開發，包含了LSprite，LBitmapData，LBitmap，LLoader，LURLLoader，LTextField，LEvent等多個AS開發人員熟悉的類，支持Google Chrome，Firefox，Opera，IE9，IOS，Android等多種熱門環境。利用lufylegend可以輕松的使用面向對象編程，并且可以配合Box2dWeb制作物理游戲，另外它還內置了LTweenLite緩動類等非常實用的功能，現在開始使用它吧，它可以讓你更快的進入HTML5的世界！

關注CSDN的朋友不難發現，有一位牛人就在我們身邊，他就是張路斌。我第一次看見他的文章是在去年，當我看到他用他的引擎開發憤怒的小鳥時，我別提我對他有多佩服了。后來我進一步了解，開始學習他的html5引擎lufylegend。那么我還是別在這里吹捧作者了，開始進如正題。

lufylegend下載地址和API介紹：http://lufylegend.com/lufylegend
官方博客：http://blog.csdn.net/lufy_legend
聯系官方：lufy.legend@gmail.com

以下是幾個lufylegend的幾個例子：

1).lufylegend實現游戲進度條

<!DOCTYPE html>
<html>
<head>
<title>html5 game</title>
<script type="text/javascript" src="./lufylegend-1.5.2.min.js"></script>
<script type="text/javascript" src="./lufylegend-1.5.2.js"></script>
<script>
init(50,"mylegend",800,400,main);
var imgData = [{name:"山水畫",path:"./山水畫.jpg"},{name:"水墨古城",path:"./水墨古城.jpg"},{name:"水墨畫",path:"./水墨畫.jpg"},{name:"夕陽西下",path:"./夕陽西下.jpg"},{name:"英國小鎮",path:"./英國小鎮.jpg"},{name:"中國風的水墨畫",path:"./中國風的水墨畫.jpg"}
];
//圖片path數組  var imglist = {}; 
//讀取完的圖片數組  var loadIndex = 0;var loadingLayer;
//建立加載進度層var loadingText;
//建立loadingText打字區function main(){   loadingLayer = new LSprite();    addChild(loadingLayer);  loadingText = new LTextField();loadingText.size = 32;loadingText.font = "Tahoma";loadingText.color = "dimgray";loadingText.text = "Loading……";loadingText.stroke = "ture";loadingText.lineWidth = 2;loadingText.x = 320;loadingText.y = 140;loadingLayer.addChild(loadingText);//實例化進度條層loadImage();  //開始讀取圖片
}  var loadingX = 250;
//設定進度條X坐標var loadingLong = 350;
//設定進度條長度function loadOver(){loadingLayer.removeChild(loadingText);  removeChild(loadingLayer);    alert("COMPLETE"); 
}function loadImage(){    if(loadIndex == imgData.length){loadingLayer.graphics.drawRect(1,"black",[loadingX, 203, loadingLong*(loadIndex/imgData.length), 24],true,"orange");setTimeout(function(){loadOver();}, 500); return;  }  //圖片全部讀取完成，開始初始化游戲loader = new LLoader();  loader.addEventListener(LEvent.COMPLETE,loadComplete);  loader.load(imgData[loadIndex].path,"bitmapData"); //開始讀取圖片
}  function loadComplete(event){    loadingLayer.graphics.clear();  loadingLayer.graphics.drawRect(1,"black",[loadingX, 200, loadingLong, 30],true,"white");  loadingLayer.graphics.drawRect(1,"black",[loadingX, 203, loadingLong*(loadIndex/imgData.length), 24],true,"orange");//進度條顯示  imglist[imgData[loadIndex].name] = loader.content;  //儲存圖片數據  loadIndex++; loadImage(); //讀取下一張圖片  
} 
</script>
</head>
<body><div id="mylegend">loading......</div>
</body>
</html>

2)lufylegend實現動畫播放

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>html5 game</title><script type="text/javascript" src="./lufylegend-1.5.2.min.js"></script><script type="text/javascript">init(150,"legend",800,450,main);var imgData = [{name:"player",path:"./player.png"}];var imglist;var backLayer,hero;function main(){LLoadManage.load(imgData,null,gameInit);}function gameInit(result){imglist = result;backLayer = new LSprite();addChild(backLayer);var list = LGlobal.divideCoordinate(256, 256, 4, 4);var data = new LBitmapData(imglist["player"],0,0,64,64);hero = new LAnimation(backLayer,data,list);backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);}function onframe(){hero.onframe();}</script></head><body><div id="legend">loading……</div></body>
</html>

3)lufylegend實現繪畫

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./lufylegend-1.5.2.min.js"></script>
<script>init(20,"mylegend",500,400,main);function main(){var backLayer = new LSprite();addChild(backLayer);backLayer.graphics.drawArc(2,"dimgray",[100,100,50,0,2*Math.PI],true,"lightgray");backLayer.graphics.drawRect(2,"dimgray",[100,200,50,100],true,"lightgray");}
</script>
</head>
<body><div id="mylegend"></div>
</body>
</html>

今天對lufylegend的初探就到此為止，下次我將對lufylegend的具體使用進行介紹，希望大家多支持，謝謝！我將以更好的文章來回報大家。

----------------------------------------------------------------

歡迎大家轉載我的文章。

轉載請注明：轉自Yorhom's Game Box

歡迎繼續關注我的博客

轉載于:https://www.cnblogs.com/java20130808/archive/2013/01/23/3241573.html