键盘事件实现方块的移动 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <style>
        #box {
            width: 400px;
            height: 600px;
            margin: 20px auto 0;
            border: 1px solid black;
            position: relative;
        }

        #plane {
            width: 50px;
            height: 50px;
            background: pink;
            position: absolute;
            bottom: 0;
            left: 175px;
        }

    </style>
</head>
<body>
<div id="box">
    <div id="plane"></div>
</div>
</body>
</html>
<script>
    document.onkeydown = function (event) {
        console.log(event.keyCode)
        //keyCode  按下哪个键他所对应的数字
        //key   之间显示按下的哪个键
    }
    // document.onkeyup = function (event) {
    //     console.log(event.keyCode)
    //     //keyCode  按下哪个键他所对应的数字
    //     //key   之间显示按下的哪个键
    // }
    // document.onkeypress = function (event) {
    //     console.log(event.keyCode)
    //     //keyCode  按下哪个键他所对应的数字
    //     //key   之间显示按下的哪个键
    // }

    var box = document.getElementById('box')
    var plane = document.getElementById('plane')

    document.onkeydown = function (event) {
        if (event.keyCode == 37) {
        //
        //     if (plane.offsetLeft <= 0){
        //         plane.offsetLeft = 0
        //     }else{
        //         plane.style.left = plane.offsetLeft - 5 + 'px'
        //     }



            plane.style.left=plane.offsetLeft <= 0?0: plane.offsetLeft - 5 + 'px'
        }

        if (event.keyCode == 39) {
            //
            // if (plane.offsetLeft >= box.offsetWidth - plane.offsetWidth){
            //     plane.offsetLeft = box.offsetWidth - plane.offsetWidth
            // }else{
            //     plane.style.left = plane.offsetLeft + 5 + 'px'
            // }


            plane.style.left=plane.offsetLeft >= box.offsetWidth - plane.offsetWidth?box.offsetWidth - plane.offsetWidth: plane.style.left = plane.offsetLeft + 5 + 'px'
        }


    }


</script>

首先我们先建立个一个整体的盒子 和 plane盒子

代码如下

 <style>
        #box {
            width: 400px;
            height: 600px;
            margin: 20px auto 0;
            border: 1px solid black;
            position: relative;
        }

        #plane {
            width: 50px;
            height: 50px;
            background: pink;
            position: absolute;
            bottom: 0;
            left: 175px;
        }

    </style>

然后我们调用一个函数

  document.onkeydown = function (event) {
        console.log(event.keyCode)
        //keyCode  按下哪个键他所对应的数字
        //key   之间显示按下的哪个键
    }

这样我们按下每个键盘就会输出对应的keyCode

如图所示

 然后再script中调用dom

代码如下

 var box = document.getElementById('box')
    var plane = document.getElementById('plane')

然后我们思考控制plane的左右移动

然后

根据他的左右移动 我们想到

当plane的offsetleft<0  我们让他的offsetleft=0

这样不至于让他超出这个div

 

同理

 

如果右边plane的offsetleft+offsetwidth>div.offsetwidth

我们让plane的offsetleft+offsetwidth=div.offsetwidth

 

这样就可以实现键盘事件实现方块的移动

代码如下

   document.onkeydown = function (event) {
        if (event.keyCode == 37) {
        //
        //     if (plane.offsetLeft <= 0){
        //         plane.offsetLeft = 0
        //     }else{
        //         plane.style.left = plane.offsetLeft - 5 + 'px'
        //     }



        }

        if (event.keyCode == 39) {
            //
            // if (plane.offsetLeft >= box.offsetWidth - plane.offsetWidth){
            //     plane.offsetLeft = box.offsetWidth - plane.offsetWidth
            // }else{
            //     plane.style.left = plane.offsetLeft + 5 + 'px'
            // }


        }


    }

当然

如果我们考虑效率的话

我们可以使用三元表达式

代码如下

 plane.style.left=plane.offsetLeft <= 0?0: plane.offsetLeft - 5 + 'px'
  plane.style.left=plane.offsetLeft >= box.offsetWidth - plane.offsetWidth?box.offsetWidth - plane.offsetWidth: plane.style.left = plane.offsetLeft + 5 + 'px'

 

posted @ 2021-12-11 21:13  doudou帅  阅读(83)  评论(0)    收藏  举报