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

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>