首页 > > 网页制作 > css >

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

2018-06-24 00:15:50来源：未知阅读 ()

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