学习HTML5开发RPG游戏第五步游戏界面设计一

游戏界面包括地图、主角、操作界面、战斗界面、数据界面等。

1、地图

要显示地图，首先我们要有地图数据，为了方便编辑，需要一个地图编辑器，这里我就随机生成迷宫地图来获取地图数据。

随机生成迷宫地图方法如下：

GFunction.createMap=function(){//自动生成迷宫地图var autoMapNum=0;//使用的迷宫地图图片编号var cells=[];//记录地图数据，（true为可通行，false为不可通行）var minNum=40;//地图行和列最小单元数var maxNum=100;//地图行和列最大单元数var minLengthNum=19;//入口和出口相隔的最小单元数var sizeNum={x:JFunction.Random(minNum,maxNum),y:JFunction.Random(minNum,maxNum)};//随机生成行和列单元数for(var i=0;i<sizeNum.y;i++){cells[i]=[];}var inPoint={x:JFunction.Random(0,sizeNum.x-1),y:JFunction.Random(0,sizeNum.y-1)};//随机生成入口cells[inPoint.y][inPoint.x]=true;var outPoint={x:JFunction.Random(0,sizeNum.x-1),y:JFunction.Random(0,sizeNum.y-1)};//随机生成出口while(Math.abs(outPoint.x-inPoint.x)<minLengthNum&&Math.abs(outPoint.y-inPoint.y)<minLengthNum){//不满足要求，重新生成出口outPoint={x:JFunction.Random(0,sizeNum.x-1),y:JFunction.Random(0,sizeNum.y-1)};}cells[outPoint.y][outPoint.x]=true;var blockPoint,blockSizeNum={},num=20;while(num>0||!isLink()){//生成地图可通行单元var n=JFunction.Random(0,1);blockPoint={x:JFunction.Random(0,sizeNum.x-1),y:JFunction.Random(0,sizeNum.y-1)};if(n){blockSizeNum.x=JFunction.Random(5,10);blockSizeNum.y=JFunction.Random(1,2);}else{blockSizeNum.x=JFunction.Random(1,2);blockSizeNum.y=JFunction.Random(5,10);}for(var r=blockPoint.y;r<blockPoint.y+blockSizeNum.y&&r<sizeNum.y;r++){for(var c=blockPoint.x;c<blockPoint.x+blockSizeNum.x&&c<sizeNum.x;c++){cells[r][c]=true;}}num--;}var AM = {widthNum:sizeNum.x, heightNum:sizeNum.y,inPoint:inPoint,outPoint:outPoint, BGPicName:ResourceData.AutoMap[autoMapNum].BGPicName,BGWalk:false};for(var r=0;r<sizeNum.y;r++){for(var c=0;c<sizeNum.x;c++){if(cells[r][c]){//设置可通行单元的地图数据if (!AM[r]) AM[r] = {};AM[r][c] = {};AM[r][c]["mapPicName"] = ResourceData.AutoMap[autoMapNum].roadName;AM[r][c]["walk"] = true;}else if(r>0&&cells[r-1][c]){//设置可通行区域地图边界数据if (!AM[r]) AM[r] = {};AM[r][c] = {};AM[r][c]["mapPicName"] = ResourceData.AutoMap[autoMapNum].railName;AM[r][c]["walk"] = false;}}}var TreasureNum=JFunction.Random(10,50);//随机生成宝箱数量for(var n=0;n<TreasureNum;n++){//生成宝箱数据var TreasurePointX=JFunction.Random(0,sizeNum.x-1);var TreasurePointY=JFunction.Random(0,sizeNum.y-1);while(!cells[TreasurePointY][TreasurePointX]||(TreasurePointX==inPoint.x&&TreasurePointY==inPoint.y)||(TreasurePointX==outPoint.x&&TreasurePointY==outPoint.y)){TreasurePointX=JFunction.Random(0,sizeNum.x-1);TreasurePointY=JFunction.Random(0,sizeNum.y-1);}AM[TreasurePointY][TreasurePointX].Treasure={};AM[TreasurePointY][TreasurePointX].Treasure.walk=false;AM[TreasurePointY][TreasurePointX].Treasure.eventData={};var n1=JFunction.Random(1,100);var gn=0if(n1<=50){AM[TreasurePointY][TreasurePointX].Treasure.TreasureName="Treasure_1";AM[TreasurePointY][TreasurePointX].Treasure.eventData.goldNum=JFunction.Random(20,50);gn=JFunction.Random(0,1);}else if(n1<=80){AM[TreasurePointY][TreasurePointX].Treasure.TreasureName="Treasure_2";AM[TreasurePointY][TreasurePointX].Treasure.eventData.goldNum=JFunction.Random(50,100);gn=JFunction.Random(0,2);}else if(n1<=90){AM[TreasurePointY][TreasurePointX].Treasure.TreasureName="Treasure_3";AM[TreasurePointY][TreasurePointX].Treasure.eventData.goldNum=JFunction.Random(100,200);gn=JFunction.Random(0,3);}else if(n1<=95){AM[TreasurePointY][TreasurePointX].Treasure.TreasureName="Treasure_4";AM[TreasurePointY][TreasurePointX].Treasure.eventData.goldNum=JFunction.Random(200,500);gn=JFunction.Random(0,4);}else if(n1<=98){AM[TreasurePointY][TreasurePointX].Treasure.TreasureName="Treasure_5";AM[TreasurePointY][TreasurePointX].Treasure.eventData.goldNum=JFunction.Random(500,1000);gn=JFunction.Random(0,5);}else if(n1<=100){AM[TreasurePointY][TreasurePointX].Treasure.eventData.goldNum=JFunction.Random(1000,2000);AM[TreasurePointY][TreasurePointX].Treasure.TreasureName="Treasure_6";gn=JFunction.Random(0,6);}var str="";for(var i=0;i<gn;i++){var n2=JFunction.Random(1,100);str+=(i>0?",":"")+getGoods(n2);}AM[TreasurePointY][TreasurePointX].Treasure.eventData.goods=str;}//设置传送阵数据if(GMain.FloorsNum>1){AM[inPoint.y][inPoint.x].JumpToMap={PicName:ResourceData.AutoMap[autoMapNum].inPointName,eventData:{goToFloorNum:GMain.FloorsNum-1}};}AM[outPoint.y][outPoint.x].JumpToMap={PicName:ResourceData.AutoMap[autoMapNum].outPointName,eventData:{goToFloorNum:GMain.FloorsNum+1}};return AM;function isLink(){//检查生成的地图入口和出口是否相连var cellsA=[inPoint];var cellsB=[];for(var i=0;i<sizeNum.y;i++){cellsB[i]=[];}cellsB[cellsA[0].y][cellsA[0].x]=true;for(var l=0;l<cellsA.length;l++){if((cellsA[l].x-1>=0)&&cells[cellsA[l].y][cellsA[l].x-1]&&!cellsB[cellsA[l].y][cellsA[l].x-1]){cellsB[cellsA[l].y][cellsA[l].x-1]=true;cellsA[cellsA.length]={x:cellsA[l].x-1,y:cellsA[l].y};}if((cellsA[l].y-1>=0)&&cells[cellsA[l].y-1][cellsA[l].x]&&!cellsB[cellsA[l].y-1][cellsA[l].x]){cellsB[cellsA[l].y-1][cellsA[l].x]=true;cellsA[cellsA.length]={x:cellsA[l].x,y:cellsA[l].y-1};}if((cellsA[l].x+1<sizeNum.x)&&cells[cellsA[l].y][cellsA[l].x+1]&&!cellsB[cellsA[l].y][cellsA[l].x+1]){cellsB[cellsA[l].y][cellsA[l].x+1]=true;cellsA[cellsA.length]={x:cellsA[l].x+1,y:cellsA[l].y};}if((cellsA[l].y+1<sizeNum.y)&&cells[cellsA[l].y+1][cellsA[l].x]&&!cellsB[cellsA[l].y+1][cellsA[l].x]){cellsB[cellsA[l].y+1][cellsA[l].x]=true;cellsA[cellsA.length]={x:cellsA[l].x,y:cellsA[l].y+1};}if(cellsB[outPoint.y][outPoint.x])return true;}return false;}function getGoods(n2){//随机生成宝箱及宝箱物品var goods=[];var goodsLevel;if(n2<=50){goodsLevel=1;}else if(n2<=80){goodsLevel=JFunction.Random(1,2);}else if(n2<=90){goodsLevel=JFunction.Random(1,3);}else if(n2<=95){goodsLevel=JFunction.Random(1,4);}else if(n2<=98){goodsLevel=JFunction.Random(1,5);}else if(n2<=100){goodsLevel=JFunction.Random(1,6);}goodsLevel+=parseInt(GMain.FloorsNum/10);if(goodsLevel>6)goodsLevel=6;for(var g in ResourceData.Goods){if(ResourceData.Goods[g].goodsLevel==goodsLevel){goods[goods.length]=g;}}var n=JFunction.Random(0,goods.length-1);return goods[n];}
};

