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

Posted 2020-08-05 骑猪敲代码

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的使用键盘控制方块移动相关的知识，希望对你有一定的参考价值。

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

以上是关于简单的使用键盘控制方块移动的主要内容，如果未能解决你的问题，请参考以下文章

《Python多人游戏项目实战》第一节简单的方块移动

Linux下c语言实现有色界面俄罗斯方块

键盘事件练习——移动的方块

利用js键盘事件制作会移动效果

在C#编程中用键盘上的方向键来控制一张图片的移动的代码怎么写啊？要简单具体的！！！