js键盘控制方块运动(自动运动，仅控制方向，到达屏幕边缘会自动反弹）

<style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: #6ff;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>

<div class="box"></div>
<script>
  var oBox = document.querySelector('.box');
  var maxLeft = document.documentElement.clientWidth - oBox.offsetWidth;
  var maxTop = document.documentElement.clientHeight - oBox.offsetHeight;

  var speed = 10;
  var time = 100;
  var speedX = speed;
  var speedY = 0;
  var timer = null


  document.onkeydown = function (e) {
    var ev = event || e;
    var keyCode = ev.keyCode || ev.which;
    clearInterval(timer);
    timer = setInterval(function () {

      var left = oBox.offsetLeft;
      var top = oBox.offsetTop;

      left += speedX;
      top += speedY;

      if (left < 0 || left > maxLeft) {
        speedX = -speedX;
      }


      if (top < 0 || top > maxTop) {
        speedY = -speedY;
      }

      oBox.style.left = left + 'px';
      oBox.style.top = top + 'px';

    }, time);

    switch (keyCode) {
      case 37: {
        speedY = 0;
        speedX = -speed;
      }; break;
      case 38: {
        speedY = -speed;
        speedX = 0;
      }; break;
      case 39: {
        speedY = 0;
        speedX = speed;
      }; break;
      case 40: {
        speedY = speed;
        speedX = 0;
      }
    }

  }
</script>