游戏界面包括地图、主角、操作界面、战斗界面、数据界面等。
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]);
后面将介绍战斗界面和数据界面。