How do I get the value in the display of the table on consolelog ()?
I am creating a Tic Tac Toe demo with OOP javascript. But I have a problem getting a value in a table that has an attached value and then displaying the table inconsole.log();
This is my code:
/**
* @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;
},
I have a problem with this. I cant get the value at the table and check 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 () {
};
This is a display of the function in the console.log () console.
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();
Please help me to solve the problem -.-
source to share
You are not initializing table
correctly. You do it:
this.table = new Array(height * width);
... but then tries to use it like this:
this.table[x][y];
To use it like this, you need not only an array, but an array of arrays (the JavaScript equivalent of a two-dimensional array). To initialize an array of arrays, you do this:
this.table = [];
for (var x = 0; x < width; ++x) {
this.table[x] = new Array(y);
}
Note that entries in submatrices (for example this.table[0][0]
) will be undefined
*. If this is what you want (this will work with isEmptyAt
), that's fine. If you want them to have a different meaning, you have to fill this in:
this.table = [];
for (var x = 0; x < width; ++x) {
this.table[x] = [];
for (var y = 0; y < height; ++y) {
this.table[x][y] = theValueGoesHere;
}
}
Separately: The call isEmptyAt
will either cast to true
or to undefined
, because it isEmptyAt
only returns a value when it returns true
; otherwise, it returns nothing, and the result of calling it is a value undefined
. Instead, I would explicitly return something in both cases:
isEmptyAt: function(x, y) {
return !this.table[x][y];
}
* Technically, since new Array(height)
, there will be no records at all; despite the array having length
of height
, it has no entries at all until you add them. But when you try to get the entry, you get the value undefined
, so I've simplified the explanation a bit for simplicity.
source to share