Exercise-The villain moves

<! DOCTYPE html>;} #wrap {width:500px;height:500px;border:1px solid green;margin:10px auto; position:relative;} #wrap Img{position:absolute;top:0;left:0;}</style>//get the object of the villain        varren = document.getElementById (' ren ')); //bind keyboard-pressed eventsDocument.onkeydown =function(event) {//dealing with compatibility issues            varE = Window.event | |event; //set the stride length for each move of a person            varStep = 10; /*w-87 s-83 a-65 d-68*/            Switch(e.keycode) { Case87://onRen.style.top = Math.max (0,ren.offsettop-step) + ' px '; //Ren.style.top = ren.offsettop-step+ ' px ';Changeimg (' u1.gif ', ' u2.gif ');  Break;  Case83://under                    //alert (ren.offsettop); Current top Value                    //Ren.style.top = ren.offsettop+step+ ' px ';                    //down Border Top 470 If the 470 is large take 470Ren.style.top = Math.min (470,ren.offsettop+step) + ' px '; Changeimg (' B1.gif ', ' b2.gif ');  Break;  Case65://left                    //Ren.style.left = ren.offsetleft-step+ ' px ';Ren.style.left = Math.max (0,ren.offsetleft-step) + ' px '; Changeimg (' L1.gif ', ' l2.gif ');  Break;  Case68://Right                    //Ren.style.left = ren.offsetleft+step+ ' px ';Ren.style.left = Math.min (470,ren.offsetleft+step) + ' px '; Changeimg (' R1.gif ', ' r2.gif ');  Break;  Case81: Alert (' You have gone ' +i+ ' step ~); }        }        ////Change chart method        //function changeimg (img1,img2) {        ////Truncate file name from absolute path        //var newtu = Ren.src.substr (Ren.src.lastIndexOf ('/') +1);        ////To determine the displayed picture according to the direction        //if (newtu = = img1) {        //ren.src = ' images/' +img2;        //}else{        //ren.src = ' images/' +img1;        //     }        // }        vari = 0; functionchangeimg (IMG1, img2) {if(i%2==0) {//Maybe it's right to just write i%2.REN.SRC = ' images/' +Img2; }Else{ren.src= ' images/' +IMG1; } I++; }    </script>

Online Address: http://yupinghua.com/practices/components/%E5%B0%8F%E4%BA%BA%E7%A7%BB%E5%8A%A8.html

Exercise-The villain moves