有了地图数据，下面我就要加载地图了：

GFunction.loadMapPanel=function() {//加载地图//GMain.MapData为地图数据GMain.MapPanel.size={width:GMain.MapData.widthNum*GMain.CellSize.width,height:GMain.MapData.heightNum*GMain.CellSize.height};GMain.MapCells=[];//保存地图单元数据GMain.MapPanel.clearControls();//清空地图界面for (var r = 0; r < GMain.MapData.heightNum; r++) {GMain.MapCells[r] = [];for (var c = 0; c < GMain.MapData.widthNum; c++) {//生成地图单元，并加入到地图界面GMain.MapCells[r][c] = new GControls.MapCell( {x:c * GMain.CellSize.width, y:r * GMain.CellSize.height}, GMain.CellSize);GMain.MapPanel.addControlInLast([GMain.MapCells[r][c]]);if (GMain.MapData[r] && GMain.MapData[r][c]) {if(GMain.MapData[r][c]["mapPicName"]){//设置地图单元的图片GMain.MapCells[r][c].setMapPic(GMain.MapData[r][c]["mapPicName"]);}else if(GMain.MapData.BGPicName){GMain.MapCells[r][c].setMapPic(GMain.MapData.BGPicName);}if(GMain.MapData[r][c]["JumpToMap"]){//地图单元添加传送阵var JumpToMap = new GControls.Trigger({x:0, y:0},GMain.CellSize, GMain.MapData[r][c]["JumpToMap"].PicName,"JumpToMap");JumpToMap.eventData=GMain.MapData[r][c]["JumpToMap"].eventData;GMain.MapCells[r][c].addControlInLast([JumpToMap]);}else if(GMain.MapData[r][c]["Treasure"]){//地图单元添加宝箱var Treasure = new GControls.Trigger({x:0, y:0},GMain.CellSize, GMain.MapData[r][c]["Treasure"].TreasureName);Treasure.eventData=GMain.MapData[r][c]["Treasure"].eventData;GMain.MapCells[r][c].addControlInLast([Treasure]);}} else {if (GMain.MapData.BGPicName) {GMain.MapCells[r][c].setMapPic(GMain.MapData.BGPicName);//设置地图不可通行单元图片}}}}var x=GMain.MapData.inPoint.x;var y=GMain.MapData.inPoint.y;if(GMain.MapPanelRelPos){GMain.MapPanel.setRelativePosition({x:GMain.MapPanelRelPos.x,y:GMain.MapPanelRelPos.y});GMain.MapPanelRelPos=null;}else{//通过设置地图相对位置，使屏幕中心处于入口附近if((y+1)<GMain.MapData.heightNum &&GMain.MapCells[y+1][x].walk){GMain.MapPanel.setRelativePosition({x:GMain.CellSize.width*(GMain.InPoint.x-x), y:GMain.CellSize.height*(GMain.InPoint.y-y-1)});}else if((x+1)<GMain.MapData.widthNum &&GMain.MapCells[y][x+1].walk){GMain.MapPanel.setRelativePosition({x:GMain.CellSize.width*(GMain.InPoint.x-x-1), y:GMain.CellSize.height*(GMain.InPoint.y-y)});}else if((y-1)>=0 &&GMain.MapCells[y-1][x].walk){GMain.MapPanel.setRelativePosition({x:GMain.CellSize.width*(GMain.InPoint.x-x), y:GMain.CellSize.height*(GMain.InPoint.y-y+1)});}else if((x-1)>=0 &&GMain.MapCells[y][x-1].walk){GMain.MapPanel.setRelativePosition({x:GMain.CellSize.width*(GMain.InPoint.x-x+1), y:GMain.CellSize.height*(GMain.InPoint.y-y)});}}GMain.MapPanel.saveShowImageData();//缓存地图，以提高速度
};

