base/main.js

const globals = {
    grid: null,
    tiles: [],
};

const btnGo_onClick = () => {
    globals.grid = makeGrid(4, 4, {value: 0, visible: false});
    addRandomTile();
    redraw(globals.grid);
    // drawGrid(globals.grid, document.getElementById('output'));
    // alert("Go");
}

const btnUp_onClick = () => {
    const grid = globals.grid;
    slideUp(grid);
    addRandomTile();
    redraw(grid)
    // alert('Up');
}

const btnDown_onClick = () => {
    const grid = globals.grid;
    slideDown(grid);
    addRandomTile();
    redraw(grid)
    // alert('Down');
}

const btnLeft_onClick = () => {
    const grid = globals.grid;
    slideLeft(grid);
    addRandomTile();
    redraw(grid)
    // alert('Left');
}

const btnRight_onClick = () => {
    const grid = globals.grid;
    slideRight(grid);
    addRandomTile();
    redraw(grid)
    // alert('Right');
}

const drawGrid = (grid, element) => {
    // grid is our grid
    // element is our div
    let text = "<table cellspacing=\"0\">\n";
    for (const row of grid.rows) {
        text += "  <tr>\n";
        for (const tile of row) {
            text += "    <td title=\"(" + tile.originalLocation.row + ", " + tile.originalLocation.column + ")\"class=\"" + (tile.visible ? "visible " : "hidden ") + "\">" + tile.value + "</td>\n";
        }
        text += "  </tr>\n";
    }
    text += "</table>";
    element.innerHTML = text;
}

const makeGrid = (numRows, numColumns, initialValue) => {
    const rows = [];
    for (rowIndex = 0; rowIndex < numRows; rowIndex++) {
        const row = [];
        for (columnIndex = 0; columnIndex < numColumns; columnIndex++) {
            position = {row: rowIndex, column: columnIndex};
            const tile = makeTile(initialValue.value, initialValue.visible, rowIndex, columnIndex);
            globals.tiles.push(tile);
            row.push(tile);
        }
        rows.push(row);
    }
    const grid = {
        rows,
        numRows,
        numColumns,
        getTile: (row, column) => {
            return rows[row][column];
        },
        setTile: (row, column, tile) => {
            rows[row][column] = tile;
        },
        swapTiles: (fromRow, fromColumn, toRow, toColumn) => {
            fromTile = grid.getTile(fromRow, fromColumn);
            toTile = grid.getTile(toRow, toColumn);
            // maybe set previous locations on the tiles
            grid.setTile(fromRow, fromColumn, toTile);
            grid.setTile(toRow, toColumn, fromTile);
        },
    };
    return grid;
}

const makeTile = (value, visible, row, column) => {
    return {
        value,
        visible,
        originalLocation: {
            row,
            column,
        },
        equals: (other) => {
            return this.value == other.value
                && this.visible == other.visible
                && this.originalLocation.row == other.originalLocation.row
                && this.originalLocation.column == other.originalLocation.column;
        }
    };
};

const addRandomTile = () => {
    const hiddenTiles = globals.tiles.filter(tile => !tile.visible);
    if (hiddenTiles.length <=0) return;
    const index = Math.floor(Math.random() * hiddenTiles.length);
    const tile = hiddenTiles[index];
    tile.value = 1;
    tile.visible = true;
}

const redraw = (grid) => {
    const element = document.getElementById('output');
    drawGrid(grid, element);
}

const slideUp = (grid) => {
    for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
        lastIndex = -1;
        for (let rowIndex = 0; rowIndex < grid.numRows; rowIndex++) {
            const tile = grid.getTile(rowIndex, columnIndex);
            if (tile.visible) {
                lastIndex++;
                if (lastIndex != rowIndex) {
                    grid.swapTiles(rowIndex, columnIndex, lastIndex, columnIndex);
                }
            }
        }
    }
}

const slideLeft = (grid) => {
    for (let rowIndex = 0; rowIndex < grid.numRows; rowIndex++) {
        lastIndex = -1;
        for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
            const tile = grid.getTile(rowIndex, columnIndex);
            if (tile.visible) {
                lastIndex++;
                if (lastIndex != columnIndex) {
                    grid.swapTiles(rowIndex, columnIndex, rowIndex, lastIndex);
                }
            }
        }
    }
}

const slideDown = (grid) => {
    for (let columnIndex = 0; columnIndex < grid.numColumns; columnIndex++) {
        lastIndex = grid.numRows;
        for (let rowIndex = grid.numRows - 1; rowIndex >= 0; rowIndex -= 1) {
            const tile = grid.getTile(rowIndex, columnIndex);
            if (tile.visible) {
                lastIndex--;
                if (lastIndex != rowIndex) {
                    grid.swapTiles(rowIndex, columnIndex, lastIndex, columnIndex);
                }
            }
        }
    }
}

const slideRight = (grid) => {
    for (let rowIndex = 0; rowIndex < grid.numRows; rowIndex++) {
        lastIndex = grid.numColumns;
        for (let columnIndex = grid.numColumns - 1; columnIndex >= 0; columnIndex -= 1) {
            const tile = grid.getTile(rowIndex, columnIndex);
            if (tile.visible) {
                lastIndex--;
                if (lastIndex != columnIndex) {
                    grid.swapTiles(rowIndex, columnIndex, rowIndex, lastIndex);
                }
            }
        }
    }
}