思洋互动网站建设学前班

具体实现看下面的代码 

1. //图片path数组  
2.  
3. var imgData = new Array();   
4. //读取完的图片数组   
5. var imglist = {};   
6. function main(){   
7.         //准备读取图片   
8.         imgData.push({name:"map",path:"./image/map.jpg"});   
9.         imgData.push({name:"mingren",path:"./image/mingren.png"});   
10.         imgData.push({name:"e1",path:"./image/e1.png"});   
11.         imgData.push({name:"e2",path:"./image/e2.png"});   
12.         //实例化进度条层   
13.         loadingLayer = new LSprite();   
14.         loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");   
15.         addChild(loadingLayer);   
16.         //开始读取图片   
17.         loadImage();   
18. }   
19. function loadImage(){   
20.         //图片全部读取完成，开始初始化游戏   
21.         if(loadIndex >= imgData.length){   
22.                 removeChild(loadingLayer);   
23.                 legendLoadOver();   
24.                 gameInit();   
25.                 return;   
26.         }   
27.         //开始读取图片   
28.         loader = new LLoader();   
29.         loader.addEventListener(LEvent.COMPLETE,loadComplete);   
30.         loader.load(imgData[loadIndex].path,"bitmapData");   
31. }   
32. function loadComplete(event){   
33.         //进度条显示   
34.         loadingLayer.graphics.clear();   
35.         loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");   
36.         loadingLayer.graphics.drawRect(1,"black",[50, 203, 200*(loadIndex/imgData.length), 14],true,"#000000");   
37.         //储存图片数据   
38.         imglist[imgData[loadIndex].name] = loader.content;   
39.         //读取下一张图片   
40.         loadIndex++;   
41.         loadImage();   
42. }   

上面的代码不难明白，当图片没有读取完之前，会不断循环loadImage和loadComplete两个方法，当读取完之后，移除进度条，用legendLoadOver告诉游戏已经读取完成，然后调用gameInit方法，进行游戏的初始化工作。
广州网站建设,网站建设,广州网页设计,广州网站设计

看gameInit方法

1. function gameInit(event){  
2.         //游戏层显示初始化   
3.         layerInit();   
4.         //添加地图   
5.         addMap();   
6.         //添加人物   
7.         addChara();   
8. }   

在gameInit方法中，首先进行游戏层的初始化，然后添加游戏地图，然后添加人物

游戏层显示初始化，按照我们一开始所说，我们一次来初始化地图层，人物层，效果层，对话层，控制层

1. //游戏层显示初始化  
2. function layerInit(){   
3.         //游戏底层添加   
4.         backLayer = new LSprite();   
5.         addChild(backLayer);   
6.         //地图层添加   
7.         mapLayer = new LSprite();   
8.         backLayer.addChild(mapLayer);   
9.         //人物层添加   
10.         charaLayer = new LSprite();   
11.         backLayer.addChild(charaLayer);   
12.         //效果层添加   
13.         effectLayer = new LSprite();   
14.         backLayer.addChild(effectLayer);   
15.         //对话层添加   
16.         talkLayer = new LSprite();   
17.         backLayer.addChild(talkLayer);   
18.         //控制层添加   
19.         ctrlLayer = new LSprite();   
20.         backLayer.addChild(ctrlLayer);   
21. }  

有了游戏层次的划分，我们在添加游戏对象的时候，将地图添加到地图层，人物添加到人物层，他们就会依次显示在游戏的界面

下面开始添加地图

首先我们需要准备好显示地图的数组
广州网站建设,网站建设,广州网页设计,广州网站设计

1. //地图图片数组  
2. var map = [   
3. [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18],   
4. [18,18,18,17,17,17,17,17,17,17,17,17,55,55,18],   
5. [18,18,17,17,17,17,18,18,17,17,17,17,55,55,18],   
6. [18,17,17,17,18,18,18,18,18,17,17,55,55,17,18],   
7. [18,17,17,18,22,23,23,23,24,18,17,55,55,17,18],   
8. [18,17,17,18,25,28,26,79,27,18,55,55,17,17,18],   
9. [18,17,17,17,17,10,11,12,18,18,55,55,17,17,18],   
10. [18,18,17,17,10,16,16,16,11,55,55,17,17,17,18],   
11. [18,18,17,17,77,16,16,16,16,21,21,17,17,17,18],   
12. [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18]   
13. ];   

