JS元素跟着键盘上下左右移动

键盘控制网页元素移动

最新推荐文章于 2025-02-22 18:45:28 发布

原创最新推荐文章于 2025-02-22 18:45:28 发布 · 389 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css3 #前端

前端同时被 2 个专栏收录

47 篇文章

订阅专栏

JavaScript

38 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现键盘按键控制网页中div元素上下左右移动的方法。通过监听键盘事件并更新div元素的位置属性，实现了基本的游戏化互动效果。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        /* 基于body */
        position: absolute;
        top: 0px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
  <script>
    const box = document.querySelector(".box");

    //设置键盘监听
    window.onkeydown = function (event) {
      //获取box距离父亲上边和左边的距离
      const offsetTop = box.offsetTop;
      console.log(offsetTop);
      const offsetLeft = box.offsetLeft;
      console.log(offsetLeft);

      //获取按键，实现aswd;
      switch (event.key) {
        case "a":
          box.style.left = offsetLeft - 2 + "px";
          console.log("a");
          break;
        case "s":
          box.style.top = offsetTop + 2 + "px";
          console.log("s");
          break;
        case "w":
          box.style.top = offsetTop - 2 + "px";
          console.log("w");
          break;
        case "d":
          box.style.left = offsetLeft + 2 + "px";
          console.log("d");
          break;
        default:
          break;
      }
    };
  </script>
</html>