2、主角

这里我们只显示一个主角，直接把主角固定在屏幕中间。

GMain.BattlesGameRole[0][0]=new GControls.GameRole("Leader0");

GMain.BattlesGameRole[0][0].initMove();//初始化行走

3、操作界面

操作界面包括方向按钮、确定取消按钮以及其他界面切换按钮。

代码如下：

GFunction.loadButtonPanel=function(){//加载操作界面var btnOpenData=new JControls.Button({x:10,y:0},{width:80,height:30}).setBGColor(JColor.gray).setText("物品");btnOpenData.onClick=function(){GFunction.showDataPanel();//显示人物数据和使用物品return true;}var btnShowShop=new JControls.Button({x:100,y:0},{width:80,height:30}).setBGColor(JColor.gray).setText("商店");btnShowShop.onClick=function(){//GFunction.showShop();return true;}var btnSaveData=new JControls.Button({x:190,y:0},{width:80,height:30}).setBGColor(JColor.gray).setText("保存");btnSaveData.onClick=function(){GFunction.showSavePanel();//保存游戏return true;}var btnMainMenu=new JControls.Button({x:280,y:0},{width:80,height:30}).setBGColor(JColor.gray).setText("退出");btnMainMenu.onClick=function(){GFunction.showMainMenu();//退出游戏到主菜单return true;}var BtnKeyDown=function(keyCode){if(keyCode==this.keyCode){if(keyCode>=37&&keyCode<=40){GMain.BattlesGameRole[0][0].setMoveDirection(keyCode);GMain.BattlesGameRole[0][0].stopPlayAnimation=false;}var x=GMain.BattlesGameRole[0][0].position.x;var y=GMain.BattlesGameRole[0][0].position.y;var c=parseInt((x-GMain.MapPanel.position.x+GMain.CellSize.width/2)/GMain.CellSize.width);var r=parseInt((y-GMain.MapPanel.position.y+GMain.CellSize.width)/GMain.CellSize.width);switch (GMain.BattlesGameRole[0][0].moveDirection){case GMain.Direction.left:c-=1;break;//左case GMain.Direction.up:r-=1;break;//上case GMain.Direction.right:c+=1; break;//右case GMain.Direction.down:r+=1;break;//下}if(GMain.MapCells[r][c]){if(GMain.MapCells[r][c].controls.length>0){if(!GMain.MapCells[r][c].controls[0].open){GMain.MapCells[r][c].controls[0].onTrigger();//触发}}}return true;}else return false;};var btnKeyUp=function(keyCode){if(keyCode==this.keyCode){if(keyCode>=37&&keyCode<=40){GMain.MapPanel.moveStep=null;GMain.BattlesGameRole[0][0].stopPlayAnimation=true;}return true;}else return false;};var btnW=80,btnH=80,jl=10;var btnLeft=new JControls.Button({x:0,y:GMain.Size.height-btnH-btnW-jl},{width:btnH,height:btnW},null).setKeyCode(37);btnLeft.onKeyDown=BtnKeyDown;btnLeft.onKeyUp=btnKeyUp;var btnTop=new JControls.Button({x:btnH+jl,y:GMain.Size.height-btnH*2-btnW-jl*2},{width:btnW,height:btnH},null).setKeyCode(38);btnTop.onKeyDown=BtnKeyDown;btnTop.onKeyUp=btnKeyUpvar btnRight=new JControls.Button({x:btnH+btnW+jl*2,y:GMain.Size.height-btnH-btnW-jl},{width:btnH,height:btnW},null).setKeyCode(39);btnRight.onKeyDown=BtnKeyDown;btnRight.onKeyUp=btnKeyUp;var btnBottom=new JControls.Button({x:btnH+jl,y:GMain.Size.height-btnH},{width:btnW,height:btnH},null).setKeyCode(40);btnBottom.onKeyDown=BtnKeyDown;btnBottom.onKeyUp=btnKeyUp;var btnOK=new JControls.Button({x:GMain.Size.width-100,y:GMain.Size.height-110},{width:100,height:100},null).setKeyCode(13);btnOK.onKeyDown=BtnKeyDown;btnOK.onKeyUp=btnKeyUp;var btnCancel=new JControls.Button({x:GMain.Size.width-100,y:GMain.Size.height-250},{width:100,height:100},null).setKeyCode(27);btnCancel.onKeyDown=BtnKeyDown;btnCancel.onKeyUp=btnKeyUp;GMain.ButtonPanel.addControlInLast([btnOpenData,btnSaveData,btnMainMenu,btnShowShop,btnLeft,btnTop,btnRight,btnBottom,btnOK,btnCancel]);
};

