湛江网站制作费用,大理建设局网站,搜索引擎营销的原理,wordpress中设置ajax分页国际惯例#xff0c;先上个效果图#xff1a; 战斗部分的实现应该是游戏里最复杂的部分#xff0c;具体实现我的小游戏还没做完整#xff0c;这里只是给出一些我的思路和做法。 战斗部分很复杂#xff0c;全文大概分成以下几点#xff1a;
战斗属性设置战斗触发战斗过程…国际惯例先上个效果图 战斗部分的实现应该是游戏里最复杂的部分具体实现我的小游戏还没做完整这里只是给出一些我的思路和做法。 战斗部分很复杂全文大概分成以下几点
战斗属性设置战斗触发战斗过程重点战斗结束 由于游戏初衷是给我家MM玩的所以过程都设置得很简单宝宝跟怪物遇上就自动开打战斗过程全部自动根据双方的速度定时发动攻击。 宝宝的战斗属性我的设置如下
var bobo {pos : {X:1, Y:1}, //地图上的坐标位置name : 辛德瑞拉 杰克罗琳, //宝宝的名字GF喜欢个这么拉风的。。。hp : 100, //full hpcurHp : 100, //current hplevel : 0, //等级exp : 0, //经验ap : 15, //攻击力attack powerdef : 1, //防御力defencespeed : 3, //速度luck : 15, //幸运eyeshot : 2, //视野type : bobo, //类型用于区分怪兽宝宝NPCfile : baozi //文件名称
}; 怪物的属性基本跟这个类似。但是不同的是一个地图上可能有多种多样的怪物所以怪物我使用对象数组来保存
var monsters [{ pos:{ X:1, Y:8 },name:青蛙, hp:30, curHp:30, level:0,exp:0, ap:10, def:0, speed:5,luck:15, type:monster, file:qingwa},{ pos:{ X:5, Y:6 },name:青蛙, hp:30, curHp:30, level:0,exp:0, ap:20, def:0, speed:5, luck:15, type:monster, file:qingwa},{ pos:{ X:4, Y:5 },name:青蛙, hp:130, curHp:30, level:0,exp:0, ap:5, def:0, speed:5,luck:15, type:monster, file:qingwa},{ pos:{ X:10, Y:9 },name:青蛙, hp:50, curHp:30, level:0,exp:0, ap:20, def:0, speed:5,luck:15, type:monster, file:qingwa}
];当然如果以后做成了多人互动也可以将宝宝改成使用对象数组来保存。 有了这样的数据结构后还需要将这样的数据结构转化为页面上的表现形式。比如宝宝要变成页面上的一个图片怪物要变成在各个地点散落出现的图片。这就需要一个将数组转化为html元素的过程。这个过程我是采用jquery的map函数实现的。
//将所有怪物对象转换为jQuery的img对象
var monstersFace $.map(monsters,function(i){return $(img classmonster titlei.name srcimages/i.type/i.file/lvi.level/common.gif /);
});map的作用就是将一个数组映射为另一个数组返回。这里就省却了我们自己不少功夫。关于jquery的map具体说明可以参看http://docs.jquery.com/Utilities/jQuery.map#arraycallback 在开发篇的2已经提到了如果将这些对象插入到地图中这里不再重复。接下来介绍下战斗如何触发以及如何进行。 战斗的触发设定我的实现是每次宝宝移动都判断当前坐标上面的图片数目如果图片为2即宝宝跟怪物在同一个格子上面那么触发战斗。用jquery的方式实现就很简单了 var curPosObj $(#XcurPos.XYcurPos.Y); //当前坐标对象if($(curPosObj).find(img).length 1 ){ //如果有2张图片var obj $(curPosObj).find(img).get(0); //获得第一张switch(obj.className){ //使用classname来区分图片是怪物还是物品物品功能将在以后介绍case monster: //与怪物战斗battle(curPos,prePos);break;case item: //获得物品getItem(curPos);break;}}触发了战斗后开打。开篇的效果图就是开打后的效果相信大家对thickbox的效果都很熟悉了不过这个使用jquery的另一个插件blockUI实现的因为觉得这个界面的定制性更强一些。关于jquery的blockUI插件http://malsup.com/jquery/block/#overview 进入战斗 var curPosObj $(#XcurPos.XYcurPos.Y); //当前战斗坐标var prePosObj $(#XprePos.XYprePos.Y); //战斗前宝宝的位置var boboFace $(curPosObj).find(img).get(1); var monsterFace $(curPosObj).find(img).get(0);$(#boboFace).append(boboFace); //将宝宝的头像设置到战斗画面中$(#monsterFace).append(monsterFace);//怪物的头像设置var monster getObjByPos(curPos.X,curPos.Y,monster);setBattleValue(monster, monster); //将宝宝的战斗信息设置到战斗画面中setBattleValue(bobo, bobo); //怪物的战斗信息设置//利用blockUI显示战斗画面$.blockUI({ message : $(#battle) ,css : { top : 15%,width : 60%,left : 20%,cursor : default} }); 战斗部分应该说是一个大难点篇幅也比较长时间关系所以本篇分成了上下2篇我有时间就继续往下写。等不及的同志可以先玩味下代码下篇我就继续介绍的战斗实现的一些细节。主要是战斗过程以及战斗结束的处理。 //开始战斗当前双方hp都大于0if(bobo.curHp 0 || monster.curHp 0 ){var boboWin true;var timer 0; //战斗计时var timerStr [00:00]; //显示时间字符串sysBattleMessage(战斗开始);var boboSpeed maxSpeed-bobo.speed; //宝宝速度计算var monsterSpeed maxSpeed-monster.speed; //怪物速度计算var battleTimersetInterval(function(){ //计时定时显示信息var s timer%60;var m Math.floor(timer/60);if (s10) {s 0 s;}if(m10){m 0 m;}timerStr [m:s];//显示宝宝动作进度条var temp (timer1)%boboSpeed 0 ? boboSpeed : (timer1)%boboSpeed;$(#boboAction).width(temp/boboSpeed*100%);//显示怪物动作进度条temp (timer1)%monsterSpeed 0 ? monsterSpeed : (timer1)%monsterSpeed;$(#monsterAction).width(temp/monsterSpeed*100%);//计时增加timer;},1000);//宝宝定时发动攻击var attackMonsterT setInterval(function(){//战斗模式先判断对方躲闪如果躲闪此次攻击无效var dodge Math.floor(Math.random()*100) monster.luck; //躲闪if(dodge){battleMessage(bobo,monster,dodge,0,timerStr,monster.curHp);}else{var crit Math.floor(Math.random()*100) bobo.luck; //暴击判断返回bool值var damage bobo.ap*(Number(crit)1) - monster.def 0 ? bobo.ap*(Number(crit)1) - monster.def : 0;monster.curHp - damage;if(monster.curHp 0 ){monster.curHp 0;}//显示战斗信息battleMessage(bobo,monster,crit?crit:common,damage,timerStr,monster.curHp);//战斗结束清除所有定时任务if(monster.curHp 0){clearInterval(attackMonsterT);clearInterval(attackBoboT);clearInterval(battleTimer);battleOver(boboWin,monster);}}},boboSpeed*1000);//怪物定时发动攻击var attackBoboT setInterval(function(){var dodge Math.floor(Math.random()*100) bobo.luck; //躲闪if(dodge){battleMessage(monster,bobo,dodge,0,timerStr,bobo.curHp);}else{var crit Math.floor(Math.random()*100) monster.luck; //暴击var damage monster.ap*(Number(crit)1) - bobo.def 0 ? monster.ap*(Number(crit)1) - bobo.def : 0;bobo.curHp - damage;if(bobo.curHp 0){bobo.curHp 0;}battleMessage(monster,bobo,crit?crit:common,damage,timerStr,bobo.curHp);if(bobo.curHp 0){clearInterval(attackMonsterT);clearInterval(attackBoboT);clearInterval(battleTimer);boboWin false;battleOver(boboWin,monster);}}},monsterSpeed*1000);}$(#battleCloseIcon).click(function(){if(bobo.curHp0 monster.curHp0 confirm(战斗还未结束逃跑将被怪兽追击确定宝宝要逃跑吗)){ //战斗未结束$.unblockUI({ onUnblock: function(){ bobo.curHp bobo.curHp - monster.ap 0?bobo.curHp - monster.ap : 1;clearInterval(attackMonsterT);clearInterval(attackBoboT);clearInterval(battleTimer); $(#battleInfo).html(); //清空战斗信息$(#monsterFace).empty(); //清空头像$(#boboAction).width(0%); //重置战斗计时$(#monsterAction).width(0%);//将图片改为普通图片占据位置$(boboFace).attr({src:images/bobo.type/bobo.file/lvbobo.level/common.gif});$(prePosObj).append(boboFace);//设置坐标bobo.pos.X prePos.X;bobo.pos.Y prePos.Y;//怪兽图片$(monsterFace).attr({src:images/monster.type/monster.file/lvmonster.level/common.gif});$(curPosObj).append(monsterFace);$(#battleCloseIcon).unbind( click );}});} else{ $.unblockUI({ onUnblock: function(){ clearInterval(attackMonsterT);clearInterval(attackBoboT);clearInterval(battleTimer); $(#battleInfo,#monsterFace).empty(); //清空战斗信息$(#boboAction).width(0%); //重置战斗计时$(#monsterAction).width(0%);//将图片改为普通图片占据位置if(boboWin){$(boboFace).attr({src:images/bobo.type/bobo.file/lvbobo.level/common.gif});$(curPosObj).append(boboFace);}else{$(monsterFace).attr({src:images/monster.type/monster.file/lvmonster.level/common.gif});$(curPosObj).append(monsterFace);}} });}});
