社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > html5遊戲開發-零基礎開發RPG遊戲-開源講座(三)-捲軸&對話實現

html5遊戲開發-零基礎開發RPG遊戲-開源講座(三)-捲軸&對話實現

黄舟
發布： 2017-03-02 14:13:58
原創
2543 人瀏覽過

前兩篇，RPG的開發已經實現了添加地圖和添加遊戲人物，本篇來實現地圖的捲軸滾動和人物對話的實現，效果如下


地圖的捲動

#關於地圖的捲動原理，可以參考下圖

#依照上圖說明，實作地圖捲動，只需要先把即將出現的地圖（圖中黃色部分）畫上，然後滾動地圖，待地圖滾動完畢之後，將螢幕之外的部分（圖中綠色部分）移除

#首先要添加一個變數來控制地圖是否滾動

#
//地图滚动
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]
];
登入後複製

為了實現地圖滾動，修改添加地圖的方法，根據參數來實現添加上面圖片的黃色地圖部分

//添加地图
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;
	if(imageArray == null){
		//地图图片数据
		bitmapdata = new LBitmapData(imglist["map"]);
		//将地图图片拆分，得到拆分后的各个小图片的坐标数组
		imageArray = LGlobal.pideCoordinate(bitmapdata.image.width,bitmapdata.image.height,10,10);
	}
	mapLayer.removeAllChild();
	//在地图层上，画出15*10的小图片
	for(i=my;i<9 +Math.abs(cy) && i-mapY < map.length;i++){
		for(j=mx;j<15 +Math.abs(cx)&& j-mapX < map[0].length;j++){
			//从地图数组中得到相应位置的图片坐标
			index = map[i-mapY][j-mapX];
			//小图片的竖坐标
			indexY = Math.floor(index /10);
			//小图片的横坐标
			indexX = index - indexY*10;
			//得到小图片
			bitmapdata = new LBitmapData(imglist["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);
		}
	}
}
//移除多余地图块
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 >= 480 || 
				bitmap.y + mapLayer.y < 0 || bitmap.y + mapLayer.y >= 288){
			mapLayer.removeChild(bitmap);
			i--;
		}
	}
}
登入後複製

看一下效果如下


人物的對話

#對話的實現，點擊控制按鈕的方形按鈕時加，所以，先在滑鼠抬起的時候，判斷是否點擊了方形按鈕

function onup(event){
	isKeyDown = false;
	if(event.offsetX >= ctrlLayer.x + 280 && event.offsetX <= ctrlLayer.x+330){
		if(event.offsetY >= ctrlLayer.y+40 && event.offsetY <= ctrlLayer.y+100){
			//对话
			addTalk();
		}
	}
}
登入後複製

在完善addTalk()方法的時候，首先準備好對話的內容

#
var talkScriptList = {
	"talk1":new Array(
		{img:"m",name:"鸣人",msg:"我是木叶村的鸣人，你是谁？"},
		{img:"n",name:"黑衣忍者甲",msg:"你就是鸣人？九尾还在你身体里吗？"}
		),
	"talk2":new Array(
		{img:"n",name:"黑衣忍者乙",msg:"鸣人，听说忍者大战就要开始了。"},
		{img:"m",name:"鸣人",msg:"真的吗？一定要想想办法啊。"}
		)
};
登入後複製

talk1，talk2中talk後面的數字，代表人物的編號，其中每個對話單位的img為人物的頭像，name為人物的名稱,msg為對話的內容
添加對話時的做法是，當點擊方形按鈕後，判斷小鳴人前方是否有人，如果有人，則將這個人物的編號取出來，再從上面的數組中獲取相應的對話內容，然後，將相應的內容顯示到遊戲屏幕上，具體實現代碼如下

