html5游戏开发--"动静"结合(二)-地图实现 & 初探lufylegend.js
一、前言
本次教程将向大家讲解如何用html5将小地图块拼成大地图，以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏。
首先让我们来了解了解如何用html5实现动画，毕竟“动静结合”是先有动再有静。看了上一章的内容，或许你就有了对html5实现动画有了初步了解：
html5游戏开发--"动静"结合(一):
http://blog.csdn.net/yorhomwang/article/details/8301451
早在上一章以前我就向大家介绍过，许多游戏的地图是用小地图块拼成的。那么既然那些游戏能通过AS或者其他编程语言实现，那我们的html5也丝毫不逊色于它们。接下来就是今天我要为大家准备的图片：
map.png这张图片具体来自哪里我不太清楚，不过它是为我们来服务的，做好事不留名的，因此暂且将他的来源放在一边，我们只用知道它叫map.png就OK;
光有图还不行，得来点代码。
map.js里的几行代码：
循环次数i的值j的值10020130240450560670780890910010110111201213013由此可见，当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><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的具体使用进行介绍，希望大家多支持，谢谢！我将以更好的文章来回报大家。
