javascript 人物逼真行走,已完成

更新時間：2009年04月24日 01:30:06 作者：

然后請分析下程序,我出以下題目,供牛牛們練手(RPG游戲開發(fā) - 實戰(zhàn),不搞理論,著重程序?qū)崿F(xiàn)思路).

先欣賞,走兩步試試.

<HTML><HEAD> <META http-equiv='Content-Type' content='text/html;charset=gb2312'> <Meta name='Gemeratpr' content='網(wǎng)絡(luò)程序員伴侶(Lshdic)2005'> <TITLE>神魔對決3(暫定名,神魔對決2續(xù)作) - 前期開發(fā)工程,業(yè)余時間搞搞而已~</TITLE> </HEAD><BODY topmargin='2' leftmargin='2'>&nbsp;<p>&nbsp;<p>&nbsp;<p> <center style="font-size:40;color:Red">本人無敵野球拳(業(yè)余jscoder)~,捏哈哈..作者:風(fēng)云舞歡迎訪問bbs.51js.com無憂腳本,大牛一堆!^-^</center> <div   class="j2l7k7b"   id="me" style="position:absolute;left:400;top:300;"> <img src="/upload/20090424013004103.gif" id="img1" style="position:absolute;clip:rect(0 25% 12.5% 0);top:-64;z-index:5;" jiange=0></div> <div style="position:absolute;left:600;top:500;width:150;height:80;border:1 solid black;background-color:blue"></div> <div style="position:absolute;left:100;top:380;width:150;height:80;border:1 solid black;background-color:blue"></div>  <script> function window.onload(){ //啟動,反正一切為了 - 效率,還是效率...程序效率. yidong.hei=img1.offsetHeight;yidong.wid=img1.offsetWidth } var time1=null //全局 var yidong={yibu1:0,yibu2:0,su:3,haomiao:25, //移動/json程序集合 zhenx:1,zheny:1,hei:0,wid:0, jiange:6, cle:function(){if(time1!=null){clearInterval(time1);time1=null;yidong.yibu1=0;yidong.yibu2=0;}}, clips:function(){with(yidong){img1.style.clip="rect("+(12.5*zheny-12.5)+"% "+25*zhenx+"% "+(12.5*zheny)+"% "+25*(zhenx-1)+"%)"}}, ck:function(obj){ //RPG ck with(yidong){ cle();var newx=event.x-30;newy=event.y+15,oldx=obj.offsetLeft;oldy=obj.offsetTop var x1=Math.abs(newx-oldx),y1=Math.abs(newy-oldy) if(y1>x1){var x2=su/(y1/(newx-oldx));yibu2=Math.abs(x1/x2);newy-oldy>0?y2=su:y2=-su;} else{var y2=su/(x1/(newy-oldy));yibu2=Math.abs(y1/y2);newx-oldx>0?x2=su:x2=-su;} var su2=su/2 if(x2<-su2&&y2<-su2)zheny=7; //左上 else if(x2<-su2&&y2>su2)zheny=5; //左下 else if(x2>su2&&y2<-su2)zheny=8; //右上 else if(x2>su2&&y2>su2)zheny=6; //右下 else if(x2<0&&Math.abs(y2)<su2)zheny=2; //左 else if(x2>0&&Math.abs(y2)<su2)zheny=3; //右 else if(Math.abs(x2)<su2&&y2<0)zheny=4; //上 else if(Math.abs(x2)<su2&&y2>0)zheny=1; //下 img1.style.top=-(hei/8*zheny);clips(); time1=setInterval(function(){move(obj,x2,y2)},haomiao) }}, move:function(obj,x2,y2){ //RPG move with(yidong){ if(++yibu1>yibu2)return cle();obj.style.left=x2*yibu1+oldx;obj.style.top=y2*yibu1+oldy; if(++img1.jiange>jiange){ img1.jiange=0;zhenx<4?zhenx++:zhenx=1; img1.style.left=-(wid/4*(zhenx-1));clips(); } }} } //json yidong over. function document.onclick(){yidong.ck(me)} </script>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

然后請分析下程序,我出以下題目,供牛牛們練手(RPG游戲開發(fā) - 實戰(zhàn),不搞理論,著重程序?qū)崿F(xiàn)思路).
1:我的程序,你還能否再精簡?優(yōu)化/改編算法?提高效率?試試吧,不過不能說太容易..提示:我目前認(rèn)為,判斷8個移動方向的程序,雖然效率可以,但I(xiàn)F ELSE的寫法真有點老套,我也在想新的思路來簡化這段程序,你若有,就漏兩手吧!
2:都想玩尋路是吧?哈哈,那么就請試試碰觸那個藍(lán)色方塊?注:假設(shè),將來出現(xiàn)的障礙,是隨機的,不是固定的..你碰到了比說任何藍(lán)色障礙,就停住,或說,饒過去....提醒你:關(guān)鍵是思路.
3:有個問題我也不知道,就是CSS的clip,我發(fā)現(xiàn)就是,雖然裁剪了一小塊,但其他被裁掉的部分,雖然看不見,但是,依然占用地方(原大小),比如,人物走到中間,卻因為空白的下半部分超出,就會有滾動條了,這個,能不能就硬性去掉裁剪掉的部分?不讓其影響滾動條?(別說BODY加上scroll=no就完事了,這個我可知道^-^)
4:誰有本事改成FF也能運行?注:我沒裝那玩意,哈哈,不過,我認(rèn)為不太容易/可能很難改....

