2048实战

使用propotype设置类方法可以将对象中属性和方法分离

引入 JS 代码，注意因为Grid对象会依赖于Tile对象，因此grid.js在引入的时候需要放置在tile.js文件下面

利用动态class，给新建的Tile节点设置样式

必要的分割 JS 文件是一种良好的编程习惯，相同职责的代码放在一起

键盘监听：

window.addEventListener('keyup', function (e) {
  console.log(e.keyCode);
});
38 => 上
37 => 左
40 => 下
39 => 右

事件回调：

//listener.js
function Listener({ move: moveFn }) {
  window.addEventListener('keyup', function (e) {
    switch (e.keyCode) {
      case 38:
        moveFn('向左');
        break;
      case 37:
        moveFn('向上');
        break;
      case 39:
        moveFn('向下');
        break;
      case 40:
        moveFn('向右');
        break;
    }
  });
}

//manager.js
this.listener = new Listener({
  move: function (direction) {
    console.log(direction);
  },
});
通过传递moveFn到Listener，当Listener触发键盘事件以后，回调Manager

计算机中方向用向量表示

左 => {row: 0, column: -1}
右 => {row: 0, column: 1}
上 => {row: -1, column: 0}
下 => {row: 1, column: 0}

{
  rowPath, columnPath;
}

// 等同于

{
  rowPath: rowPath,
  columnPath: columnPath
}

let self = this;
this.listener = new Listener({
  move: function(direction) {
    self.listenerFn(direction);
  }
});

为什么必须要在前面定义let self = this？

这涉及到JS 作用域，因为回调函数 function(direction) 是由Listener调用的，因此this会指向Listener，并不是Manager。在这种情况下，如果使用this.listenerFn将无法找到listenerFn方法，因此我们需要在方法调用之前（this还未改变之前）将this先保存到self

项目地址：https://codeserver.youkeda.com/kaze8888/f10-7-2-10