最后要显示这些界面，还需要把他们加入到屏幕上来。

    JMain.JForm.addControlInLast([GMain.MapPanel,GMain.BattlesGameRole[0][0],GMain.BattlePanel,GMain.DataPanel,GMain.SavePanel ,GMain.ButtonPanel]);

后面将介绍战斗界面和数据界面。

学习HTML5开发RPG游戏第五步游戏界面设计一相关推荐

html5游戏开发-零基础开发RPG游戏-开源讲座(四)
了解上三篇的内容请点击: html5[color=rgb(68, 68, 68) !important]游戏开发-零基础开发RPG游戏-开源讲座(一) http://www.html5cn.org/a ...
html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴对话实现
前两篇,RPG的开发已经实现了添加地图和添加游戏人物,本篇来实现地图的卷轴滚动和人物对话的实现,效果如下想要了解前两篇内容,请电击下面的链接 html5游戏开发-零基础开发RPG游戏-开源讲座(一) ...
html5游戏开发-零基础开发RPG游戏-开源讲座(四)-游戏脚本化地图跳转
首先,本篇文章是零基础开发RPG游戏-开源讲座系列文章的第四篇,来实现游戏的脚本化,和利用游戏脚本实现地图场景的切换,离上次更新貌似很长时间了,你在看下面的文字之前,需要先了解前三篇在下啰嗦了些什么东 ...
HTML5开源RPG游戏引擎lufylegendRPG 1.0.0发布
经历了几个月的改进,终于发布1.0.0版了.虽然引擎依然存在漏洞,但是比起上次更新还是要好多了.在这里不得不感谢各位网友的大力支持. 首先为引擎做一个开场白吧,也好让大家了解一下它: lufylege ...
使用Unity开发RPG游戏完整指南（全）
使用Unity开发RPG游戏完整指南(全) - GameRes游资网关注公众号风色年代(itfantasycc) 200G Unity资料合集送上~ 本教程教大家如何使用Unity创建一个RPG游 ...
使用J2ME技术开发RPG游戏(一)——程序框架
使用J2ME技术开发RPG游戏(一)--程序框架作者:陈跃峰出自:http://blog.csdn.net/mailbomb RPG(角色扮演游戏)是手机游戏中的一类主要类型,也是相对来说比较麻烦 ...
100个vc小项目开发：二、一步一点设计音乐播放器 [I]
100个vc小项目开发:二.一步一点设计音乐播放器 [源码解读] 文章作者: July 软件来源:开源 ================== 1.有不正之处,恳请指正. 2.本文贴出的是关键实现代码部 ...
html5游戏开发-零基础开发RPG游戏-开源讲座(一)
因为上一篇雷电的开发中,有朋友反应不太理解,本篇将以零基础的视点,来讲解如何开发一款RPG游戏. 在游戏的世界里,我们可以看到各种地图,各种游戏人物,看到人物在地图上行走,对话等,无论是地图还是人物, ...
HTML5开源RPG游戏引擎lufylegendRPG 0.1发布
一,小小开篇首先不得不先介绍一下这个引擎: lufylegendRPG是lufylegend的拓展引擎,使用它时,需要引入lufylegend.同时您也需要了解lufylegend语法,这样才能更合 ...

学习HTML5开发RPG游戏第五步游戏界面设计一

学习HTML5开发RPG游戏第五步游戏界面设计一相关推荐

最新文章

热门文章