项目地址

https://github.com/mangenotwork/HABL-H5

基于 lufylegend 开发

lufylegend 框架官网 ：  http://www.lufylegend.com/
lufylegend是一个兼容性极高，功能极多，使用方便的HTML5游戏引擎。

游戏地图

var script = {
	stage01:{
		// 添加角色信息
		add:[
		     {chara:"player",img:"hero",x:1,y:1}
		    ],
		// 地图渲染
		map:[
			[ 4, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3],
			[ 2, 0, 0, 9, 0, 0, 0,10, 0, 0, 0,10, 0, 0, 0,10, 0, 0, 0,10, 0, 0, 0, 0, 2],//1
			[ 2, 0, 0, 9, 0, 0, 0,10, 0, 0, 0,10, 0, 0, 0,10, 0, 0, 0,10, 0, 0, 0, 0, 2],
			[ 2, 0, 0, 9, 0, 0, 0,10, 0, 0, 0,10, 0, 0, 0,10, 0, 0, 0,10, 0, 0, 0, 0, 2],
			[ 2, 0, 0, 1, 1, 8, 1, 1, 1, 8, 1, 1, 1, 8, 1, 1, 1, 8, 1, 1, 1, 8, 1, 1, 2],
			[ 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2],//5
			[ 2, 7, 7, 8, 7, 7, 6, 7, 7, 6, 7, 6, 8, 7, 7, 7, 6, 6, 7, 8, 6, 7, 7, 7, 2],
			[ 2, 0, 0, 0, 0, 0, 2, 0, 0, 0,10, 0, 0, 9, 0, 0, 0, 0,10, 0, 9, 0, 0, 0, 2],
			[ 2, 0, 0, 0, 0, 0, 2, 0, 0, 0,10, 0, 0, 9, 0, 0, 0, 0,10, 0, 9, 0, 0, 0, 2],
			[ 2, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 9, 0, 0, 0, 0,10, 0, 9, 0, 0, 0, 2],
			[ 2, 1, 1, 1, 1, 1, 2, 0, 0, 0,10, 0, 0, 0, 0, 0, 0, 0,10, 0, 0, 0, 0, 0, 2],//10
			[ 2, 0, 0, 0, 0, 0, 2, 1, 1, 1, 1, 0, 0, 9, 0, 0, 0, 0,10, 0, 9, 0, 0, 0, 2],
			[ 2, 0, 0, 0, 0, 0, 2, 0, 0, 0,10, 0, 0, 9, 0, 0, 0, 0,10, 0, 9, 0, 0, 0, 2],
			[ 2, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1, 1, 8, 1, 1, 1, 0, 1, 1, 8, 1, 2],
			[ 2, 0, 0, 0, 0, 0, 0, 0, 0, 0,10, 0, 0, 9, 0, 0, 0, 0,10, 0, 9, 0, 0, 0, 2],
			[ 2, 1, 8, 1, 1, 1, 2, 1, 1, 1, 1, 0, 0, 9, 0, 0, 0, 0,10, 0, 9, 0, 0, 0, 2],//15
			[ 2, 0, 0, 0, 0, 0, 2, 0, 0, 0,10, 0, 0, 9, 0, 0, 0, 0,10, 0, 9, 0, 0, 0, 2],
			[ 2, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 1, 1, 1, 8, 1, 1, 1, 1, 1, 1, 1, 2],
			[ 2, 0, 0, 0, 0, 0, 2, 0, 0, 0,10, 0, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2],
			[ 2, 0, 0, 0, 0, 0, 2, 0, 0, 0,10, 0, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2],
			[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
			],
		// 地图碰撞数据  1 不可移动 0可移动 2当前玩家位置  25*21
		mapData:[
			[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[ 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1],//1
			[ 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
			[ 1, 3, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
			[ 1, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1],
			[ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],//5
			[ 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
			[ 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],//10
			[ 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1],
			[ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
			[ 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 1],//15
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 8, 1, 1, 1, 1, 1, 1, 1, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
			[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
			],
			// 地图碰撞数据  1 不可移动 0可移动 2当前玩家位置  25*21
		sim_mapData:[
			[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
			[ 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1],//1
			[ 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
			[ 1, 3, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
			[ 1, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1],
			[ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],//5
			[ 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
			[ 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1],//10
			[ 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1],
			[ 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
			[ 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],//15
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 8, 1, 1, 1, 1, 1, 1, 1, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
			[ 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
			[ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
			]
	}
};

//显示游戏界面层
function interface_Layer_show(){
	interface_Layer = new LSprite();
   	backLayer.addChild(interface_Layer);
   	
   	//背景
	interface_Layer.graphics.drawRect(5,'#cccccc',[0,0,
		32*12+5,32*12+5],true,'#cccccc');
	

	// 游戏显示层位置
	interface_Layer.x =  14;
	interface_Layer.y = 115;

	//地图层添加
	mapLayer = new LSprite();
	interface_Layer.addChild(mapLayer);
	//地图图片初始化	
	//initMap();

	//地图位置初始化
	mapLayer.x = 0;
	mapLayer.y = 0;

	//地图层初始化
	mapLayer.removeAllChild();
	//地图数据获取
	var map_info = script.stage01;
	map = map_info.map;
	mapdata = map_info.mapData;
	smapdata =  map_info.sim_mapData
	
	//添加地图
	addMap(0,0);
	
	//initMap()

	delMap();

	

	//人物层添加
	charaLayer = new LSprite();
	interface_Layer.addChild(charaLayer);

	//人物层初始化
	charaLayer.removeAllChild();
	addChara();

	//

	
	

	//监听游戏循环事件
	interface_Layer.addEventListener(LEvent.ENTER_FRAME,onframe);

}


//地图图片初始化
function initMap(){	
	
}

//添加地图
function addMap(cx,cy){
	var i,j,index,indexX,indexY;
	var bitmapdata,bitmap;
	var mapX = mapLayer.x / STEP;
	var mapY = mapLayer.y / STEP;
	var mx = cx<0?-1:0,my = cy<0?-1:0;
	mapLayer.removeAllChild();	
	//在地图层上，画出10*10的小图片
	for(i=my;i<20 +Math.abs(cy) && i-mapY < map.length;i++){
		for(j=mx;j<20 +Math.abs(cx)&& j-mapX < map[0].length;j++){
			//从地图数组中得到相应位置的图片坐标
			//console.log(event,"map",mapX,mapY);
			index = map[parseInt(i-mapY)][parseInt(j-mapX)];
			//小图片的竖坐标 15个小图片的切片
			indexY = Math.floor(index /15);
			//小图片的横坐标
			indexX = index - indexY*15;
			//得到小图片 画地图 map -> 32*32
			bitmapdata = new LBitmapData(dataList["map"],indexX*32,indexY*32,32,32);
			bitmap = new LBitmap(bitmapdata);
			//设置小图片的显示位置
			bitmap.x = j*STEP - mapLayer.x;
			bitmap.y = i*STEP - mapLayer.y;
			//将小图片显示到地图层
			mapLayer.addChild(bitmap);
		}
	}
	
	//地图画完后   绘制npc
	npc_show(1,3,"npc 1",true);
	//boss_show(3,7,"蜘蛛怪");
	//boss_L_show();
	boss_all_show(boss_arr);
	
}

//移除多余地图块
function delMap(){
	var bitmap,i;
	for(i=0;i<mapLayer.childList.length;i++){
		bitmap = mapLayer.childList[i];
		if(bitmap.x + mapLayer.x < 0 || bitmap.x + mapLayer.x >= 32*15 || 
				bitmap.y + mapLayer.y < 0 || bitmap.y + mapLayer.y >= 32*15){
			mapLayer.removeChild(bitmap);
			i--;
		}
	}
}

添加角色、NPC、怪物

//添加人物
function addChara(){
	var stage = script.stage01;
	var charaList = stage.add;
	var chara,charaObj;
	for(var i=0;i<charaList.length;i++){
		charaObj = charaList[i];
		if(charaObj.chara == "player"){
			//加入英雄
			bitmapdata = new LBitmapData(dataList[charaObj.img]);
			chara = new Character(true,i,bitmapdata,4,3);
			player = chara;

		}else{
			//加入npc
			bitmapdata = new LBitmapData(dataList[charaObj.img]);
			chara = new Character(false,i,bitmapdata,3,4);
		}
	
		
		chara.x = charaObj.x * 32;
		chara.y = charaObj.y * 32;
		charaLayer.addChild(chara);
	}
}

角色的操作实现


//游戏事件主循环
//游戏总事件的循环监听
function onframe(){
	//childList 子对象列表
	for(var i=0;i<charaLayer.childList.length;i++){
		charaLayer.childList[i].onframe();
	}
}


/**
 * 循环事件 
 * @param isHero 是否英雄
 * @param index 人物编号
 * @param data 图片数据
 * @param row 图片分割行数
 * @param col 图片分割列数
 * @param speed 人物速度
 **/
function Character(isHero,index,data,row,col,speed){
	base(this,LSprite,[]);
	var self = this;
	self.isHero = isHero;
	self.index = index;
	//设定人物动作速度
	self.speed = speed==null?3:speed;
	self.speedIndex = 0;
	//设定人物大小
	data.setProperties(0,0,data.image.width/col,data.image.height/row);
	//得到人物图片拆分数组
	var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);
	//设定人物动画
	self.anime = new LAnimation(this,data,list);
	/*
	//调整人物位置
	//self.anime.y -= 16;
	*/
	//设定不移动
	self.move = false;
	//在一个移动步长中的移动次数设定
	self.moveIndex = 0;
};


/**
 * 循环事件 
 **/
Character.prototype.onframe = function (){
	var self = this;
	//人物动作速度控制
	if(self.speedIndex++ < self.speed)return;
	self.speedIndex = 0;
	//当人物可移动，则开始移动
	if(self.move){self.onmove();}
	//人物动画播放
	self.anime.onframe();
};
/**
 * 开始移动 
 **/
Character.prototype.onmove = function (){
	var self = this;
	//console.log(event,"play",parseInt(self.x/STEP),parseInt(self.y/STEP));
	//设定一个移动步长中的移动次数
	var ml_cnt = 4;
	//计算一次移动的长度
	var ml = STEP;
	//根据移动方向，开始移动
	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 >= 0){
		/*
		//一个地图步长移动完成后，判断地图是否跳转
		if(self.isHero && self.moveIndex > 0)checkJump();
		self.moveIndex = 0;
		*/
		//一个地图步长移动完成后，如果地图处于滚动状态，则移除多余地图块
		if(mapmove)delMap();
		//判断方向是否改变
		if(self.direction != self.direction_next){
			self.direction = self.direction_next;
			self.anime.setAction(self.direction);
		}
		//如果已经松开移动键，或者前方为障碍物，则停止移动，否则继续移动
		if(!isKeyDown || !self.checkRoad()){
			self.move = false;
			return;
		}
		//地图是否滚动
		self.checkMap(self.direction);
		
			posi = self.get_posi();
		
		
	}
};


//获取当前玩家坐标
Character.prototype.get_posi = function(dir){
	var self = this;

	
	var tox,toy,myCoordinate;
	//当判断方向为空的时候，默认当前方向
	if(dir==null)dir=self.direction;
	//获取人物坐标
	myCoordinate = self.getCoordinate();
	//开始计算移动目的地的坐标
	switch (dir){
		case UP:
			tox = myCoordinate.x;
			toy = myCoordinate.y - 1;
			break;
		case LEFT:
			tox = myCoordinate.x - 1;
			toy = myCoordinate.y ;
			break;
		case RIGHT:
			tox = myCoordinate.x + 1;
			toy = myCoordinate.y;
			break;
		case DOWN:
			tox = myCoordinate.x;
			toy = myCoordinate.y + 1;
			break;
	}
	


	//return {x:parseInt(self.x/STEP),y:parseInt(self.y/STEP)};
	/*
	posi[0] = self.x/STEP;
	posi[1] = self.y/STEP;
	*/
	//如果是障碍物者返回玩家当前位置，如果不是者返回当前移动到的位置
	if(mapdata[toy][tox] != 1 & mapdata[toy][tox] != 3){
		posi[0] = tox;
		posi[1] = toy;
		//console.log(event,"玩家位置",posi);
		
	}
	else{
		posi[0] = self.x/STEP;
		posi[1] = self.y/STEP;
	}
	return posi;
}


/**
 * 障碍物判断
 * @param 判断方向 
 **/
Character.prototype.checkRoad = function (dir){
	var self = this;
	var tox,toy,myCoordinate;
	//当判断方向为空的时候，默认当前方向
	if(dir==null)dir=self.direction;
	//获取人物坐标
	myCoordinate = self.getCoordinate();
	//开始计算移动目的地的坐标
	switch (dir){
		case UP:
			tox = myCoordinate.x;
			toy = myCoordinate.y - 1;
			break;
		case LEFT:
			tox = myCoordinate.x - 1;
			toy = myCoordinate.y ;
			break;
		case RIGHT:
			tox = myCoordinate.x + 1;
			toy = myCoordinate.y;
			break;
		case DOWN:
			tox = myCoordinate.x;
			toy = myCoordinate.y + 1;
			break;
	}
	
	//posi = "X:"+tox+",Y:"+toy;
	//console.log(event,"玩家位置",posi);

	//console.log(event,"移动位置",mapdata[toy][tox]);
	//如果移动的范围超过地图的范围，则不可移动
	if(toy <= 0 || tox <= 0)return false;
	//if(toy >= mapdata.length || tox >= mapdata[0].length)return false;
	//如果目的地为障碍，则不可移动
	if(mapdata[toy][tox] == 1 || mapdata[toy][tox] == 3){
		return false
	};

	

	return true;
};
/**
 * 设定人物坐标
 * @param x方向坐标，y方向坐标 
 **/
Character.prototype.setCoordinate = function (sx,sy){
	var self = this;
	//根据人物坐标，计算人物显示位置
	self.x = sx*STEP;
	self.y = sy*STEP;
};
/**
 * 获取人物坐标
 **/
Character.prototype.getCoordinate = function (){
	var self = this;

	return {x:parseInt(self.x/STEP),y:parseInt(self.y/STEP)};

};
/**
 * 改变人物方向，并判断是否可移动
 **/
Character.prototype.changeDir = function (dir){
	var self = this;
	//如果正在移动，则无效
	if(!self.move){
		//设定人物方向
		self.direction = dir;
		self.direction_next = dir;
		//设定图片动画
		self.anime.setAction(dir);
		//判断是否可移动
		if(!self.checkRoad(dir))return;
		//地图是否滚动
		self.checkMap(dir);
		//如果可以移动，则开始移动
		self.move = true;
		self.moveIndex = 0;
	}else if(dir != self.direction){
		self.direction_next = dir;
	}
};
/**
 * 地图是否滚动
 **/
Character.prototype.checkMap = function (dir){
	var self = this;
	mapmove = false;
	//如果不是英雄，则地图不需要滚动
	//if(!self.isHero)return;
	
	switch (dir){
		case UP:
			
			if(self.y + charaLayer.y> STEP*2)break;//前两个地图进行移动
			if(mapLayer.y >= 0)break;
			//在从新绘制地图前 计算当前移动的位置次数
			gundong_y -= 1;

			addMap(0,-1);

			//获取当前坐标范围
			get_area("up",0,-1);
			

			mapmove = true;
			break;
		case LEFT:
			
			if(self.x + charaLayer.x > STEP*2)break;
			if(mapLayer.x >= 0)break;
			//在从新绘制地图前 计算当前移动的位置次数
			gundong_x -= 1;
			addMap(-1,0);

			//获取当前坐标范围
			get_area("left",-1,0);
			

			mapmove = true;
			break;
		case RIGHT:
			
			if(self.x < STEP*15 - 2*STEP)break;
			if(STEP*15 - mapLayer.x >= map[0].length*STEP)break;
			//在从新绘制地图前 计算当前移动的位置次数
			gundong_x += 1;
			addMap(1,0);

			//获取当前坐标范围
			get_area("right",1,0);
			

			mapmove = true;
			break;
		case DOWN:
			
			if(self.y < (STEP*14+30) - 2*STEP)break;
			if( (STEP*14+30) - mapLayer.y >= map.length*STEP)break;
			//在从新绘制地图前 计算当前移动的位置次数
			gundong_y += 1;
			addMap(0,1);

			//获取当前坐标范围
			get_area("down",0,1);
			

			mapmove = true;
			break;
	}
};

//获取arca坐标
function get_area(type,cx,cy){
	
	if(type == "right"){
		arca_x[0] = arca_x[0]+cx;
		arca_x[1] = arca_x[1]+cx;
	}

	if(type == "left"){
		arca_x[0] = arca_x[0]+cx;
		arca_x[1] = arca_x[1]+cx;
	}

	if(type == "up"){
		arca_y[0] = arca_y[0]+cy;
		arca_y[1] = arca_y[1]+cy;
	}

	if(type == "down"){
		arca_y[0] = arca_y[0]+cy;
		arca_y[1] = arca_y[1]+cy;
	}
}

小地图

//游戏小地图
function map_info_Layer_show(){
	map_info_Layer = new LSprite();
   	backLayer.addChild(map_info_Layer);

	//小地图
	s_map(1,1);

	var map_title = new LTextField();
	map_title.text = game_play_info_data.user_map;
	map_title.size = 10;
	map_title.color = "#53FF53";
	map_title.x = 330;
	map_title.y = 2;
	map_info_Layer.addChild(map_title);
}


//小地图显示
function s_map(y,x){
	//消影
	if(map_s_L){
		map_s_L.remove();
	}

	var smap_0,smap_bitmap_0;
	var smap_1,smap_bitmap_1;
	var smap_2,smap_bitmap_2;
	var smap_3,smap_bitmap_3;

	var s_mapdata = smapdata;
	//玩家当前位置 障碍物判断
	if(s_mapdata[x][y]!=1 || s_mapdata[x][y]!=3){
		s_mapdata[x][y] = 2;
	}

	map_s_L = new LSprite();
	map_info_Layer.addChild(map_s_L);
	map_s_L.x = 330;
	map_s_L.y = 20;
	//map_s_L.removeAllChild();

	for(i=0;i < s_mapdata.length-1;i++){
		for(j=0;j < s_mapdata[0].length-1;j++){
			//从地图数组中得到相应位置的图片坐标
			//console.log(event,"map",i,j);
			//获取小地图属性
			index = s_mapdata[i][j];
			//console.log("smap",mapdata[i][j]);

			/*
			小地图资源   黑色不可以移动  白色可以移动区域  红色玩家   绿色 npc
			{name:"s_map_no",path:"../ui/game/000_2.png"},
			{name:"s_map_yes",path:"../ui/game/fff_1.png"},
			{name:"s_map_my",path:"../ui/game/red_1.png"}
			s_map_npc
			*/

			smap_1 = new LBitmapData(dataList["s_map_no"]);
			smap_bitmap_1 = new LBitmap(smap_1);

			smap_0 = new LBitmapData(dataList["s_map_yes"]);
			smap_bitmap_0 = new LBitmap(smap_0);

			smap_2 = new LBitmapData(dataList["s_map_my"]);
			smap_bitmap_2 = new LBitmap(smap_2);

			smap_3 = new LBitmapData(dataList["s_map_npc"]);
			smap_bitmap_3 = new LBitmap(smap_3);
			//给不同类型小地图渲染颜色
			if(index == 1){
				//设置小图片的显示位置
				smap_bitmap_1.x = j*4 - 4;
				smap_bitmap_1.y = i*4 - 4;
				//将小图片显示到地图层
				map_s_L.addChild(smap_bitmap_1);
			}
			else if(index == 0){
				
				//设置小图片的显示位置
				smap_bitmap_0.x = j*4 - 4;
				smap_bitmap_0.y = i*4 - 4;
				//将小图片显示到地图层
				map_s_L.addChild(smap_bitmap_0);
			}
			else if(index == 2){
				
				//设置小图片的显示位置
				smap_bitmap_2.x = j*4 - 4;
				smap_bitmap_2.y = i*4 - 4;
				//将小图片显示到地图层
				map_s_L.addChild(smap_bitmap_2);
			}
			else if(index == 3){
				
				//设置小图片的显示位置
				smap_bitmap_3.x = j*4 - 4;
				smap_bitmap_3.y = i*4 - 4;
				//将小图片显示到地图层
				map_s_L.addChild(smap_bitmap_3);
			}

			/*
			bitmapdata = new LBitmapData(dataList["map"],0,0,10,10);
			bitmap = new LBitmap(bitmapdata);
			//设置小图片的显示位置
			bitmap.x = j*5 - 5;
			bitmap.y = i*5 - 5;
			//将小图片显示到地图层
			map_s_L.addChild(bitmap);

			*/
		}
	}
	//恢复玩家当前位置
	s_mapdata[x][y] = 0;
}

转载：https://blog.csdn.net/Man_ge/article/details/100985263

查看评论

小言_互联网的博客

小言_互联网的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

开发H5游戏练手，黑暗堡垒-炼狱传奇H5 (二) 游戏界面-地图与角色

项目地址

基于 lufylegend 开发

游戏地图

添加角色、NPC、怪物

角色的操作实现

小地图

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场

小言_互联网的博客

小言_互联网的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章

开发H5游戏练手， 黑暗堡垒-炼狱传奇H5 (二) 游戏界面-地图与角色

项目地址

基于 lufylegend 开发

游戏地图

添加角色、NPC、怪物

角色的操作实现

小地图

* 以上用户言论只代表其个人观点，不代表本网站的观点或立场

开发H5游戏练手，黑暗堡垒-炼狱传奇H5 (二) 游戏界面-地图与角色