html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现 ... ...

了解上两篇的内容请点击：

html5游戏开发-零基础开发RPG游戏-开源讲座(一)

http://www.html5cn.org/article-1737-1.html

html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄

http://www.html5cn.org/article-1738-1.html

前两篇，RPG的开发已经实现了添加地图和添加游戏人物，本篇来实现地图的卷轴滚动和人物对话的实现，效果如下

本次开发，更新了一下库件至1.3，请点击下面的链接，下载库件1.3版以上版本

http://code.google.com/p/legendforhtml5programming/downloads/list

地图的滚动

关于地图的滚动原理，可以参照下图

按照上图说明，实现地图滚动，只需要先把即将出现的地图（图中黄色部分）画上，然后滚动地图，待地图滚动完毕之后，将屏幕之外的部分（图中绿色部分）移除

首先要添加一个变量来控制地图是否滚动

var mapmove = false;

复制代码
然后，在人物移动的时候，判断地图是否需要滚动

* 地图是否滚动

**/

Character.prototype.checkMap = function (dir){

var self = this;

mapmove = false;

//如果不是英雄，则地图不需要滚动

if(!self.isHero)return;

switch (dir){

case UP:

if(self.y + charaLayer.y> STEP)break;

if(mapLayer.y >= 0)break;

addMap(0,-1);

mapmove = true;

break;

case LEFT:

if(self.x + charaLayer.x > STEP)break;

if(mapLayer.x >= 0)break;

addMap(-1,0);

mapmove = true;

break;

case RIGHT:

if(self.x < 480 - 2*STEP)break;

if(480 - mapLayer.x >= map[0].length*STEP)break;

addMap(1,0);

mapmove = true;

break;

case DOWN:

if(self.y < 288 - 2*STEP)break;

if(288 - mapLayer.y >= map.length*STEP)break;

addMap(0,1);

mapmove = true;

break;

}

};

复制代码
在移动过程中，判断地图是否处于滚动状态，如果地图处于滚动，则滚动地图，否则移动人物

* 开始移动

**/

Character.prototype.onmove = function (){

var self = this;

//设定一个移动步长中的移动次数

var ml_cnt = 4;

//计算一次移动的长度

var ml = STEP/ml_cnt;

//根据移动方向，开始移动

switch (self.direction){

case UP:

if(mapmove){

mapLayer.y += ml;

charaLayer.y += ml;

}

self.y -= ml;

break;

case LEFT:

if(mapmove){

mapLayer.x += ml;

charaLayer.x += ml;

}

self.x -= ml;

break;

case RIGHT:

if(mapmove){

mapLayer.x -= ml;

charaLayer.x -= ml;

}

self.x += ml;

break;

case DOWN:

if(mapmove){

mapLayer.y -= ml;

charaLayer.y -= ml;

}

self.y += ml;

break;

}

self.moveIndex++;

//当移动次数等于设定的次数，开始判断是否继续移动

if(self.moveIndex >= ml_cnt){

//一个地图步长移动完成后，如果地图处于滚动状态，则移除多余地图块

if(mapmove)delMap();

self.moveIndex = 0;

//如果已经松开移动键，或者前方为障碍物，则停止移动，否则继续移动

if(!isKeyDown || !self.checkRoad()){

self.move = false;

return;

}else if(self.direction != self.direction_next){

self.direction = self.direction_next;

self.anime.setAction(self.direction);

}

//地图是否滚动

self.checkMap(self.direction);

}

};

复制代码
最后，将地图的数组和地形扩大为大于屏幕大小

var map = [

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

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

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

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

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

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

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

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

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

[18,18,17,17,77,16,16,16,16,55,55,17,17,17,17,17,18],

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

];

//地图地形数组

var mapdata = [

[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],

[1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,1],

[1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1],

[1,0,0,0,1,1,1,1,1,0,0,1,1,0,0,0,1],

[1,0,0,1,1,1,1,1,1,1,0,1,1,0,0,0,1],

[1,0,0,1,1,1,0,1,1,1,1,1,0,0,0,0,1],

[1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1],

[1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],

[1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],

[1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],

[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]

];

复制代码
为了实现地图滚动，修改添加地图的方法，根据参数来实现添加上面图片的黄色地图