Write too tired, write for 3 hours! We can play.
The interface is not beautiful, although the batch
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <TITLE>WWW.JB51.NET Cloud Habitat Community gluttonous snake </title> <style type=" Text/css "> <!--body { margin-left:0px; margin-top:0px; } #global {Margin:auto; position:relative; width:800px; height:500px; Border:thick double #ff0000; Background-color: #666666} #global #p {background-color: #999999; Position:absolute; height:500px; width:500px; left:0px; top:0px; Border-right-width:thick; border-right-style:double; Border-right-color: #FF0000; } #global #p #k {background-color: #0000FF; Position:absolute; height:25px; width:25px; left:0px; top:0px; #global #p. xin {position:absolute; height:25px; width:25px; }--> </style> <script language= "javascript" type= "Text/javascript" >//Get new element location Var bucunzai=true;//record The new element is not mobile Var xinkx; var xinky; K element Positioning function lo () {var Objectp=document.getelementbyid ("K") objectp.style.left= "250px" objectp.style.top= "after page load 250px "//k element final style code K_zz=objectp.currentstyle?document.getelementbyid (" K "). Currentstyle: Document.defaultView.getComputedStyle (Objectp,null); ///record location of the array var k_x=new array () var k_y=new array ()//record snake length var k_number=0//direction key function Document.onkeydown=pmove; The Var fx=0//gets the last keystroke straight function pmove () {if (Bucunzai) {xin (); Bucunzai=false; } Objectp=document.getelementbyid ("K") kcode=window.event?window.event:arguments[0]; if (kcode.keycode==39&&fx!=39&&fx!=37) {fx=kcode.keycode; try{clearinterval (Kbottom); catch (e) {} try{clearinterval (kright); catch (e) {} try{clearinterval (ktop); catch (e) {} try{clearinterval (Kleft); } CAtch (e) {} kleft=setinterval (function () {if (parseint (objectp.style.left) >=475) {alert ("exceeded"); Clearinterval ( Kleft);} Else{if (k_x.length>=400) {k_x.shift (); K_y.shift ();}; K_x[k_x.length]=k_zz.left;k_y[k_y.length]=k_zz.top;objectp.style.left= (parseint (objectp.style.left) +25) + "px";} if (k_zz.left==xinkx&&k_zz.top==xinky) {k_number++;xin ();} K_kmove ();},100)} if (kcode.keycode==37&&fx!=39&&fx!=37) {fx=kcode.keycode; try{clearinterval (Kbottom); catch (e) {} try{clearinterval (kright); catch (e) {} try{clearinterval (ktop); catch (e) {} try{clearinterval (Kleft); catch (e) {} kright=setinterval (function () {if (parseint (objectp.style.left) <=0) {alert ("exceeded"); Clearinterval ( Kright);} Else{if (k_x.length>=400) {k_x.shift (); K_y.shift ();}; K_x[k_x.length]=k_zz.left;k_y[k_y.length]=k_zz.top;objectp.style.left= (parseint (objectp.style.left) -25) + "px";} if (k_zz.left==xinkx&&k_zz.top==xinky) {k_number++;xin ();} K_kmove ();},100)} if (kcode.keycode==40&&fx!=40&&fx!=38) {Fx=kcode.keycode; try{clearinterval (Kbottom); catch (e) {} try{clearinterval (kright); catch (e) {} try{clearinterval (ktop); catch (e) {} try{clearinterval (Kleft); catch (e) {} kbottom=setinterval (function () {if (parseint (objectp.style.top) >=475) {alert ("exceeded"); Clearinterval ( Kbottom);} Else{if (k_x.length>=400) {k_x.shift (); K_y.shift ();}; K_x[k_x.length]=k_zz.left;k_y[k_y.length]=k_zz.top;objectp.style.top= (parseint (objectp.style.top) +25) + "px";} if (k_zz.left==xinkx&&k_zz.top==xinky) {k_number++;xin ();} K_kmove ();},100)} if (kcode.keycode==38&&fx!=40&&fx!=38) {fx=kcode.keycode; try{clearinterval (Kbottom); catch (e) {} try{clearinterval (kright); catch (e) {} try{clearinterval (ktop); catch (e) {} try{clearinterval (Kleft); catch (e) {} ktop=setinterval (function () {if (parseint (objectp.style.top) <=0) {alert ("exceeded"); Clearinterval (ktop);} Else{if (k_x.length>=400) {k_x.shift (); k_y.shift ();}; K_x[k_x.length]=k_zz.left;k_y[k_y.length]=k_zz.top;objectp.style.top= (parseint (objectp.style.top) -25) + "px";} if (k_zz.left==xinkx&&k_zz.top==xinky) {k_number++;xin ();} K_kmove ();},100)}}//Generate new element code function xin () {var xinkleft=parseint (Math.random () *20) *25+ "px"; var xinktop=parseint (Math.random () *20) *25+ "px"; var xinkcolor1=parseint (Math.random () *14). tostring var xinkcolor2=parseint (Math.random () *14). tostring Var Xinkcolor3=parseint (Math.random () *14). tostring var xinkcolor4=parseint (Math.random () *14). tostring Var Xinkcolor5=parseint (Math.random () *14). tostring var xinkcolor6=parseint (Math.random () *14). ToString () var xink =document.createelement ("div") xink.id= "K" +k_number xink.classname= "xin" Xink.style.left=xinkleft xink.style.top= Xinktop xink.style.backgroundcolor= "#" +xinkcolor1+xinkcolor2+xinkcolor3+xinkcolor4+xinkcolor5+xinkcolor6 var pp= document.getElementById ("P") pp.appendchild (Xink) Xinkx=xinkleft Xinky=xinktop}//The new element follows the Move function K_kmove () {if (k_number==0) {} else{for (Var i=0;i<k_number;i++) {var move=document.getelementby Id ("K" +i) move.style.top=k_y[k_y.length-(i+1)] move.style.left=k_x[k_x.length-(I+1)}}} </script> </pea d> <body onload= "Lo ();" > <div id= "Global" > <div id= "P" > <div id= "k" ></div> </div> </div> &L T;/body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]