//对话内容
var talkScript;
var talkScriptList = {
	"talk1":new Array(
		{img:"m",name:"鸣人",msg:"我是木叶村的鸣人，你是谁？"},
		{img:"n",name:"黑衣忍者甲",msg:"你就是鸣人？九尾还在你身体里吗？"}
		),
	"talk2":new Array(
		{img:"n",name:"黑衣忍者乙",msg:"鸣人，听说忍者大战就要开始了。"},
		{img:"m",name:"鸣人",msg:"真的吗？一定要想想办法啊。"}
		)
};
//对话序号
var talkIndex = 0;
//对话中
var talking = false;

/**
 * 添加对话
 * */
function addTalk(){
	//如果对话内容为空，则开始判断是否可以对话
	if(talkScript == null){
		var key,tx = player.x,ty = player.y;
		switch (player.direction){
		case UP:
			ty -= STEP;
			break;
		case LEFT:
			tx -= STEP;
			break;
		case RIGHT:
			tx += STEP;
			break;
		case DOWN:
			ty += STEP;
			break;
		}
		for(key in charaLayer.childList){
			//判断前面又没有npc，有则开始对话
			if(charaLayer.childList[key].x == tx && charaLayer.childList[key].y == ty){
				if(talkScriptList["talk"+charaLayer.childList[key].index]){
					talkScript = talkScriptList["talk"+charaLayer.childList[key].index];
					talkIndex = 0;
				}
			}
		}
		//如果前方没有npc，则返回
		if(talkScript == null)return;
	}
	//将对话层清空
	talkLayer.removeAllChild();
	//当对话开始，且按照顺序进行对话
	if(talkIndex < talkScript.length){
		//得到对话内容
		var talkObject = talkScript[talkIndex];
		//对话背景
		bitmapdata = new LBitmapData(imglist["talk"]);
		bitmap = new LBitmap(bitmapdata);
		bitmap.width = 330;
		bitmap.height = 70;
		bitmap.x = 100;
		bitmap.y = 20;
		bitmap.alpha = 0.7;
		talkLayer.addChild(bitmap);
		//对话头像
		bitmapdata = new LBitmapData(imglist[talkObject.img]);
		bitmap = new LBitmap(bitmapdata);
		bitmap.x = 0;
		bitmap.y = 0;
		talkLayer.addChild(bitmap);
		//对话人物名称
		var name = new LTextField();
		name.x = 110;
		name.y = 30;
		name.size = "14";
		name.color = "#FFFFFF";
		name.text = "[" + talkObject.name + "]";
		talkLayer.addChild(name);
		//对话内容
		var msg = new LTextField();
		msg.x = 110;
		msg.y = 55;
		msg.color = "#FFFFFF";
		msg.text = talkObject.msg;
		talkLayer.addChild(msg);
		//对话内容逐字显示
		msg.wind();
		talkLayer.x = 20;
		talkLayer.y = 50;
		talkIndex++;
	}else{
		//对话结束
		talkScript = null;
	}
}
登入後複製

效果看下圖


遊戲示範網址

http://lufylegend.com/demo/rpg/index.html

##lufylegend.js引擎包內包含這個demo，請直接下載lufylegend.js引擎，查看引擎包內源碼

lufylegend.js引擎下載網址

#http://lufylegend .com/lufylegend

#以上就是html5遊戲開發-零基礎開發RPG遊戲-開源講座(三)-捲軸&對話實現 的內容，更多相關內容請關注PHP中文網（www.php.cn）！


#

相關標籤：
html5，RPG游戏，卷轴
來源：php.cn
上一篇：html5遊戲開發-零基礎開發RPG遊戲-開源講座(四)-遊戲腳本化&地圖跳轉 下一篇：html5遊戲開發-彈幕+仿雷電小遊戲demo
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2275
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2408
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 2024-04-19 15:37:47
0
1
2022
父視窗沒有輸出 document.onclick = function(){ window.opener.document.write('我是子視窗的輸出');                  ...
來自於 2024-04-18 23:52:34
0
1
1911
關於CSS心智圖的課件在哪？ 課件
來自於 2024-04-16 10:10:18
0
0
1981
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板