方向键控制运动，躲避多个障碍物

 效果图：

功能简介：

1. 通过方向键控制，让移动物体（需要运动的元素）在一定范围（定位父级）内移动。
2. 碰撞到障碍物时停止前进，可以同时设置多个障碍物。
3. 可以控制速度
4. 碰撞之后，开启回调，返回移动方向，碰撞面，和障碍物Dom，等信息

点击查看：完整代码 

js 部分：

class keyMoue {
  constructor(moveBox, locateParent, speed, obstacle, Collided) {
    this.window = window;
    this.onOff = false;
    this.obj = { // 判断方向
      37: false, // 左
      38: false, // 上
      39: false, // 右
      40: false // 下
    };
    this.moving = null; // 清楚运动用
    this.num = 0; // 记录按了几个键
    this.moveBox = moveBox; // 移动的元素
    this.locateParent = locateParent || document.documentElement; // 定位父级(运动的范围)
    this.speed = speed || 5; // 速度
    this.obstacle = [...obstacle] || []; // 障碍物
  };

  init() { // 初始化， 启动运动
    // ...
  };

  move() { // 移动
    // ...
  };

  collision(code) { // 判断是否有障碍物
    // ...
  };
};

export default keyMoue;

/*
使用举例：
  useEffect(() => {
    const dom = document.querySelector("#ball"); // 运动物体
    const map = document.querySelector("#map"); // 运动范围
    const obstacle = document.querySelectorAll("#obstacle"); // 障碍物
    // (移动的元素, 定位父级, 速度, [障碍物1, 障碍物2, ...]，碰撞后的回调函数)
    let move = new keyMoue(dom, map, 5, obstacle， callback);
    move.init();
  }, [])
*/