注:以上4點,你只需完成一點即可(就很牛),當(dāng)然了,你4點都能/都想解決,那更牛B了,呵呵開個玩笑,反正隨便你^-^.

以下是新增的內(nèi)容:

1:采取了campaign的建議,使用其超級三元表達(dá)式,支持多行?能加注釋?堪比多個IF ELSE?真牛..使用了,剩了不少代碼.
2:借鑒了winter的思路,使用CSS的backgroundPosint方式代替了clip裁剪,簡便易用....一個DIV就搞定了,無需在包容一個IMG
3:參考了理論家hax的代碼,HTML代碼使用了兼容寫法,不過,JS程序沒瀏覽器測試,無法寫標(biāo)準(zhǔn),呵呵..

4:自己,又實現(xiàn)了[鼠標(biāo)按住],不停變換方向移動,你這次測試,可以單擊,可以一直按住鼠標(biāo)左鍵不停移動...思路就是用一個計時器不停檢測,也占極少CPU,不知大家還有沒更好思路?還有,用了setCapture()這種鼠標(biāo)鎖定.
5:自己,經(jīng)測,堵住了幾個異常漏洞(當(dāng)值為0或NaN時,就說,應(yīng)該不會再出錯誤)

精簡/優(yōu)化后的程序:

<html><head> <title>神魔對決3(暫定名,神魔對決2續(xù)作) - 前期開發(fā)工程,業(yè)余時間搞搞而已~</title></head> <body> <p style="font-size:40px;color:Red;text-align:center">本人無敵野球拳(業(yè)余jscoder)~,捏哈哈..作者:風(fēng)云舞歡迎訪問bbs.51js.com無憂腳本,大牛一堆!^-^</p> <div   class="bq22zds"   id="me" style="position:absolute;left:400px;top:300px;background:url('/upload/20090424013004103.gif') no-repeat;z-index:5;width:64px;height:64px;" jiange="0"></div> <div style="position:absolute;left:600px;top:500px;width:150px;height:80px;border:1px solid black;background-color:blue"></div> <div style="position:absolute;left:100px;top:380px;width:150px;height:80px;border:1px solid black;background-color:blue"></div>  <script> var ckin=false,$=Math.abs,time1=null //全局,變量加速. var yidong={yibu1:0,yibu2:0,oldx:0,oldy:0,evx:0,evy:0,su:4,haomiao:20, //移動/json程序集合 zhenx:1,zheny:1,jiange:5,min:64, cle:function(){if(time1!=null){clearInterval(time1);time1=null;yidong.yibu1=0;yidong.yibu2=0;}}, clips:function(){me.style.backgroundPosition=(-yidong.zhenx+1)*yidong.min+" "+(-yidong.zheny+1)*yidong.min;}, //上面新采取winter的backgroundPosition思路,感覺比clip方便多了..★★★★★好使! ck:function(obj){ //RPG ck with(yidong){ cle();var newx=evx-30,newy=evy-50 oldx=obj.offsetLeft,oldy=obj.offsetTop var x1=$(newx-oldx),y1=$(newy-oldy) if(y1>x1){var x2=su/(y1/(newx-oldx));yibu2=$(x1/x2);newy-oldy>0?y2=su:y2=-su;} else{var y2=su/(x1/(newy-oldy));yibu2=$(y1/y2);newx-oldx>0?x2=su:x2=-su;} if(x2==0||x2==NaN||y2==0||y2==NaN)return; //這里新堵住了值為0/NAN的異外漏洞 var su2=su/2 zheny=x2<-su2&&y2<-su2?7: //左上,這里是采取campaign的超級三元多行表達(dá)式...呵呵,比if else剩不少..★★★★★好使! x2<-su2&&y2>su2?5: //左下 x2>su2&&y2<-su2?8: //右上 x2>su2&&y2>su2?6: //右下 x2<0&&$(y2)<su2?2: //左 x2>0&&$(y2)<su2?3: //右 $(x2)<su2&&y2<0?4:1 //4=上,1=下 clips();time1=setInterval(function(){move(obj,x2,y2)},haomiao) }}, move:function(obj,x2,y2){ //RPG move with(yidong){ if(++yibu1>yibu2)return cle();try{obj.style.left=x2*yibu1+oldx;obj.style.top=y2*yibu1+oldy}catch(e){} if(++obj.jiange>jiange){ obj.jiange=0;zhenx<4?zhenx++:zhenx=1; clips(); } }} } //json yidong over. function document.onmousedown(){ckin=true;yidong.ck(me);document.body.setCapture();} function document.onmousemove(){yidong.evx=event.x;yidong.evy=event.y} function document.onmouseup(){ckin=false;document.body.releaseCapture();} setInterval("if(ckin)yidong.ck(me)",150) //目前思路是150毫秒,檢查一次鼠標(biāo)左鍵是不是按住了....不停變換方向. </script>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]