Makes Tile and GridPosition separate classes instead of anonymous objects.

This commit is contained in:
2024-07-02 12:30:24 -07:00
parent 18e6686e59
commit 4b3934999c

105
main.js
View File

@@ -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"} }`;
}
};