JavaScript characters walk Realistically, have completed _javascript skills

Source: Internet
Author: User
Tags abs setinterval
First appreciate, take two steps to try.
<HTML><HEAD> <meta http-equiv= ' content-type ' content= ' text/html;charset=gb2312 ' > <meta name= ' GEMERATPR ' content= ' Network programmer Companion (lshdic) > <TITLE> god of the Devil Showdown 3 (tentative name, God Demon Duel 2)-prophase development projects, spare time to engage in the ~</title> </ Head><body topmargin= ' 2 ' leftmargin= ' 2 ' > <p> <p> <p> <center > I Invincible Wild ball fist (amateur jscoder) ~, pinch haha. The dance of the winds and dances Welcome to bbs.51js.com-worry-free script, Daniel a heap! ^-^ </center> <div id= "Me" > </div> <div ></div> <di V ></div> <!--above is HTML, the following is the program--> <script> function window.onload () {//start, anyway everything for-efficiency, or efficiency ... Program efficiency. Yidong.hei=img1.offsetheight;yidong.wid=img1.offsetwidth} var time1=null//Global Var yidong={yibu1:0,yibu2:0,su:3, HAOMIAO:25,//Mobile/json Program collection 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/( 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&LT;-SU2&AMP;&AMP;Y2&LT;-SU2) zheny=7; Left upper else if (X2&LT;-SU2&AMP;&AMP;Y2&GT;SU2) zheny=5; Left lower else if (X2&GT;SU2&AMP;&AMP;Y2&LT;-SU2) zheny=8; Upper right else if (X2&GT;SU2&AMP;&AMP;Y2&GT;SU2) zheny=6; Lower right else if (X2<0&&math.abs (y2) <su2) zheny=2; Left else if (X2>0&&math.abs (y2) <su2) zheny=3; Right else if (Math.Abs (x2) <su2&&y2<0) zheny=4; On else if (Math.Abs (x2) <su2&&y2>0) Zheny=1; Lower 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&GT;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 All SELECT Note: If the need to introduce external JS need to refresh to perform]

Then please analyze the program, I have the following topics for cattle and cattle practicing (RPG game development-Actual combat, do not engage in theory, focus on program implementation ideas).
1: My program, you can be further streamlined? optimization/adaptation algorithm? Try it, but you can't say it's too easy. Hint: I currently think, Judge 8 move direction of the program, although the efficiency can, but if else's writing really a bit cliché, I also think of new ideas to simplify this procedure, if you have, you leak hands!
2: All want to play for the road, right? Haha, then please try to touch that Blue square? Note: Suppose that future obstacles are random, not fixed. You come across a blue barrier than that, stop, or say, spare the past .... Remind you: The key is thinking.
3: There is a problem I do not know, is the clip of CSS, I found that, although a small piece was cropped, but other parts that were trimmed, although not visible, but still occupy the place (the original size), for example, the character went to the middle, but because the lower part of the gap is exceeded, there will be a scroll bar, this, Can you get rid of the trimmed part by hard? Don't let it affect the scroll bar? (Don't say body plus scroll=no is finished, this I know ^)
4: Who has the ability to change to FF can also run? Note: I did not install that thing, haha, but I think it is not easy/may be difficult to change ....


Note: Above 4 points, you only need to complete a little can be (very cow), of course, you can/all want to solve 4 points, that more cow B, oh a joke, anyway you ^ ^.

Here's what's new:

1: Take the advice of the campaign, using its super ternary expression, support multiline? Can you annotate? As many as if ELSE? True cow. Used, and left a lot of code.
2: Learn from the idea of winter, using CSS backgroundposint way to replace the clip cutting, easy to use .... A DIV is done, without the inclusion of an img
3: Reference to the theoretician Hax code, the HTML code uses the compatible writing, however, the JS program does not have the browser test, cannot write the standard, hehe.

4: oneself, and realize the [mouse hold down], constantly change direction to move, you this test, you can click, you can always hold down the left mouse button constantly moving ... The idea is to use a timer non-stop detection, also accounted for a very small CPU, I do not know if we have a better idea? Also, use the setcapture () this mouse lock.
5: Oneself, after testing, blocked a few abnormal loopholes (0 or Nan, said, should not be wrong)

Streamlined/Optimized programs:
<ptml><pead> <title> Magic Showdown 3 (tentative name, God Demon Duel 2)-prophase development project, spare time to engage in ~</title></pead> <body > <p > I invincible Wild Ball fist (amateur jscoder) ~, pinch haha. The Dance of the wind and dancing Welcome to bbs.51js.com-worry-free script, Daniel a heap! ^-^ </p> <div id= "Me"/upload/20090424013004103.gif ') no-repeat;z-index:5; width:64px;height:64px; "jiange=" 0 "></div> <div ></div> <div ></div> <!--above is HTML , the following is the program--> <script> var ckin=false,$=math.abs,time1=null//Global, variable acceleration. var yidong={yibu1:0,yibu2:0,oldx:0,oldy:0,evx:0,evy:0,su:4,haomiao:20,//Mobile/json Program Collection Zhenx:1,zheny:1,jiange:5,min : 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;},// The above new take winter backgroundposition thought, feeling more convenient than 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; Here's a new block of 0/nan. var su2=su/2 zheny=x2<-su2&&y2<-su2?7://upper Left, here is the Super ternary multi-line expression to take campaign ... Oh, more than if else left. ★★★★★! X2&LT;-SU2&AMP;&AMP;Y2&GT;SU2?5://Lower Left x2>su2&&y2<-su2?8://Right upper x2>su2&&y2>su2?6://Lower Right x2& lt;0&&$ (y2) <su2?2://Left x2>0&&$ (y2) <su2?3://Right $ (x2) <su2&&y2<0?4:1//4=, 1 = down Clips (); Time1=setinterval (function () {move (Obj,x2,y2)},haomiao)}, Move:function (obj,x2,y2) {//RPG move with (Yidong {if (++YIBU1&GT;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);d ocument.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)//Current train of thought is 150 milliseconds, check the left mouse button is not hold down .... constantly changing direction. </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.