测试

/**
 * 黑白棋游戏
 */
var checkerboard = {
  checkerboard: null, // 棋盘对象
  LSpans: {}, // 链表集合对象
  colorType: 0,
  gameType: 0,
  size: 0,
  init: function() {
    this.creatCheckerboard(this.size == 0 ? 8 : 10);
    var that = this;
    this.checkerboard.addEventListener('click', function (evt) {
      that.evt(evt)
    });
  },

  /**
   * 创建棋盘
   * @param {number} num 
   * 棋盘大小 8（8*8） || 10（10*10）
   */
  creatCheckerboard: function(num) {
    this.checkerboard = document.createElement('div');
    this.checkerboard.className = 'container';
    var app = document.querySelector('#app');
    app.innerHTML = '';
    this.LSpans = {};
    app.appendChild(this.checkerboard);
    for (let x = 0; x < num; x++) {
      for (let y = 0; y < num; y++) {
        var className = 'node';
        var node = document.createElement('div');
        var LSpan = this.createLSpan(x, y);
        this.LSpans[x + '-' + y]=LSpan;
        node.appendChild(LSpan);
        this.checkerboard.appendChild(node);
        if (num == 8) {
          className += ' w8';
          if ((x == 3 && y == 3) || (x == 4 && y == 4)) {
            LSpan.className = 'white';
            LSpan.colorType = 1;
          }
          if ((x == 3 && y == 4) || (x == 4 && y == 3)) {
            LSpan.className = 'black';
            LSpan.colorType = 0;
          }
        } else {
          className += ' w10';
          if ((x == 4 && y == 4) || (x == 5 && y == 5)) {
            LSpan.className = 'white';
            LSpan.colorType = 1;
          }
          if ((x == 4 && y == 5) || (x == 5 && y == 4)) {
            LSpan.className = 'black';
            LSpan.colorType = 0;
          }
        }
        node.className = className;
      }
    }
    console.log(this.LSpans);
    for (const key in this.LSpans) { // 链表连接
      if (Object.hasOwnProperty.call(this.LSpans, key)) {
        const ele = this.LSpans[key];
        var x = Number(key.split('-')[0]);
        var y = Number(key.split('-')[1]);
        if (y - 1 > -1) { // 当前数据向左连接链表
          ele.Ml = this.LSpans[x + '-' + (y - 1)];
        }
        if (y + 1 < num) { // 当前数据向右连接链表
          ele.Mr = this.LSpans[x + '-' + (y + 1)];
        }
        if (x - 1 > -1) { // 当前数据向上连接链表
          ele.Mt = this.LSpans[(x - 1) + '-' + y];
        }
        if (x + 1 < num) { // 当前数据向下连接链表
          ele.Mb = this.LSpans[(x + 1) + '-' + y];
        }
        if (x - 1 > -1 && y - 1 > -1) { // 当前数据向左上连接链表
          ele.Mlt = this.LSpans[(x - 1) + '-' + (y - 1)];
        }
        if (x + 1 < num && y - 1 > - 1) { // 当前数据向左下连接链表
          ele.Mlb = this.LSpans[(x + 1) + '-' + (y - 1)];
        }
        if (x - 1 > -1 && y + 1 < num) { // 当前数据向右上连接链表
          ele.Mrt = this.LSpans[(x - 1) + '-' + (y + 1)];
        }
        if (x + 1 < num && y + 1 < num) { // 当前数据向右下连接链表
          ele.Mrb = this.LSpans[(x + 1) + '-' + (y + 1)];
        }
      }
    }
  },

  createLSpan: function (x, y) {
    var LSpan = document.createElement('span');
    LSpan.Ml = null;
    LSpan.Mr = null;
    LSpan.Mt = null;
    LSpan.Mb = null;
    LSpan.Mlt = null;
    LSpan.Mlb = null;
    LSpan.Mrt = null;
    LSpan.Mrb = null;
    LSpan.colorType = null;
    LSpan.x = x;
    LSpan.y = y;
    return LSpan;
  },

  evt: function (event) {
    var evt = this.LSpans[event.target.x + '-' + event.target.y];
    if (evt) {
      var className = this.canFallingSeed(evt)
      if (className) {
        this.reSetClassName(evt);
        evt.className = className;
        evt.colorType = this.colorType;
        if (this.gameType == 0) {
          this.colorType = this.colorType === 0 ? 1 : 0;
        }
      }
    }
  },
  reSetClassName: function (evt) {
    this.inspectAllData(evt, true);
  },
  flip: function (obj, key) {
    if (obj.colorType == this.colorType) {
      return;
    }
    obj.colorType = this.colorType;
    obj.className = this.colorType == 0 ? 'black' : 'white';
    if (obj[key]) {
      this.flip(obj[key], key);
    }
  },
  inspectData: function(obj, key, arr) {
    if (obj[key]) {
      arr.push(obj[key].colorType);
      this.inspectData(obj[key], key, arr);
    }
  },
  inspectAllData: function(obj, isFlip) {
    var keyList = ['Ml', 'Mr', 'Mt', 'Mb', 'Mlt', 'Mlb', 'Mrt', 'Mrb'];
    var res = [];
    for (let index = 0; index < keyList.length; index++) {
      const key = keyList[index];
      let arr = [];
      this.inspectData(obj, key, arr);
      if (arr.indexOf(this.colorType) > 0 && arr.indexOf(null) > arr.indexOf(this.colorType)) {
        res.push(true);
        this.flip(obj[key], key);
      } else {
        res.push(false);
      }
    }
    return res.indexOf(true) === -1;
  },
  /**
   * 判断是否能够落子
   * @param {object} event 
   * @returns className 落子棋子颜色
   */
  canFallingSeed: function(event) {
    var className = null;
    if (event.className) {
      return false;
    }

    if (this.inspectAllData(event)) {
      return false;
    }
    
    if (this.colorType == 0) {
      className = 'black';
    } else {
      className = 'white';
    }
    return className;
  }
}