键盘控制 div 平滑移动

<style>
  div {
    width: 10px;
    height: 10px;
    background: red;
    position: fixed;
    border-radius: 50%;
  }
</style>

<div />

<script>
  onload = function () {
    const map = {};
    const ele = document.querySelector("div");

    setInterval(() => {
      if (map["ArrowLeft"]) ele.style.left = ele.offsetLeft - 1 + "px";
      if (map["ArrowUp"]) ele.style.top = ele.offsetTop - 1 + "px";
      if (map["ArrowRight"]) ele.style.left = ele.offsetLeft + 1 + "px";
      if (map["ArrowDown"]) ele.style.top = ele.offsetTop + 1 + "px";
    }, 1);

    document.onkeydown = (e) => (map[e.key] = true);
    document.onkeyup = (e) => (map[e.key] = false);
  };
</script>