That day in http://bbs.51js.com/viewthread.php? Tid = 83582 I saw the JS man walking written by fengyunwu (fengyunwu). After a rough reading, I thought the code was not very clear and there was no comment, and the object encapsulation was not very nice, so I thought about it and wrote one myself, encapsulating all the attributes and actions of the walking villain in the object man. The code is not optimized, but it can basically run under IE and ff. note that do not manually copy the following code because the following code has been abused by csdn. click Copy to clipboard to copy. Otherwise, the copied code may fail. note that the file must be saved in UTF-8 format.
<HTML> <br/> <pead> <br/> <title> walk </title> <br/> <meta http-equiv = "Content-Type" content =" text/html; charset = UTF-8 "/> <br/> <style> <br/> body {<br/> padding: 0px; <br/> margin: 0px; <br/>}< br/> # man {<br/> position: absolute; <br/> left: 300px; <br/> top: 200px; <br/> border: solid red 0px; <br/> Height: 64px; <br/> width: 64px; <br/> Background: URL (http://p.blog.csdn.net/images/p_blog_csdn _ Net/sunxing007/entryimages/20090424/man.gif) 0px 0px; <br/>}< br/> </style> <br/> </pead> <br/> <body onload = "man. init ('Man ', 300,200 ); "> <br/> <Div id =" man "> </div> <br/> </body> <br/> <script language =" JavaScript "> <br //> // construct our model, images that contain each step of the Eight orientation walk <br/> VAR model = []; <br/> model [0] = [{left: '0px ', top: '0px '}, {left:'-64px ', top: '0px'}, {left: '-128px', top: '0px '}, {left: '-192px', top: '0px '}]; <br/> m Odel [1] = [{left: '0px ', top:'-64px '}, {left:'-64px ', top:'-64px '}, {left: '-128px', top: '-64px'}, {left: '-192px', top: '-64px'}]; <br/> model [2] = [{left: '0px ', top:'-128px '}, {left:'-64px ', top: '-128px'}, {left: '-128px', top: '-128px'}, {left: '-192px', top: '-128px'}]; <br/> model [3] = [{left: '0px ', top:'-192px '}, {left:'-64px ', top: '-192px'}, {left: '-128px', top: '-192px'}, {left: '-192px', top: '-192px'}]; <br/> model [4] = [{Left: '0px ', top:'-256px '}, {left:'-64px ', top:'-256px '}, {left: '-128px', top: '-256px'}, {left: '-192px', top: '-256px'}]; <br/> model [5] = [{left: '0px ', top:'-320px '}, {left:'-64px ', top: '-320px'}, {left: '-128px', top: '-320px'}, {left: '-192px', top: '-320px'}]; <br/> model [6] = [{left: '0px ', top:'-384px '}, {left:'-64px ', top: '-384px'}, {left: '-128px', top: '-384px'}, {left: '-192px', top: '-384px'}]; <br/> model [7] = [{ Left: '0px ', top:'-448px '}, {left:'-64px ', top:'-448px '}, {left:'-128px ', top: '-448px'}, {left: '-192px', top: '-448px'}]; </P> <p> /******************************** * ******************************** <br/> * Author: sunxing007 <br/> * reprinted please indicate from the http://blog.csdn.net/sunxing007 <br/> ************************* **************************************** */<br/> // character object, encapsulates all actions of a walking villain <br/> var man ={< br/> El: NULL, <br/> mod El: model, <br/> // The first timer, used to move the entire Div [@ ID = 'man'] to show the moving effect of the character <br/> timer1: NULL, <br/> // second timer, used to switch Character Images and display footstep moving effect <br/> timer2: NULL, <br/> // The X coordinate of the target to be walked by the villain <br/> targetx: 0, <br/> // y coordinate of the target to be walked by the villain <br/> targety: 0, <br/> // X coordinate of the current location <br/> CX: 0, <br/> // y coordinate of the current location <br/> xy: 0, <br/> // The current forward direction <br/> direct: 0, <br/> init: function (ID, CX, CY) {</P> <p> // alert (1); <br/> man. el = document. getelementbyid (ID); </P> <p> man. cx = Cx; <br/> man. cy = Cy; <br/> man. el. style. left = man. cx + 'px '; <br/> man. el. style. top = man. cy + 'px '; <br/> document. onmousedown = function (event) {<br/> // handle the differences about event between IE and Firefox. <br/> var EVT = event | window. event; <br/> man.tar getx = EVT. X | EVT. pagex; <br/> man.tar Gety = EVT. Y | EVT. pagey; <br/> // For debug <br/> Status = "TX:" + man. t Argetx + "Ty:" + man.tar Gety + "| CX:" + man. cx + "Cy:" + man. cy; <br/> If (man. timer1) {<br/> clearinterval (man. timer1); <br/>}< br/> If (man. timer2) {<br/> clearinterval (man. timer2); <br/>}< br/> If (! (Man.tar getx = man. CX & man.tar Gety = man. cy) {<br/> man. walk (); <br/>}< br/>}; <br/>}, <br/> // walking <br/> walk: function () {<br/> var step = 0; <br/> var direct = man. getdirection (); <br/> man. direct = direct; <br/> // take a vertical line <br/> if(man.tar getX-Man.cx = 0) {<br/> man. timer1 = setinterval (function () {<br/> // downward <br/> If (man. direct = 0) {<br/> man. cy = man. cy + 1; <br/>}< br/> // up <br/> else if (man. direct = 3) {<br/> man. cy = man. cy-1; <br/>}< br/> man. el. style. top = man. cy; <br/> if(man.cy1_policman.tar Gety) {<br/> man. stop (); <br/>}< br/>}, 6 ); <br/>}< br/> // take a horizontal line <br/> else if(man.tar getY-Man.cy = 0) {<br/> man. timer1 = setinterval (function () {<br/> // left <br/> If (man. direct = 1) {<br/> man. cx = man. cx-1; <br/>}< br/> // right <br/> else if (man. direct = 2) {<br/> man. cx = man. cx + 1; <br/>}< br/> man. el. style. left = man. cx + 'px '; <br/> if(man.cxw.w.man.tar getx) {<br/> man. stop (); <br/>}< br/>}, 6 ); <br/>}< br/> // take the diagonal line <br/> else {<br/> // K = slope <br/> var K = (man.tar getY-Man.cy) /(man.tar getX-Man.cx); <br/> man. timer1 = setinterval (function () {<br/> // <br/> If (math. ABS (k) <= 1) {<br/> /********************************** * ********/<br/> if(man.tar getx> = man. CX) {<br/> man. cx = man. cx + 1; <br/> man. cy = K * Man. cx + man.targety-K * man.tar getx; <br/>}< br/> if(man.tar getx <man. CX) {<br/> man. cx = man. CX-1; <br/> man. cy = K * Man. cx + man.tar Gety-K * man.tar getx; <br/>}< br/> man. el. style. left = man. cx + 'px '; <br/> man. el. style. top = man. cy + 'px '; <br/> if(man.cxw.w.man.tar getx) {<br/> man. stop (); <br/>}< br/> else {<br/> /******************* * ***********************/<br/> if(man.tar Gety> = man. cy) {<br/> man. cy = man. cy + 1; <br/> man. cx = (man.cy-man.tar Gety + K * man.tar getx)/K; <br/>}< br/> if(man.tar Gety <man. cy) {<br/> man. cy = man. cy-1; <br/> man. cx = (man.cy-man.tar Gety + K * man.tar getx)/K; <br/>}< br/> man. el. style. left = man. cx + 'px '; <br/> man. el. style. top = man. cy + 'px '; <br/> if(man.cxw.w.man.tar getx) {<br/> man. stop (); <br/>}< br/>}, 6); <br/>}</P> <p> man. timer2 = setinterval (function () {<br/> // handle the differences about the background position in style. <br/> If (document. all) {<br/> man. el. style. backgroundpositionx = man. model [direct] [STEP]. left; <br/> man. el. style. backgroundpositiony = man. model [direct] [STEP]. top; <br/>}< br/> else {<br/> man. el. style. backgroundposition = man. model [direct] [STEP]. left + ''+ man. model [direct] [STEP]. top; <br/>}< br/> step = Step + 1; <br/> If (step = 4) {<br/> step = 0; <br/>}< br/>}, 200); <br/>}, <br/> stop: function () {<br/> clearinterval (man. timer1); <br/> clearinterval (man. timer2); <br/>}, <br/> // determines the direction. There are 8 directions in total. <br/> getdirection: function () {<br/> if(man.tar getx> parameter man.cx&man.tar getx <parameter man.cx1_64&man.tar Gety> man. cy) {<br/> return 0; <br/>}< br/> if(man.tar getx <man.cx&man.tar Gety> man.cy&man.tar Gety <man. cy + 64) {<br/> return 1; <br/>}< br/> if(man.tar getx> man.cx&man.tar Gety> man.cy&man.tar Gety <man. cy + 64) {<br/> return 2; <br/>}< br/> if(man.tar getx> export man.cx&man.tar getx <export man.cx1_64&man.tar Gety <man. cy) {<br/> return 3; <br/>}< br/> if(man.tar getx <man.cx&man.tar Gety> man. cy) {<br/> return 4; <br/>}< br/> if(man.tar getx> man.cx&man.tar Gety> man. cy + 64) {<br/> return 5; <br/>}< br/> if(man.tar getx <man.cx&man.tar Gety <man. cy) {<br/> return 6; <br/>}< br/> if(man.tar getx> man.cx&man.tar Gety <man. cy) {<br/> return 7; <br/>}< br/>/***********/<br/> return 0; <br/>}< br/>}; <br/> </SCRIPT> <br/> </ptml>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
