学习HTML5开发RPG游戏第五步>游戏界面设计<二>(结束)
3、战斗界面
战斗界面是经典的回合制战斗界面,其代码如下:
GFunction.loadBattlePanel=function(){//加载战斗界面GMain.BattlePanel.clearControls();var battlePanel=new JControls.Panel({x:0,y:0},GMain.Size);battlePanel.setBGImage(ResourceData.Images.battleBG1);battlePanel.loadData=function(){//加载角色到战斗界面this.clearControls();if(GMain.BattlesGameRole[1].length==1){GMain.BattlesGameRole[1][0].setRelativePosition({x:150,y:70});}else if(GMain.BattlesGameRole[1].length==2){GMain.BattlesGameRole[1][0].setRelativePosition({x:80,y:120});GMain.BattlesGameRole[1][1].setRelativePosition({x:280,y:20});}else if(GMain.BattlesGameRole[1].length==3){GMain.BattlesGameRole[1][0].setRelativePosition({x:80,y:230});GMain.BattlesGameRole[1][1].setRelativePosition({x:280,y:130});GMain.BattlesGameRole[1][2].setRelativePosition({x:480,y:30});}else if(GMain.BattlesGameRole[1].length==4){GMain.BattlesGameRole[1][0].setRelativePosition({x:40,y:120});GMain.BattlesGameRole[1][1].setRelativePosition({x:240,y:20});GMain.BattlesGameRole[1][2].setRelativePosition({x:180,y:180});GMain.BattlesGameRole[1][3].setRelativePosition({x:380,y:80});}else if(GMain.BattlesGameRole[1].length==5){GMain.BattlesGameRole[1][0].setRelativePosition({x:80,y:100});GMain.BattlesGameRole[1][1].setRelativePosition({x:280,y:0});GMain.BattlesGameRole[1][2].setRelativePosition({x:80,y:230});GMain.BattlesGameRole[1][3].setRelativePosition({x:280,y:130});GMain.BattlesGameRole[1][4].setRelativePosition({x:480,y:30});}this.addControlInLast(GMain.BattlesGameRole[1]);var size1={x:400,y:380};if(GMain.BattlesGameRole[0].length==1){GMain.BattlesGameRole[0][0].setRelativePosition({x:size1.x+180,y:size1.y-120});}else if(GMain.BattlesGameRole[0].length==2){GMain.BattlesGameRole[0][0].setRelativePosition({x:size1.x+120,y:size1.y-80});GMain.BattlesGameRole[0][1].setRelativePosition({x:size1.x+240,y:size1.y-160});}else if(GMain.BattlesGameRole[0].length==3){GMain.BattlesGameRole[0][0].setRelativePosition({x:size1.x+60,y:size1.y-40});GMain.BattlesGameRole[0][1].setRelativePosition({x:size1.x+180,y:size1.y-120});GMain.BattlesGameRole[0][2].setRelativePosition({x:size1.x+300,y:size1.y-200});}else if(GMain.BattlesGameRole[0].length==4){GMain.BattlesGameRole[0][0].setRelativePosition({x:size1.x,y:size1.y});GMain.BattlesGameRole[0][1].setRelativePosition({x:size1.x+80,y:size1.y-50});GMain.BattlesGameRole[0][2].setRelativePosition({x:size1.x+160,y:size1.y-100});GMain.BattlesGameRole[0][3].setRelativePosition({x:size1.x+240,y:size1.y-150});}this.addControlInLast(GMain.BattlesGameRole[0]);};//加载战斗控制面板GMain.BattleControlPanel=new JControls.Panel({x:GMain.Size.width-80, y:120},{width:80,height:200});GMain.BattleControlPanel.loadData=function(){this.clearControls();var btnAttack=new JControls.Button({x:0,y:0},{width:80,height:40});btnAttack.buttonLabel.setText("攻击").setFontType("bold").setFontSize(22).setTextPos({x:15,y:5});btnAttack.BGColor=JColor.white;btnAttack.onClick=function(){GMain.FromAttackSelect=true;JMain.JForm.canvas.style.cursor="pointer"GMain.BattlesGameRole[0][GMain.SelectLeaderNum].usedSkillName="attack1";}var btnSkill=new JControls.Button({x:0,y:40},{width:80,height:40});btnSkill.buttonLabel.setText("技能").setFontType("bold").setFontSize(22).setTextPos({x:15,y:5});btnSkill.BGColor=JColor.white;btnSkill.onClick=function(){JMain.JForm.canvas.style.cursor="default"GMain.SkillSelectPanel.loadSkill();}var btnDefense=new JControls.Button({x:0,y:80},{width:80,height:40});btnDefense.buttonLabel.setText("防御").setFontType("bold").setFontSize(22).setTextPos({x:15,y:5});btnDefense.BGColor=JColor.white;btnDefense.onClick=function(){JMain.JForm.canvas.style.cursor="default"GMain.BattlesGameRole[0][GMain.SelectLeaderNum].bodyState.defend=true;GMain.BattlesGameRole[0][GMain.SelectLeaderNum].clearControls();GFunction.nextAttackSelect();}var btnDrug=new JControls.Button({x:0,y:120},{width:80,height:40});btnDrug.buttonLabel.setText("物品").setFontType("bold").setFontSize(22).setTextPos({x:15,y:5});btnDrug.BGColor=JColor.white;btnDrug.onClick=function(){JMain.JForm.canvas.style.cursor="default"GMain.DrugUsePanel.loadDrug();}GMain.BattleBtnRunAway=new JControls.Button({x:0,y:160},{width:80,height:40});GMain.BattleBtnRunAway.buttonLabel.setText("逃跑").setFontSize(22).setFontType("bold").setTextPos({x:15,y:5});GMain.BattleBtnRunAway.BGColor=JColor.white;GMain.BattleBtnRunAway.onClick=function(){JMain.JForm.canvas.style.cursor="default"if(JFunction.Random(1,100)<=95){GFunction.showMapPanel();}else{new JControls.MessageBox({width:200,height:0},["逃跑失败!"]);this.enabled=false;}}this.addControlInLast([btnAttack,btnSkill,btnDefense,btnDrug, GMain.BattleBtnRunAway]);};GMain.SkillSelectPanel=new JControls.Panel({x:200,y:80},{width:400,height:240});GMain.SkillSelectPanel.BGColor=JColor.gray;GMain.SkillSelectPanel.visible=false;GMain.SkillSelectPanel.loadSkill=function(){//加载技能使用面板this.clearControls();this.visible=true;this.isShowTitle=false;this.showTitle("技能");var skillName=GMain.BattlesGameRole[0][GMain.SelectLeaderNum].gameRoleData.skills.split(",");var skillsButtons=[];for(var i=0;i=ResourceData.Skill[skillName[i]].fromGameRole.level){var l=skillsButtons.length;var wNum= 8,cWidth=200,cHeight=40;skillsButtons[l]=new JControls.Button({x:(i%wNum)*cWidth,y:parseInt(i/2)*cHeight+40},{width:cWidth,height:cHeight});skillsButtons[l].buttonLabel.setText(ResourceData.Skill[skillName[i]].showName).setFontType("bold").setFontSize(22).setTextPos({x:15,y:5});skillsButtons[l].skillName=skillName[i];skillsButtons[l].onClick=function(){GMain.BattlesGameRole[0][GMain.SelectLeaderNum].usedSkillName=this.skillName;GMain.SkillSelectPanel.visible=false;if(ResourceData.Skill[this.skillName].toGameRole.num==1){GMain.BattleControlPanel.visible=false;JMain.JForm.canvas.style.cursor="pointer"}else{GFunction.nextAttackSelect();}}}}this.addControlInLast(skillsButtons);this.closeButton.visible=true;this.onCloseButtonClick=function(){GMain.BattleControlPanel.visible=true;};}GMain.DrugUsePanel=new JControls.Panel({x:200,y:80},{width:400,height:240});GMain.DrugUsePanel.BGColor=JColor.gray;GMain.DrugUsePanel.visible=false;GMain.DrugUsePanel.loadDrug=function(){//加载物品使用面板this.clearControls();this.isShowTitle=false;this.showTitle("物品");this.visible=true;GMain.SelectedGoods=null;//var level=GMain.BattlesGameRole[0][GMain.SelectLeaderNum].level;var drugs=[];for(var i=0;i
4、数据界面
数据界面,用于查看和使用物品、查看主角数据等。
GFunction.loadDataPanel=function(){//加载数据界面GMain.DataPanel.clearControls();GMain.DataPanel.loadData=function(){for(var i=0;i
除了上面的这些界面外,还有存档界面,商店界面等。
至此,学习HTML5开发RPG游戏就结束了,这些博文只是让大家有个大概了解,具体请看源码。
演示地址 源码地址
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
