html5rpg游戏策划案,HTML 5开发RPG游戏之一（地图人物实现）

在地图显示的时候，首先把图片切割，然后在根据预先设定好的位置显示到地图层上，这样我们就看到了一张完整的地图了

接下来，打开Main.js

在里面加入

init(50,"mylegend",480,320,main);

在legendForHtml5Progarmming中，用init这个函数来初始化canvas，上面的代码表示，初始化一个速度为50，名字为mylegend，大小为480*320的游戏界面，初始化完成后调用main(),这个速度值是说每个多少毫秒游戏循环一次，所以这个值设定的越小，游戏运行的速度就越快

因为要调用main方法，所以我们要写一个main方法，main方法里做一些简单的准备工作。

虽说读取图片只需要一个

loader.load("map.jpg","bitmapData");

但是游戏中往往用到很多张图片，你可以用到哪一张再加载哪一张，也可以一次性全部加载完，然后再开始显示游戏

为了一次性把图片加载完，我的做法是，将需要的图片放到一个数组里，然后设定一个索引，每加载一个图片，让这个索引加1，当这个索引小于数组的长度，则继续加载，直到将数组中的图片全部加载完，然后开始进行下一步的工作

具体实现看下面的代码

//图片path数组

varimgData=newArray();

//读取完的图片数组

varimglist= {};

function main(){

//准备读取图片

imgData.push({name:"map",path:"./image/map.jpg"});

imgData.push({name:"mingren",path:"./image/mingren.png"});

imgData.push({name:"e1",path:"./image/e1.png"});

imgData.push({name:"e2",path:"./image/e2.png"});

//实例化进度条层

loadingLayer=newLSprite();

loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");

addChild(loadingLayer);

//开始读取图片

loadImage();

}

function loadImage(){

//图片全部读取完成，开始初始化游戏

if(loadIndex>= imgData.length){

removeChild(loadingLayer);

legendLoadOver();

gameInit();

return;

}

//开始读取图片

loader=newLLoader();

loader.addEventListener(LEvent.COMPLETE,loadComplete);

loader.load(imgData[loadIndex].path,"bitmapData");

}

function loadComplete(event){

//进度条显示

loadingLayer.graphics.clear();

loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");

loadingLayer.graphics.drawRect(1,"black",[50, 203, 200*(loadIndex/imgData.length), 14],true,"#000000");

//储存图片数据

imglist[imgData[loadIndex].name] = loader.content;

//读取下一张图片

loadIndex++;

loadImage();

}

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

看gameInit方法

function gameInit(event){

//游戏层显示初始化

layerInit();

//添加地图

addMap();

//添加人物

addChara();

}

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

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

//游戏层显示初始化

function layerInit(){

//游戏底层添加

backLayer=newLSprite();

addChild(backLayer);

//地图层添加

mapLayer=newLSprite();

backLayer.addChild(mapLayer);

//人物层添加

charaLayer=newLSprite();

backLayer.addChild(charaLayer);

//效果层添加

effectLayer=newLSprite();

backLayer.addChild(effectLayer);

//对话层添加

talkLayer=newLSprite();

backLayer.addChild(talkLayer);

//控制层添加

ctrlLayer=newLSprite();

backLayer.addChild(ctrlLayer);

}

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

下面开始添加地图

首先我们需要准备好显示地图的数组

//地图图片数组

varmap= [

[18,18,18,18,18,18,18,18,18,18,18,18,55,55,18],

[18,18,18,17,17,17,17,17,17,17,17,17,55,55,18],

[18,18,17,17,17,17,18,18,17,17,17,17,55,55,18],

[18,17,17,17,18,18,18,18,18,17,17,55,55,17,18],

[18,17,17,18,22,23,23,23,24,18,17,55,55,17,18],

[18,17,17,18,25,28,26,79,27,18,55,55,17,17,18],

[18,17,17,17,17,10,11,12,18,18,55,55,17,17,18],

[18,18,17,17,10,16,16,16,11,55,55,17,17,17,18],

[18,18,17,17,77,16,16,16,16,21,21,17,17,17,18],

[18,18,18,18,18,18,18,18,18,55,55,18,18,18,18]

];

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