你的位置:首页 > 网页设计

[网页设计]简单的使用键盘控制方块移动


<!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>