网页游戏开发绝对珍贵Word格式文档下载.docx

1、假设我们写个函数showMap（x,y），把获得的数据全显示出来。地图可以有很多层。每个小图块都是一个div。具体的控制就用css就行了。小图块可以当作div的背景。也可以用作div里的图片。控制好div的left和top就行了。（left和top就是小图块相对于大图块的绝对坐标）showMap（x,y）就放在下面两个层的里面。一个层处理地图大小：1一个层处理拖动： 1absolute;z-index:10;left:2px;top: onmousedown=fDragging（this, event,false）; 2 3/处理拖动的js代码。（网上抄的。感谢这位大大。） 4 5 funct

2、ion fDragging（obj, e, limit） 6 if（!e） e=window.event; 7 var x=parseInt（obj.style.left）; 8 var y=parseInt（obj.style.top）; 9 10 var x_=e.clientX-x;11 var y_=e.clientY-y;12 13 if（document.addEventListener）14 document.addEventListener（mousemove, inFmove,true）;15 document.addEventListener（mouseup, inFup,

3、true）;16 document.body.style.cursor=move17 else if（document.attachEvent）18 document.attachEvent（onmousemove, inFmove）;19 document.attachEvent（onmouseup, inFup）;20 document.body.style.cursor=21 22 23 inFstop（e）;24 inFabort（e）25 26 function inFmove（e）27 28 var evt;29 if（!e）e=window.event;30 31 if（limi

4、t）32 var op=obj.parentNode;33 var opX=parseInt（op.style.left）;34 var opY=parseInt（op.style.top）;35 36 if（e.clientX-x_）（opX+op.offsetWidth）return false;38 39 if（e.clientY-y_（opY+op.offsetHeight）return false;41 /status=e.clientY-y_;42 43 44 obj.style.left=e.clientX-x_+px45 obj.style.top=e.clientY-y_+4

5、6 47 inFstop（e）;48 / shawl.qiu script49 function inFup（e）50 var evt;51 if（!52 53 if（document.removeEventListener）54 document.removeEventListener（55 document.removeEventListener（56 else if（document.detachEvent）57 document.detachEvent（58 document.detachEvent（59 60 61 inFstop（e）;62 63 document.body.sty

6、le.cursor=auto64 65 /实现类似google地图的拖动效果。66 ajaxRead（map.php?mapx=+（e.clientX-x_）+&mapy=+（e.clientY-y_）+,2）;67 68 / shawl.qiu script69 70 function inFstop（e）71 if（e.stopPropagation）return e.stopPropagation（）;72 else return e.cancelBubble=true;73 / shawl.qiu script74 function inFabort（e）75 if（e.prevent

7、Default）return e.preventDefault（）;76 else return e.returnValue=false;77 / shawl.qiu script78 79/80注意下面这段代码:1ajaxRead（这句代码的位置，是在拖动层后，释放鼠标的时候触发的。你可以用alert（“地图拖动到了这里”）; 替换。测试下效果。这句代码的意思是，根据当前地图被拖动的坐标。调用一个ajax。也就是重新从数据库里获得地图信息。AjaxRead（）是一个ajax的调用函数。你可以全部自己写。也可以用如prototype.js之类的框架写。 1/处理ajax的代码。（还是网上抄的，

8、有轻微的改动。唉，怎么老抄呢。主要是为了节约开发时间。还有一点就是我的JavaScript很垃圾的（*_*） 嘻嘻） 2function ajaxRead（file,action） 3 4 var xmlObj= null; 5 if（window.XMLHttpRequest） 6 7 xmlObj= new XMLHttpRequest（）; 8 9 else if（window.ActiveXObject）10 11 xmlObj= new ActiveXObject（Microsoft.XMLHTTP12 13 else 14 15 return;16 17 18 19 functio

9、n ajaxDo（action）20 21 switch（action）22 2324 case 2:25 document.getElementById（display）.innerHTML= xmlObj.responseText;/这里的display是你在页面上层的id。上面的地图代码都需要放到这个层里。如写id和name，是为了方便firefox和ie的兼容。26 27 break;28 29 30 31 32 xmlObj.onreadystatechange= function（）33 34 /*35 if（xmlObj.readyState = 1 ）/loading状态。36

10、 37 document.getElementById（xianshi2）.innerHTML = 正在载入38 39 */40 if（xmlObj.readyState= 4）/完成状态时。41 42 ajaxDo（action）;43 44 45 46 xmlObj.open （GET, file,true）;47 /xmlObj.reload（, file, true）;48 xmlObj.send （null）;49 /xmlObj.abort （50整个代码的意思就是：当拖动地图释放鼠标后，显示层重新获得数据。并无刷新的显示出来。地图里的图片都用的png32的透明图。Ie7和ff3都

11、没问题。遇到ie6的话。用gif的替代吧。map.php的功能。根据获得的x,y显示相应的一谢谢小图块。这个功能其实就是上面说的showMap（x,y），这个很像google地图的拖动。不过简单了很多。简单，效果还不错。2、角2、角色属性因为设定的要求。角色需要有装备加成，有状态加成（buff,debuff）。这时候，把所有需要的加成，都放到角色类里。是一个很好的方法。大概像这样： 1class role 2 3/获得角色数据。 4getRloe（） 5 6 从数据库里获得角色信息。 7 8/获得装备加成。 9 getEquip（）1011 获得装备加成信息。121314/获得状态加成15ge

12、tState（）1617 获得状态加成信息。181920 /把上面获得的信息相加或者相减，或者调整。2122/返回角色数据。23 Return xxx24专门把这条提出来说。是因为没把加成放到角色对象里时。每次要战斗或者要干点什么的时候。获得角色数据后，还要加一大堆代码处理加成。重复太多。一让代码前置，世界就清静了。3、道具道具比较特殊。因为种类繁多，使用方式多，可能有多个存放地点，可能有唯一道具。有天看了web魔兽的代码。发现他的道具只有一个表。有一个字段，来处理道具位置，如（1，拍卖行，2，背包，3，仓库，4，商店）这个办法挺好的。不过，如果道具的复杂度上去了。比如不同的仓库，不同的拍卖行

13、，需要合成等等。还是只有分表。基础道具表：iditemname名称itemprice价格itemimage图片itemtype类型uptype增加类型uppoint增加点数addtype增加类型（永久）addpoint增加点数（永久）cleardebuff清除debuffaddbuff增加buff从uptype开始。都可以写成xx|yy|zz的形式。最好一一对应。分割符号可以自己选。调用和处理数据的时候，可以用类似下面的方式：1$uptype = explode（|, $iteminfouptype）;2$uppoint = explode（uppoint3for （$j=0;$jgetAct

14、ion（Move47$InstanceAction-set （$parameter）;48$InstanceAction-doAction（）;4950/以后调用的时候。51$Action = new ActionFactory（）;52$InstanceAction = $Action-53/这时候，事件的参数或数据都从记时器里取得。54$InstanceAction-6、战斗即时和半即时的回合战斗（两人或多人即时回合制战斗）比较繁琐。至少包含：自动接收邀请信息。Ajax显示战斗过程。回合倒计时间。javascript发送邀请，接受，拒绝，超时。一个表。战斗数据。保存双方或多方的数据，包括回合时间，第几回合等。战斗控制。一系列函数。处理玩家的操作，将操作存到战斗数据表里。时间到后执行操作。出兵后，直接返回战报。写在事件里就行了。1function endAction（）23 4 从记时器里取数据。56 生成回合，生成战报。78