Adds check to make sure we do not add a new tile if you ca not slide.

Adds working sliding.
2024-07-29 22:35:52 -07:00 · 2024-07-29 22:32:58 -07:00
2 changed files with 309 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <title>Grid Demo</title>
+  <meta name="viewport" content="width=device-width">
+  <meta charset="utf-8">
+  <style type="text/css">
+table {
+  border: 1px solid black;
+}
+tr {
+  border: 1px solid black;
+}
+td {
+  border: 1px solid black;
+}
+td.hidden {
+  background-color: #f88;
+}
+td.visible {
+  background-color: #8f8;
+}
+  </style>
+</head>
+<body>
+  <fieldset>
+  <legend title="asdf">Grid</legend>
+    <div id="output"></div>
+  </fieldset>
+
+  <section>
+  <button id="btnLeft" onclick="btnLeft_onClick()">Left</button>
+  <button id="btnUp" onclick="btnUp_onClick()">Up</button>
+  <button id="btnDown" onclick="btnDown_onClick()">Down</button>
+  <button id="btnRight" onclick="btnRight_onClick()">Right</button>
+  </section>
+  <button onclick="btnGo_onClick();" id="btnGo">Go</button>
+  <script src="main.js"></script>
+</body>
+</html>
--- a/main.js
+++ b/main.js
@@ -0,0 +1,269 @@
+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;
+    if (canSlideUp(grid)) {
+        slideUp(grid);
+        addRandomTile();
+        redraw(grid)
+    } else {
+        alert('Unable to slide Up.');
+    }
+    // alert('Up');
+}
+
+const btnDown_onClick = () => {
+    const grid = globals.grid;
+    if (canSlideDown(grid)) {
+        slideDown(grid);
+        addRandomTile();
+        redraw(grid)
+    } else {
+        alert('Unable to slide Down.');
+    }
+    // alert('Down');
+}
+
+const btnLeft_onClick = () => {
+    const grid = globals.grid;
+    if (canSlideLeft(grid)) {
+        slideLeft(grid);
+        addRandomTile();
+        redraw(grid)
+    } else {
+        alert('Unable to slide Left.');
+    }
+    // alert('Left');
+}
+
+const btnRight_onClick = () => {
+    const grid = globals.grid;
+    if (canSlideRight(grid)) {
+        slideRight(grid);
+        addRandomTile();
+        redraw(grid)
+    } else {
+        alert('Unable to slide Right.');
+    }
+    // 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);
+                }
+            }
+        }
+    }
+}
+
+const canSlideUp = (grid) => {
+    canIDoIt = false;
+    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) {
+                    canIDoIt = true;
+                }
+            }
+        }
+    }
+    return canIDoIt;
+}
+
+const canSlideLeft = (grid) => {
+    let canIDoIt = false;
+    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) {
+                    canIDoIt = true;
+                }
+            }
+        }
+    }
+    return canIDoIt;
+}
+
+const canSlideDown = (grid) => {
+    let canIDoIt = false;
+    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) {
+                    canIDoIt = true;
+                }
+            }
+        }
+    }
+    return canIDoIt;
+
+}
+
+const canSlideRight = (grid) => {
+    let canIDoIt = false;
+    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) {
+                    canIDoIt = true;
+                }
+            }
+        }
+    }
+    return canIDoIt;
+}
+
Author	SHA1	Message	Date
Tom Hicks	b96684f2ea	Adds check to make sure we do not add a new tile if you ca not slide.	2024-07-29 22:35:52 -07:00
Tom Hicks	3294002c80	Adds working sliding.	2024-07-29 22:32:58 -07:00