maj/base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: maj:starter/node
Branches Tags
maj:main maj:starter/node maj:starter/jquery maj:starter/react maj:demo/2048
..
compare: maj:b96684f2ea69160a3effb80ea4a117268839e7e7
Branches Tags
maj:starter/node maj:starter/jquery maj:starter/react maj:demo/2048 maj:main

2 Commits
starter/no ... b96684f2ea

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
3 changed files with 309 additions and 87 deletions
Expand all files Collapse all files

87
README.md
View File

@@ -1,87 +0,0 @@
# Project Template
This repository is a starter template.
Replace this README with documentation specific to your project once you begin development.
The notes below apply only if you choose to build a Node.js project using this template.
---
## If your project will use Node.js
Use Node 22 or newer for development.
Check your version:
```
node --version
```
If your version is older than 22, update using nvm:
```
nvm install --lts
```
(Optional) Make the new version your default:
```
nvm alias default <version>
```
After running `yarn init`, you may add a minimum Node version requirement to your `package.json`:
```json
"engines": {
"node": ">=22"
}
```
This helps ensure you do not accidentally use an outdated Node version.
---
## If your project will use Yarn (Berry)
This template assumes modern Yarn (Yarn 4+), managed by Corepack.
Enable Corepack:
```
corepack enable
```
Update Yarn to the latest stable version:
```
corepack prepare yarn@stable --activate
```
Install dependencies:
```
yarn install
```
If you want Yarn to error (instead of warn) when the Node version does not satisfy the `engines` field, add this to `.yarnrc.yml`:
```yaml
enableStrictEngineChecks: true
```
---
## If your project will use containers
If you plan to build or deploy using Docker, choose a base image that matches your development environment.
For Node.js projects, a common choice is:
```
FROM node:24
```
---
## Replace this README
Once you know what your project will be (Node, C++, Python, etc.), replace this file with documentation specific to your build, run, and deployment steps.

40
index.html Normal file
View File

@@ -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>

269
main.js Normal file
View File

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