如何在 console.log() 上的表格显示上获得价值？

Question

我使用 OOP javascript 创建演示游戏井字游戏。但是我在获取具有附加值的表的值时遇到问题，然后在console.log();中显示表

这是我的代码：

 /**
 * @constructor
 * @param {Number} width - dimension width for table
 * @param {Number} height - dimension height for table
 */


function Table(width, height) {
  this.table = new Array(height * width);
  this.width = width;
  this.height = height;
}

Table.prototype = {
  /**
   * Representation for get width of table
   */
  getWidth: function () {
    return this.width;
  },

  /**
   * Representation for get height of table
   */
  getHeight: function () {
    return this.height;
  },

  /**
   * Representation for get table array 2d
   */
  getTable: function () {
    var x = new Array(this.getHeight());
    for (var i = 0; i < this.getHeight(); i++) {
      x[i] = new Array(this.getWidth());
    };
  },

  /**
   * Representation for set position of table
   */
  setPosition: function (x, y, ch) {
    return this.table[x][y] = ch;
  },

---

我这里有问题。我无法在餐桌上获得价值并检查 isEmpty。

  /**
   * Representation for get value detail at cell of table
   */
  getValueAt: function (x, y) {
    return this.table[x][y];
  },

  /**
   * Representation for check empty conditional
   */
  isEmptyAt: function (x, y) {
    if (!this.table[x][y])
      return true;
  },
};

/**
 * @constructor
 * @param {String} character - X or O
 */
function Player(name, ch) {
  this.name = name;
  this.ch = ch;
}

var Printer = function () {
};

---

这是 console.log() 中的函数打印显示。

Printer.prototype = {
  /**
   * Representation print table
   */
  printTable: function (table) {
    var str = '';
    for (var i = 0; i < table.width; i++) {
      var x = i;
      for (var j = 0; j < table.height; j++) {
        var y = j;
        str += '' + table.getValueAt(x, y) +  '|';
      }

      str += '\n------------\n';
    }

    console.log(str);
  },

  /**
   * Representation check winner conditional
   */
  printWinner: function (player) {

  },
};
Math.floor(Math.random() * 2);

/**
 * @param newTable [array] : The array two-direction table
 * @param player [object] : the object contain player X and O
 */
var GamePlay = function (table, playerOne, playerTwo) {
  this.table = table;
  this.playerOne = playerOne;
  this.playerTwo = playerTwo;
  this.printer = new Printer();
};

GamePlay.prototype = {

  run: function (x, y) {
    console.log('Game start ...!');
    x = Math.floor(Math.random() * 2);
    y = Math.floor(Math.random() * 2);

    this.putChessman(x, y, this.playerOne.ch);
    console.log('put', this.putChessman());
    this.printer.printTable(this.table);
  },

  /**
   * @param player [keywork] : the keywork X and O
   */
  checkWin: function (player) {

  },

  putChessman: function (x, y, ch) {
    console.log('isEmptyAt', table.isEmptyAt(x, y));
    if (this.table.isEmptyAt(x, y) === true) {
      console.log('@ player ' + ch + ' put');
      this.table.setPosition(x, y, ch);
    } else {
      console.log('@ Other player already put on it');
    }
  },

};

var table = new Table(3, 3);
var playerOne = new Player('playerOne', 'O');
var playerTwo = new Player('playerTwo', 'X');
var game = new GamePlay(table, playerOne, playerTwo);
game.run();

请帮我解决问题-.-

Answer 1

您没有正确初始化table。你正在这样做：

this.table = new Array(height * width);

...但后来尝试像这样使用它：

this.table[x][y];

要这样使用它，您不仅需要一个数组，还需要一个数组数组（JavaScript 相当于二维数组）。要初始化数组数组，请执行以下操作：

this.table = [];
for (var x = 0; x < width; ++x) {
    this.table[x] = new Array(y);
}

请注意，子数组中的条目（例如，this.table[0][0]）将是 undefined*。如果这就是您想要的（它可以与isEmptyAt 一起使用），那很好。如果您希望它们具有不同的值，则需要填写：

this.table = [];
for (var x = 0; x < width; ++x) {
    this.table[x] = [];
    for (var y = 0; y < height; ++y) {
        this.table[x][y] = theValueGoesHere;
    }
}

---

另外：调用isEmptyAt将导致true或undefined，因为isEmptyAt只在返回true时返回一个值；在另一种情况下，它不返回任何内容，调用它的结果是值undefined。相反，我会让它在两种情况下都明确返回一些东西：

isEmptyAt: function(x, y) {
    return !this.table[x][y];
}

---

* 从技术上讲，使用new Array(height)，条目将不存在根本；尽管该数组具有height 的length，但在添加它们之前它根本没有任何条目。但是当你尝试检索一个条目时，你会得到值undefined，所以为了简单起见，我稍微捏造了一点解释。