简单的使用键盘控制方块移动

   DOCTYPE html  > 
   html   lang  ="en"  > 
   head  > 
       meta   charset  ="UTF-8"  > 
       title  > 键盘控制方块移动   title  > 
       style  >  
    #box  {  
        width  :   50px  ;  
        height  :   50px  ;  
        background-color  :   green  ;  
        position  :   relative  ;  
        left  :   50px  ;  
        top  :   50px  ; 
     } 
       style  > 
   head  > 
   body  > 
       div   id  ="box"  >  div  > 
       script  > 
         //   var box=document.getElementById('box');//此部分代码的效果会用小小的停顿，下面的为改进代码 
         //   var l=0; 
         //   var t=0; 
         //   document.onkeydown=function(){ 
         //       var e=window.event||ev; 
         //       // console.log(e.keyCode); 
         //       if (e.keyCode==37) { 
         //           l-=10; 
         //           box.style.                                
         //           left=l+'px'; 
         //       } 
         //       if (e.keyCode==38) { 
         //           t-=10; 
         //           box.style.top=t+'px'; 
         //       } 
         //       if (e.keyCode==39) { 
         //           l+=10; 
         //           box.style.left=l+'px'; 
         //       } 
         //       if (e.keyCode==40) { 
         //           t+=10; 
         //           box.style.top=t+'px'; 
         //       } 
         //   } 
         var   div  =  document.getElementById(  '  box  '  );
          var   s  =  0  ,left  =  0  ,right  =  0  ,bottom  =  0  ;  //  用top不可以，为保留字； 
         var   timer  =  null  ,x  =  50  ,y  =  50  ;
        timer  =  setInterval(  function  (){
              if   (left  ==  1  ) {
                x  -=  5  ;
                div.style.left  =  x  +  '  px  '  ;
            }
              if   (right  ==  1  ) {
                x  +=  5  ;
                div.style.left  =  x  +  '  px  '  ;
            }
              if   (s  ==  1  ) {
                y  -=  5  ;
                div.style.top  =  y  +  '  px  '  ;
            }
              if   (bottom  ==  1  ) {
                y  +=  5  ;
                div.style.top  =  y  +  '  px  '  ;
            }
        },  20  )
        document.onkeydown  =  function  (ev){
              var   e  =  ev  ||  window.event;
              switch  (e.keyCode){
                  case   37  :
                    left  =  1  ;
                      break  ;
                  case   38  :
                    s  =  1  ;
                      break  ;
                  case   39  :
                    right  =  1  ;
                      break  ;
                  case   40  :
                    bottom  =  1  ;
                      break  ;
                  default  :
                    alert(  '  请按方向键  '  );
            }
        }
        document.onkeyup  =  function  (ev){
              var   e  =  ev  ||  window.event;
              switch  (e.keyCode){
                  case   37  :
                    left  =  0  ;
                      break  ;
                  case   38  :
                    s  =  0  ;
                      break  ;
                  case   39  :
                    right  =  0  ;
                      break  ;
                  case   40  :
                    bottom  =  0  ;
                      break  ;
                  default  :
                    alert(  '  请按方向键  '  );
            }
        }
        script  > 
   body  > 

   html  >  

查看更多关于简单的使用键盘控制方块移动的详细内容...