利用键盘控制小方块的移动

2020-3-1 前端达人

原理

利用键盘控制移动，则需要了解onkeydown函数，表示某个按键被按下，可以以此绑定一个事件响应函数，当键盘被按下时候，触发此事件，进行移动

keyCode 对于keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。因此我们可以根据keycode返回的字符码来判断用户所按下的键，下面就是一个用于测试上下左右按键的js代码，经过我的测试之后，返回37 38 39 40；

window.onload = function(){
            var box = document.getElementById("box");
            document.onkeydown = function(event){
                event = event || window.event;
                console.log(event.keyCode);
            }           
        };
3

3.方块的移动实际上就是坐标的改变，因此需要offsetLeft 和offsetTop 来获得当前方块的坐标，然后将坐标进行一定的更改，就可以实现移动的效果了，下面给出代码

window.onload = function() {
            document.onkeydown = function(event) {
                event = event || window.event;
                //设置移动速度
                var speed = 10;
                //当ctrl和方向按键同时按下时，提升移动速度
                if(event.ctrlKey) {
                    speed = 50;
                }
                //获取div
                var box01 = document.getElementById("box01");
                switch(event.keyCode) {
                    /*keyCode返回按下按键的编码
                     * 37 向左
                     * 38向上
                     * 39向右
                     * 40向下
                     */
                    case 37:
                        box01.style.left = box01.offsetLeft - speed + "px";
                        break;
                    case 39:
                        box01.style.left = box01.offsetLeft + speed + "px";
                        break;
                    case 38:
                        box01.style.top = box01.offsetTop - speed + "px";
                        break;
                    case 40:
                        box01.style.top = box01.offsetTop + speed + "px";
                        break;

                }
            };

        };

这样就可以简单实现方块的移动，但是此时我们会发现一个问题，当我们进行移动的时候，按住按键不松手，理论上方块应该直接平滑的进行移动，但实际上并非如此，第一下它会有一个小的停顿，这实际上是浏览器防止误触所设置的，因此我们需要对此进行优化
解决方案

这里我采用了定时器的做法来解决这个问题，因为控制移动的因素有两个，一个是控制方向，一个是控制速度，控制方向没有问题，因此我们需要改变速度
setInterval（function(){},time）;这是一个定时器，我们只需要在time时间内调用一次函数，就可以解决停顿的问题了
下面附上修改后的完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box01 {
            width: 100px;
            height: 100px;
            background-color: #008000;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {

            //获取div
            var box01 = document.getElementById("box01");
            //设置移动速度
            var speed = 10;
            //设置移动的方向
            var dir = 0;

            setInterval(function() {
                switch(dir) {
                    /*keyCode返回按下按键的编码
                     * 37 向左
                     * 38向上
                     * 39向右
                     * 40向下
                     */
                    case 37:
                        box01.style.left = box01.offsetLeft - speed + "px";
                        break;
                    case 39:
                        box01.style.left = box01.offsetLeft + speed + "px";
                        break;
                    case 38:
                        box01.style.top = box01.offsetTop - speed + "px";
                        break;
                    case 40:
                        box01.style.top = box01.offsetTop + speed + "px";
                        break;

                }

            }, 50)

            document.onkeydown = function(event) {
                event = event || window.event;

                //当ctrl和方向按键同时按下时，提升移动速度
                if(event.ctrlKey) {
                    speed = 50;
                } else {
                    speed = 10;
                }
                //使dir等于keycode的值
                dir = event.keyCode;

                //当鼠标松开时，停止移动         ---如果不写这一个会造成无法停止移动的效果
                document.onkeyup = function() {
                    dir = 0;
                };

            };

        };
    </script>
</head>

<body>
    <div id="box01"></div>
</body>

</html>

————————————————

版权声明：本文为CSDN博主「loving-cat」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_42878211/article/details/104558443

分享本文至：

« 汽车行业的UX启发-车载HMI的经验法则 Vuex的一些用法 »

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

利用键盘控制小方块的移动

分类

日历

链接

个人资料

存档