<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title></title>
     <style>
         #ren{width:50px;height:50px;position:absolute;background-color:blue;z-index:3;left:100px;top:0px}
         #zd{width:50px;height:50px;position:absolute;background-color:red;z-index:2}
     </style>
     <script>
         var a = new Array();
         var x = 0, y = 1;
         var fx = 4;
        
         function yidong(e)
         {
             var ren = document.getElementById("ren");
             if(e.keyCode==37)
             {
                 ren.style.left = ren.offsetLeft - 51 + "px";
                 y--;
                 fx = 1;
             }
             if (e.keyCode == 38) {
                 ren.style.top = ren.offsetTop - 51 + "px";
                 x--;
                 fx = 2;
             }
             if (e.keyCode == 39) {
                 ren.style.left = ren.offsetLeft +51 + "px";
                 y++;
                 fx = 3;
             }
             if (e.keyCode == 40) {
                 ren.style.top = ren.offsetTop +51 + "px";
                 x++;
                 fx = 4;
             }
             if(e.keyCode==65)
             {
             var zd = document.createElement("div");
                 zd.id = "zd";
 zd.style.left = ren.offsetLeft +"px";
                 zd.style.top = ren.offsetTop + "px";
 document.body.appendChild(zd);
 zdyd(zd,fx);
             }
         }
         function zdyd(a,f)
         {
             setInterval(function () {
 if (f == 1) {
 a.style.left = a.offsetLeft - 51 + "px";
 }
                 if (f == 2) {
                     a.style.top = a.offsetTop - 51 + "px";
                 }
                 if (f == 3) {
                     a.style.left = a.offsetLeft + 51 + "px";
                 }
                 if (f == 4) {
                     a.style.top = a.offsetTop + 51 + "px";
                 }
             },100)
             
         }
         document.onkeydown = yidong;
         </script>
 </head>
 <body>
     <div id="ren"></div>
     
 </body>
 </html>