本次教程將向大家講解如何用html5將小地圖塊拼成大地圖，以及如何用現有的進階html5遊戲開發庫件lufylegend.js開發遊戲。
首先讓我們來瞭解瞭解如何用html5實現動畫，畢竟“動靜結合”是先有動再有靜。看了上一章的內容，或許你就有了對html5實現動畫有了初步瞭解：
html5遊戲開發--"動靜"結合(一):
http://blog.csdn.net/yorhomwang/article/details/8301451
早在上一章以前我就向大家介紹過，許多遊戲的地圖是用小地圖塊拼成的。那麼既然那些遊戲能通過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的幾個例子：
<!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>
<!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
歡迎繼續關注我的部落格
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