这些数字分别对应着图中如下位置

然后看下面代码

1. //添加地图  
2. function addMap(){   
3.         var i,j,index,indexX,indexY;   
4.         var bitmapdata,bitmap;   
5.         //地图图片数据   
6.         bitmapdata = new LBitmapData(imglist["map"]);   
7.         //将地图图片拆分，得到拆分后的各个小图片的坐标数组   
8.         imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,10,10);   
9.  
10.         //在地图层上，画出15*10的小图片   
11.         for(i=0;i<10;i++){   
12.                 for(j=0;j<15;j++){   
13.                         //从地图数组中得到相应位置的图片坐标   
14.                         index = map[i][j];   
15.                         //小图片的竖坐标   
16.                         indexY = Math.floor(index /10);   
17.                         //小图片的横坐标   
18.                         indexindexX = index - indexY*10;   
19.                         //得到小图片   
20.                         bitmapdata = new LBitmapData(imglist["map"],indexX*32,indexY*32,32,32);   
21.                         bitmap = new LBitmap(bitmapdata);   
22.                         //设置小图片的显示位置   
23.                         bitmap.x = j*32;   
24.                         bitmap.y = i*32;   
25.                         //将小图片显示到地图层   
26.                         mapLayer.addChild(bitmap);   
27.                 }   
28.         }   
29. }   

这样，我们就把预先设置好的图片显示到了游戏界面上，形成了地图

先把addChara方法加上

1. //添加人物  
2. function addChara(){   
3. }   

然后运行游戏,可以得到下面画面

游戏人物的实现

为了更好的实现游戏人物的控制，我们新建一个游戏人物类Character.js

里面代码如下

1. function Character(data,row,col,speed){  
2.         base(this,LSprite,[]);   
3.         var self = this;   
4.         //设定人物动作速度   
5.         self.speed = speed==null?3:speed;   
6.         self.speedIndex = 0;   
7.         //设定人物大小   
8.         data.setProperties(0,0,data.image.width/col,data.image.height/row);   
9.         //得到人物图片拆分数组   
10.         var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);   
11.         //设定人物动画   
12.         self.anime = new LAnimation(this,data,list);   
13. };   
14. Character.prototype.onframe = function (){   
15.         var self = this;   
16.         if(self.speedIndex++ < self.speed)return;   
17.         self.speedIndex = 0;   
18.         self.anime.onframe();   
19. };   

在legendForHtml5Programming里，有一个LAnimation类，用来实现图片数组顺序播放，形成动画。使用LAnimation类需要三个参数，一个是显示动画的层，一个是图片，一个是图片的坐标数组

然后，调用LAnimation类的onframe方法，就可以实现动画的播放了

在index.html中引入Character类，然后修改addChara方法

1. //添加人物  
2. function addChara(){   
3.         bitmapdata = new LBitmapData(imglist["mingren"]);   
4.         player = new Character(bitmapdata,4,4);   
5.         player.x = 32*5;   
6.         player.y = 32*6;   
7.         charaLayer.addChild(player);   
8.            
9. }   

在gameInit的末尾添加循环事件

1. //添加贞事件，开始游戏循环  
2.         backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);   

最后，添加onframe方法

1. function onframe(){   
2.         player.onframe();   
3. }   

运行代码，看到了吗

一个会动的鸣人出现在游戏的地图上了

游戏演示：http://fsanguo.comoj.com/html5/rpg/index.html

最后，附上这次的游戏源代码：http://fsanguo.comoj.com/html5/rpg5/rpg5.rar

原文链接：http://www.cnblogs.com/html5cn/articles/2333806.html