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

最新推荐文章于 2021-05-31 19:46:25 发布

iteye_1287

最新推荐文章于 2021-05-31 19:46:25 发布

阅读量355

点赞数

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

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=0
        if(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=btnKeyUp
    var 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]);

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

iteye_1287

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
学习HTML5开发RPG游戏第五步>游戏界面设计<一>

游戏界面包括地图、主角、操作界面、战斗界面、数据界面等。1、地图要显示地图，首先我们要有地图数据，为了方便编辑，需要一个地图编辑器，这里我就随机生成迷宫地图来获取地图数据。随机生成迷宫地图方法如下：GFunction.createMap=function(){//自动生成迷宫地图 var autoMapNum=0;//使用的迷宫地图图片编号 var cells=[]...
复制链接

扫一扫