Day 19键盘事件

最新推荐文章于 2024-08-29 10:04:34 发布

banana tree

最新推荐文章于 2024-08-29 10:04:34 发布

阅读量230

点赞数

文章标签： elementui 前端

本文链接：https://blog.csdn.net/lemon_shinning/article/details/124910338

版权

JavaScript DOM操作键盘事件定时器移动效果

关键词由CSDN通过智能技术生成

创建一个小方块，让小方块根据所按的上下左右键进行移动。

第一步，创建一个小方块。

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

第二步，小方块的样式。

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            overflow: hidden;
        }
        #ok{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>

第三步，让小方块移动，javascript内容。

<script>
    var dOk = document.getElementById("ok");
    //不要这么写，不合适，运动不自然
    window.onkeydown = function(e){
        var l = dOk.offsetLeft;
        var t = dOk.offsetTop;
        if(e.keyCode === 37){
            l -= 5;
        }else if(e.keyCode === 38){
            t -= 5;
        }else if(e.keyCode === 39){
            l += 5;
        }else if(e.keyCode === 40){
            t += 5;
        }
        dOk.style.left = l + 'px';
        dOk.style.top = t + 'px';
    }
</script>

这样写虽然可以实现运动，但是很不顺畅，所以这样写是不合适的，正确的写法是状态加定时器。

<script>
    var dOk = document.getElementById("ok");
    //不要这么写，不合适，运动不自然
    /* window.onkeydown = function(e){
        var l = dOk.offsetLeft;
        var t = dOk.offsetTop;
        if(e.keyCode === 37){
            l -= 5;
        }else if(e.keyCode === 38){
            t -= 5;
        }else if(e.keyCode === 39){
            l += 5;
        }else if(e.keyCode === 40){
            t += 5;
        }
        dOk.style.left = l + 'px';
        dOk.style.top = t + 'px';
    } */

    // 合适：计时器加状态

    var isLeft = false;
    var isTop = false;
    var isRight = false;
    var isBottom = false;
    var timer = null;

    // 键盘事件，只修改状态
    window.onkeydown = function(e){
        if(e.keyCode === 37){
            isLeft = true;
        }else if(e.keyCode === 38){
            isTop = true;
        }else if(e.keyCode === 39){
            isRight = true;
        }else if(e.keyCode === 40){
            isBottom = true;
        }
    }

    // 键盘抬起事件
    window.onkeyup = function(e){
        if(e.keyCode === 37){
            isLeft = false;
        }else if(e.keyCode === 38){
            isTop = false;
        }else if(e.keyCode === 39){
            isRight = false;
        }else if(e.keyCode === 40){
            isBottom = false;
        }
    }

    // 通过计时器实现移动
    timer = setInterval(function(){
        var l = dOk.offsetLeft;
        l = l<0 ? 0 : (l>window.innerWidth-dOk.offsetWidth ? window.innerWidth-dOk.offsetWidth : l);
        var t = dOk.offsetTop;
        t = t<0? 0 : (t>window.innerHeight-dOk.offsetHeight ? window.innerHeight-dOk.offsetHeight : t);
        if(isLeft){
            l -= 5;
        }
        // 每个方向都得判断
        if(isTop){t -= 5;}
        if(isRight){l += 5;}
        if(isBottom){
            t += 5;
        }
        dOk.style.left = l + 'px';
        dOk.style.top = t + 'px';
    },30)
</script>

这样写首先给他们加状态，没按键之前他们的状态是false,按键之后状态变为true,然后在键盘事件中只改变状态。在定时器中实现运动，这样运动会比较顺畅，而且同时按两个键会斜着走，不会出现先卡一下，然后再运动的情况。

banana tree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day 19键盘事件

创建一个小方块，让小方块根据所按的上下左右键进行移动。第一步，创建一个小方块。<body> <div id="ok"></div></body>第二步，小方块的样式。<style> *{ margin: 0; padding: 0; list-style: none; } body{
复制链接

扫一扫