Makes Tile and GridPosition separate classes instead of anonymous objects.
This commit is contained in:
105
main.js
105
main.js
@@ -11,7 +11,7 @@ const globals = {
|
||||
};
|
||||
|
||||
const btnStart_onClick = () => {
|
||||
globals.grid = makeGrid(4, 4, {value: 0, visible: false});
|
||||
globals.grid = makeGrid(4, 4, {value: 0, isVisible: false});
|
||||
addRandomTile();
|
||||
// globals.grid = makeDevGrid([ // can't slide down or left
|
||||
// [2,1,3,4],
|
||||
@@ -31,7 +31,7 @@ const getSettingsForDirection = (direction) => {
|
||||
merge: (from, to) => {
|
||||
to.value++;
|
||||
from.value = 0;
|
||||
from.visible = false;
|
||||
from.isVisible = false;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -140,7 +140,7 @@ const drawGrid = (grid, element) => {
|
||||
text += " <tr>\n";
|
||||
for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
|
||||
const tile = grid.getTile(rowIndex, columnIndex);
|
||||
text += " <td title=\"(" + tile.originalLocation.row + ", " + tile.originalLocation.column + ")\"class=\"" + (tile.visible ? "visible " : "hidden ") + "\">" + tile.value + "</td>\n";
|
||||
text += " <td title=\"(" + tile.originalPosition.row + ", " + tile.originalPosition.column + ")\"class=\"" + (tile.isVisible ? "visible " : "hidden ") + "\">" + tile.value + "</td>\n";
|
||||
}
|
||||
text += " </tr>\n";
|
||||
}
|
||||
@@ -155,30 +155,27 @@ const makeGrid = (numRows, numColumns, initialValue) => {
|
||||
const row = [];
|
||||
for (columnIndex = 0; columnIndex < numColumns; columnIndex++) {
|
||||
position = {row: rowIndex, column: columnIndex};
|
||||
const tile = makeTile(initialValue.value, initialValue.visible, rowIndex, columnIndex);
|
||||
const tile = new Tile(initialValue.value, initialValue.isVisible, new GridPosition(rowIndex, columnIndex));
|
||||
tiles.push(tile);
|
||||
row.push(tile);
|
||||
}
|
||||
rows.push(row);
|
||||
}
|
||||
const getTile = (grid, row, column) => {
|
||||
return grid.getTile(row, column);
|
||||
}
|
||||
const grid = {
|
||||
rows,
|
||||
numRows,
|
||||
numColumns,
|
||||
tiles,
|
||||
clone: () => {
|
||||
const newGrid = makeGrid(numRows, numColumns, makeTile(0, false, 0, 0));
|
||||
const newGrid = makeGrid(numRows, numColumns, new Tile(0, false, new GridPosition(0, 0)));
|
||||
for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
|
||||
for (let columnIndex = 0; columnIndex < numColumns; columnIndex++) {
|
||||
const newTile = newGrid.getTile(rowIndex, columnIndex);
|
||||
const oldTile = grid.getTile(rowIndex, columnIndex);
|
||||
newTile.originalLocation.column = oldTile.originalLocation.column;
|
||||
newTile.originalLocation.row = oldTile.originalLocation.row;
|
||||
newTile.originalPosition.column = oldTile.originalPosition.column;
|
||||
newTile.originalPosition.row = oldTile.originalPosition.row;
|
||||
newTile.value = oldTile.value;
|
||||
newTile.visible = oldTile.visible;
|
||||
newTile.isVisible = oldTile.isVisible;
|
||||
}
|
||||
}
|
||||
return newGrid;
|
||||
@@ -231,34 +228,13 @@ const makeGrid = (numRows, numColumns, initialValue) => {
|
||||
return grid;
|
||||
}
|
||||
|
||||
const makeTile = (value, visible, row, column) => {
|
||||
const tile = {
|
||||
value,
|
||||
visible,
|
||||
originalLocation: {
|
||||
row,
|
||||
column,
|
||||
},
|
||||
equals: (other) => {
|
||||
return tile.value == other.value
|
||||
&& tile.visible == other.visible
|
||||
&& tile.originalLocation.row == other.originalLocation.row
|
||||
&& tile.originalLocation.column == other.originalLocation.column;
|
||||
},
|
||||
toString: (format = i => `{ value: ${i.value}, originalLocation: { row: ${i.originalLocation.row}, column: ${i.originalLocation.column} }, visible: ${i.visible ? "true" : "false"} }`) => {
|
||||
return format(tile);
|
||||
}
|
||||
};
|
||||
return tile;
|
||||
};
|
||||
|
||||
const addRandomTile = () => {
|
||||
const hiddenTiles = globals.grid.tiles.filter(tile => !tile.visible);
|
||||
const hiddenTiles = globals.grid.tiles.filter(tile => !tile.isVisible);
|
||||
if (hiddenTiles.length <=0) return;
|
||||
const index = Math.floor(Math.random() * hiddenTiles.length);
|
||||
const tile = hiddenTiles[index];
|
||||
tile.value = 1;
|
||||
tile.visible = true;
|
||||
tile.isVisible = true;
|
||||
}
|
||||
|
||||
const redraw = (grid) => {
|
||||
@@ -284,8 +260,8 @@ const slide = (fromIndex, toIndex, vector, advance, swap, merge, testForDone) =>
|
||||
hasMergedPrevious = false;
|
||||
continue;
|
||||
}
|
||||
if (!toTile.visible) {
|
||||
if (fromTile.visible) {
|
||||
if (!toTile.isVisible) {
|
||||
if (fromTile.isVisible) {
|
||||
swap(fromIndex, toIndex);
|
||||
// Advance fromIndex
|
||||
fromIndex = advance(fromIndex);
|
||||
@@ -296,7 +272,7 @@ const slide = (fromIndex, toIndex, vector, advance, swap, merge, testForDone) =>
|
||||
fromIndex = advance(fromIndex);
|
||||
}
|
||||
} else {
|
||||
if (fromTile.visible) {
|
||||
if (fromTile.isVisible) {
|
||||
if (fromTile.value == toTile.value) {
|
||||
if (hasMergedPrevious) {
|
||||
// Advance toIndex
|
||||
@@ -345,7 +321,7 @@ const checkForEnd = (grid) => {
|
||||
const makeDevGrid = (matrix) => {
|
||||
const numRows = matrix.length;
|
||||
const numColumns = matrix[0].length;
|
||||
const initialValue = makeTile(0, false, 0, 0);
|
||||
const initialValue = new Tile(0, false, new GridPosition(0, 0));
|
||||
const grid = makeGrid(numRows, numColumns, initialValue);
|
||||
for (let rowIndex = 0; rowIndex < numRows; rowIndex++) {
|
||||
const row = matrix[rowIndex];
|
||||
@@ -353,7 +329,7 @@ const makeDevGrid = (matrix) => {
|
||||
const value = row[colIndex];
|
||||
const tile = grid.getTile(rowIndex, colIndex);
|
||||
tile.value = value;
|
||||
tile.visible = value > 0;
|
||||
tile.isVisible = value > 0;
|
||||
}
|
||||
}
|
||||
return grid;
|
||||
@@ -377,3 +353,54 @@ up()
|
||||
[3,2,0,0], either the 3 doesn't go up or the 1 bounces it back?
|
||||
// fixed
|
||||
*/
|
||||
|
||||
class GameBoard {
|
||||
|
||||
};
|
||||
|
||||
class Grid {
|
||||
|
||||
};
|
||||
|
||||
class GridPosition {
|
||||
#row_;
|
||||
#column_;
|
||||
constructor (row, column) {
|
||||
this.#row_ = row || 0;
|
||||
this.#column_ = column || 0;
|
||||
}
|
||||
get row() { return this.#row_; }
|
||||
get column() { return this.#column_; }
|
||||
equals (other) {
|
||||
return other !== null && other !== undefined
|
||||
&& this.#row_ === other.#row_
|
||||
&& this.#column_ === other.#column_;
|
||||
}
|
||||
toString() {
|
||||
return `{ row: ${this.#row_}, column: ${this.#column_} }`;
|
||||
}
|
||||
}
|
||||
|
||||
class Tile {
|
||||
#originalPosition_;
|
||||
value;
|
||||
isVisible;
|
||||
get originalPosition() {
|
||||
return {...this.#originalPosition_};
|
||||
}
|
||||
constructor (value, isVisible, originalPosition) {
|
||||
this.value = value;
|
||||
this.isVisible = isVisible;
|
||||
this.originalPosition_ = {...originalPosition};
|
||||
}
|
||||
equals (other) {
|
||||
return other !== null && other !== undefined
|
||||
&& this.value === other.value
|
||||
&& this.isVisible === other.isVisible
|
||||
&& this.#originalPosition_.row === other.#originalPosition_.row
|
||||
&& this.#originalPosition_.column === other.#originalPosition_.column;
|
||||
}
|
||||
toString() {
|
||||
return `{ value: ${this.value}, originalPosition: { row: ${this.#originalPosition_.row}, column: ${this.#originalPosition_.column} }, isVisible: ${this.isVisible ? "true" : "false"} }`;
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user