一個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;
  }
});複製程式碼

希望對你有所幫助！！！