键盘事件

最新推荐文章于 2025-01-06 19:09:59 发布

[Augenstern]

最新推荐文章于 2025-01-06 19:09:59 发布

阅读量152

点赞数

CC 4.0 BY-SA版权

文章标签： linq safari p2p

本文链接：https://blog.youkuaiyun.com/weixin_44627935/article/details/125106958

1、键盘事件：只修改状态
  window.onkeydown = function(e){
      if(e.keyCode === 37){
          isLeft = true;
      }else if(e.keyCode === 38){
          isTop = true;
      }else if(e.keyCode === 39){
          isRight= false;
      }else if(e.keyCode === 40){
          isBottom = true;
      }
}
  window.onkeyup = function(e){
      if(e.keyCode === 37){
          isLeft = true;
      }else if(e.keyCode === 38){
          isTop = true;
      }else if(e.keyCode === 39){
          isRight= false;
      }else if(e.keyCode === 40){
          isBottom = true;
      }
}
2、随机函数
  function rand(min,max){
      return Math.floor(Math.random() * （max-min) + min);
  }

键盘控制div移动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘控制div移动</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #ok{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div id="ok"></div>
</body>
<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;
        var t = dOK.offsetTop;
        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>
</html>