一个div运动，键盘操控的八个方向

解题思路：
1.给div一个动画效果
2.给每个方向添加一个自定义属性false
3.当按下键盘事件左（37）上（38）右（39）下（40）所对应的值时条件变成true
4.按键松开后 条件变回false

代码如下：
<script>
var box = document.querySelector('.box');
//给四个方向添加条件
var dir = {
  l: false,
  t: false,
  r: false,
  b: false
};

var speed = 5;
//运动的动画、每个方向运动的距离
(function move(){
  window.requestAnimationFrame(move);

  if(dir.l){
    box.style.left = box.offsetLeft - speed + 'px';
  }
  if(dir.r){
    box.style.left = box.offsetLeft + speed + 'px';
  }
  if(dir.t){
    box.style.top = box.offsetTop - speed + 'px';
  }
  if(dir.b){
    box.style.top = box.offsetTop + speed + 'px';
  }
})();
//添加键盘事件 运用switch语句
window.addEventListener('keydown', function (e){
  var keyCode = e.keyCode;
  switch (keyCode) {
    case 37:
      dir.l = true;
      break;
    case 38:
      dir.t = true;
      break;
    case 39:
      dir.r = true;
      break;
    case 40:
      dir.b = true;
      break;
  }
});
//案件抬起，条件变回初始值
window.addEventListener('keyup', function (e){
  var keyCode = e.keyCode;
  switch (keyCode) {
    case 37:
      dir.l = false;
      break;
    case 38:
      dir.t = false;
      break;
    case 39:
      dir.r = false;
      break;
    case 40:
      dir.b = false;
      break;
  }
});复制代码

希望对你有所帮助！！！

转载于:https://juejin.im/post/59f9e70a6fb9a0450f2142c5