在地圖顯示的時候，首先把圖片切割，然后在根據(jù)預先設(shè)定好的位置顯示到地圖層上，這樣我們就看到了一張完整的地圖了

接下來，打開Main.js

在里面加入

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

在legendForHtml5Progarmming中，用init這個函數(shù)來初始化canvas，上面的代碼表示，初始化一個速度為50，名字為mylegend，大小為480*320的游戲界面，初始化完成后調(diào)用main(),這個速度值是說每個多少毫秒游戲循環(huán)一次，所以這個值設(shè)定的越小，游戲運行的速度就越快

因為要調(diào)用main方法，所以我們要寫一個main方法，main方法里做一些簡單的準備工作。

雖說讀取圖片只需要一個

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

但是游戲中往往用到很多張圖片，你可以用到哪一張再加載哪一張，也可以一次性全部加載完，然后再開始顯示游戲

為了一次性把圖片加載完，我的做法是，將需要的圖片放到一個數(shù)組里，然后設(shè)定一個索引，每加載一個圖片，讓這個索引加1，當這個索引小于數(shù)組的長度，則繼續(xù)加載，直到將數(shù)組中的圖片全部加載完，然后開始進行下一步的工作

具體實現(xiàn)看下面的代碼

//圖片path數(shù)組

varimgData=newArray();

//讀取完的圖片數(shù)組

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");

//儲存圖片數(shù)據(jù)

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

//讀取下一張圖片

loadIndex++;

loadImage();

}

上面的代碼不難明白，當圖片沒有讀取完之前，會不斷循環(huán)loadImage和loadComplete兩個方法，當讀取完之后，移除進度條，用legendLoadOver告訴游戲已經(jīng)讀取完成，然后調(diào)用gameInit方法，進行游戲的初始化工作。

看gameInit方法

function?gameInit(event){

//游戲?qū)语@示初始化

layerInit();

//添加地圖

addMap();

//添加人物

addChara();

}

在gameInit方法中，首先進行游戲?qū)拥某跏蓟?#xff0c;然后添加游戲地圖，然后添加人物

游戲?qū)语@示初始化，按照我們一開始所說，我們一次來初始化地圖層，人物層，效果層，對話層，控制層

//游戲?qū)语@示初始化

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);

}

有了游戲?qū)哟蔚膭澐?#xff0c;我們在添加游戲?qū)ο蟮臅r候，將地圖添加到地圖層，人物添加到人物層，他們就會依次顯示在游戲的界面

下面開始添加地圖

首先我們需要準備好顯示地圖的數(shù)組

//地圖圖片數(shù)組

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]

];

這些數(shù)字分別對應著圖中如下位置

總結(jié)

以上是生活随笔為你收集整理的html5rpg游戏策划案,HTML 5开发RPG游戏之一（地图人物实现）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。