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

接下來，打開Main.js

在里面加入

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

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

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

雖說讀取圖片只需要一個

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

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

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

#p#

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

//圖片path數(shù)組  
 
var imgData = new Array();   
//讀取完的圖片數(shù)組   
var imglist = {};   
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 = new LSprite();   
        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 = new LLoader();   
        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ū)拥某跏蓟?，然后添加游戲地圖，然后添加人物

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

//游戲?qū)语@示初始化  
function layerInit(){   
        //游戲底層添加   
        backLayer = new LSprite();   
        addChild(backLayer);   
        //地圖層添加   
        mapLayer = new LSprite();   
        backLayer.addChild(mapLayer);   
        //人物層添加   
        charaLayer = new LSprite();   
        backLayer.addChild(charaLayer);   
        //效果層添加   
        effectLayer = new LSprite();   
        backLayer.addChild(effectLayer);   
        //對話層添加   
        talkLayer = new LSprite();   
        backLayer.addChild(talkLayer);   
        //控制層添加   
        ctrlLayer = new LSprite();   
        backLayer.addChild(ctrlLayer);   
}  

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

下面開始添加地圖

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

//地圖圖片數(shù)組  
var map = [   
[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ù)字分別對應著圖中如下位置

然后看下面代碼

//添加地圖  
function addMap(){   
        var i,j,index,indexX,indexY;   
        var bitmapdata,bitmap;   
        //地圖圖片數(shù)據(jù)   
        bitmapdata = new LBitmapData(imglist["map"]);   
        //將地圖圖片拆分，得到拆分后的各個小圖片的坐標數(shù)組   
        imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,10,10);   
 
        //在地圖層上，畫出15*10的小圖片   
        for(i=0;i<10;i++){   
                for(j=0;j<15;j++){   
                        //從地圖數(shù)組中得到相應位置的圖片坐標   
                        index = map[i][j];   
                        //小圖片的豎坐標   
                        indexY = Math.floor(index /10);   
                        //小圖片的橫坐標   
                        indexindexX = index - indexY*10;   
                        //得到小圖片   
                        bitmapdata = new LBitmapData(imglist["map"],indexX*32,indexY*32,32,32);   
                        bitmap = new LBitmap(bitmapdata);   
                        //設置小圖片的顯示位置   
                        bitmap.x = j*32;   
                        bitmap.y = i*32;   
                        //將小圖片顯示到地圖層   
                        mapLayer.addChild(bitmap);   
                }   
        }   
}   

這樣，我們就把預先設置好的圖片顯示到了游戲界面上，形成了地圖

先把addChara方法加上

//添加人物  
function addChara(){   
}   

然后運行游戲,可以得到下面畫面

游戲人物的實現(xiàn)

為了更好的實現(xiàn)游戲人物的控制，我們新建一個游戲人物類Character.js

里面代碼如下

function Character(data,row,col,speed){  
        base(this,LSprite,[]);   
        var self = this;   
        //設定人物動作速度   
        self.speed = speed==null?3:speed;   
        self.speedIndex = 0;   
        //設定人物大小   
        data.setProperties(0,0,data.image.width/col,data.image.height/row);   
        //得到人物圖片拆分數(shù)組   
        var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);   
        //設定人物動畫   
        self.anime = new LAnimation(this,data,list);   
};   
Character.prototype.onframe = function (){   
        var self = this;   
        if(self.speedIndex++ < self.speed)return;   
        self.speedIndex = 0;   
        self.anime.onframe();   
};   

在legendForHtml5Programming里，有一個LAnimation類，用來實現(xiàn)圖片數(shù)組順序播放，形成動畫。使用LAnimation類需要三個參數(shù)，一個是顯示動畫的層，一個是圖片，一個是圖片的坐標數(shù)組

然后，調(diào)用LAnimation類的onframe方法，就可以實現(xiàn)動畫的播放了

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

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

在gameInit的末尾添加循環(huán)事件

//添加貞事件，開始游戲循環(huán)  
        backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);   

***，添加onframe方法

function onframe(){   
        player.onframe();   
}   

運行代碼，看到了嗎

一個會動的鳴人出現(xiàn)在游戲的地圖上了

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

***，附上這次的游戲源代碼：http://fsanguo.comoj.com/html5/rpg5/rpg5.rar

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

【編輯推薦】

1. HTML 5開發(fā)RPG游戲之二（跑起來吧英雄）
2. HTML 5開發(fā)RPG游戲之三（卷軸和對話）
3. HTML 5開發(fā)RPG游戲之四（游戲腳本化）
4. 開發(fā)HTML5跨平臺游戲相關經(jīng)驗
5. HTML 5開發(fā)的優(yōu)秀網(wǎng)頁游戲