User prompt
Add 3 tiles to the bottom of the game, equally spaced but centered
User prompt
Add a new tile class
User prompt
Decrease grid space to 2
User prompt
Set cell background alpha to .5
User prompt
Don’t set alpha on background grid tile
User prompt
Fix Bug: 'TypeError: bgCell.move is not a function. (In 'bgCell.move(targetPos.x, targetPos.y, true)', 'bgCell.move' is undefined)' in this line: 'bgCell.move(targetPos.x, targetPos.y, true);' Line Number: 139
User prompt
Add background grid elements to the game, one for each grid position
User prompt
Only add two cells at random positions when the game initializes
User prompt
Only add two cells at random positions when the game initializes
User prompt
Remove the code in down
User prompt
In down remove the two calls to moveToEmptySpace
User prompt
Move up grid by 200pg
User prompt
Make grid 5x5
Initial prompt
Copy Grid Template
function hsvToRgb(h, s, v) { var i = Math.floor(h * 6), f = h * 6 - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s), mod = i % 6, r = [v, q, p, p, t, v][mod], g = [t, v, v, q, p, p][mod], b = [p, p, t, v, v, q][mod]; return (r * 255 << 16) + (g * 255 << 8) + b * 255; } var Tile = Container.expand(function (type) { var self = Container.call(this); var tileGraphics = self.createAsset('tile', 'Grid Tile', .5, .5); self.targetX = 0; self.targetY = 0; self.isMoving = false; self.totalTypes = 3; self.type = type || Math.floor(Math.random() * self.totalTypes); var hue = self.type / self.totalTypes; var color = hsvToRgb(hue, 0.5, 1); tileGraphics.tint = color; self.move = function (x, y, instant) { self.targetX = x; self.targetY = y; if (instant) { self.x = x; self.y = y; } }; self.tick = function () { var acceleration = 0.5; self.speedX = self.speedX || 0; self.speedY = self.speedY || 0; var threshold = 1; var dx = self.targetX - self.x; var dy = self.targetY - self.y; if (Math.abs(dx) < threshold && Math.abs(dy) < threshold) { self.x = self.targetX; self.y = self.targetY; self.isMoving = false; self.speedX = 0; self.speedY = 0; } else { if (dx !== 0) { self.speedX += dx > 0 ? acceleration : -acceleration; } if (dy !== 0) { self.speedY += dy > 0 ? acceleration : -acceleration; } var nextX = self.x + self.speedX; var nextY = self.y + self.speedY; if (self.speedX > 0 && nextX > self.targetX || self.speedX < 0 && nextX < self.targetX) { nextX = self.targetX; self.speedX = 0; } if (self.speedY > 0 && nextY > self.targetY || self.speedY < 0 && nextY < self.targetY) { nextY = self.targetY; self.speedY = 0; } self.x = nextX; self.y = nextY; self.isMoving = self.x !== self.targetX || self.y !== self.targetY; } }; }); var GridBackgroundCell = Container.expand(function () { var self = Container.call(this); var bgCellGraphics = self.createAsset('gridCell', 'Background Grid Cell', 0.5, 0.5); bgCellGraphics.alpha = 0.5; }); var Cell = Container.expand(function (type) { var self = Container.call(this); var cellGraphics = self.createAsset('cell', 'Grid Cell', .5, .5); self.targetX = 0; self.targetY = 0; self.isMoving = false; self.totalTypes = 5; self.type = type || Math.floor(Math.random() * self.totalTypes); var hue = self.type / self.totalTypes; var color = hsvToRgb(hue, 1, 1); cellGraphics.tint = color; self.move = function (x, y, instant) { self.targetX = x; self.targetY = y; if (instant) { self.x = x; self.y = y; } }; self.tick = function () { var acceleration = 1; self.speedX = self.speedX || 0; self.speedY = self.speedY || 0; var threshold = 1; var dx = self.targetX - self.x; var dy = self.targetY - self.y; if (Math.abs(dx) < threshold && Math.abs(dy) < threshold) { self.x = self.targetX; self.y = self.targetY; self.isMoving = false; self.speedX = 0; self.speedY = 0; } else { if (dx !== 0) { self.speedX += dx > 0 ? acceleration : -acceleration; } if (dy !== 0) { self.speedY += dy > 0 ? acceleration : -acceleration; } var nextX = self.x + self.speedX; var nextY = self.y + self.speedY; if (self.speedX > 0 && nextX > self.targetX || self.speedX < 0 && nextX < self.targetX) { nextX = self.targetX; self.speedX = 0; } if (self.speedY > 0 && nextY > self.targetY || self.speedY < 0 && nextY < self.targetY) { nextY = self.targetY; self.speedY = 0; } self.x = nextX; self.y = nextY; self.isMoving = self.x !== self.targetX || self.y !== self.targetY; } }; }); var Game = Container.expand(function () { self.addBottomTiles = function () { var bottomTiles = []; var numberOfTiles = 3; var spacing = (2048 - (numberOfTiles * cellWidth + (numberOfTiles - 1) * gridSpacing)) / 2; for (var i = 0; i < numberOfTiles; i++) { var tile = new Tile(); var posX = spacing + i * (cellWidth + gridSpacing); var posY = 2732 - cellHeight / 2 - 100; tile.move(posX, posY, true); bottomTiles.push(tile); self.addChild(tile); } }; var self = Container.call(this); var gridWidth = 5; var gridHeight = 5; var gridSpacing = 2; var tempCell = new Cell(); var cellWidth = tempCell.width; var cellHeight = tempCell.height; tempCell.destroy(); var gridContainer = new Container(); self.addChild(gridContainer); var totalGridWidth = gridWidth * (cellWidth + gridSpacing) - gridSpacing; var totalGridHeight = gridHeight * (cellHeight + gridSpacing) - gridSpacing; gridContainer.x = (2048 - totalGridWidth) / 2 + cellWidth / 2; gridContainer.y = (2732 - totalGridHeight) / 2 + cellHeight / 2 - 200; self.calculateTargetPosition = function (col, row) { return { x: col * (cellWidth + gridSpacing), y: row * (cellHeight + gridSpacing) }; }; self.findConnectedNeighbors = function (cell, connectedNeighbors) { connectedNeighbors = connectedNeighbors || []; if (!cell) return []; var cellType = cell.type; var cellColRow = self.findCellColRow(cell); if (cellColRow) { var directions = [[-1, 0], [1, 0], [0, -1], [0, 1]]; directions.forEach(function (dir) { var newRow = cellColRow.row + dir[0]; var newCol = cellColRow.col + dir[1]; if (newRow >= 0 && newRow < gridHeight && newCol >= 0 && newCol < gridWidth) { var neighborCell = grid[newCol][newRow]; if (neighborCell && neighborCell.type === cellType && connectedNeighbors.indexOf(neighborCell) === -1) { connectedNeighbors.push(neighborCell); self.findConnectedNeighbors(neighborCell, connectedNeighbors); } } }); } return connectedNeighbors; }; self.findCellColRow = function (cell) { for (var col = 0; col < gridWidth; col++) { for (var row = 0; row < gridHeight; row++) { if (grid[col][row] === cell) { return { col: col, row: row }; } } } return null; }; self.deleteCell = function (cell) { var colRow = self.findCellColRow(cell); if (colRow) { grid[colRow.col][colRow.row] = null; cell.destroy(); } }; self.attachCellListeners = function (cell) { cell.on('up', function (obj) {}); cell.on('move', function (obj) {}); }; var grid = []; var bgGrid = []; for (var i = 0; i < gridWidth; i++) { grid[i] = []; bgGrid[i] = []; for (var j = 0; j < gridHeight; j++) { var bgCell = new GridBackgroundCell(); var targetPos = self.calculateTargetPosition(i, j); bgCell.x = targetPos.x; bgCell.y = targetPos.y; bgGrid[i][j] = bgCell; gridContainer.addChild(bgCell); } } for (var k = 0; k < 2; k++) { var randomCol = Math.floor(Math.random() * gridWidth); var randomRow = Math.floor(Math.random() * gridHeight); while (grid[randomCol][randomRow]) { randomCol = Math.floor(Math.random() * gridWidth); randomRow = Math.floor(Math.random() * gridHeight); } var cell = new Cell(); var targetPos = self.calculateTargetPosition(randomCol, randomRow); cell.move(targetPos.x, targetPos.y, true); self.attachCellListeners(cell); grid[randomCol][randomRow] = cell; gridContainer.addChild(cell); } self.moveToEmptySpace = function (direction, rowMode) { var moved; do { moved = false; var dx = direction === 'left' ? 1 : direction === 'right' ? -1 : 0; var dy = direction === 'up' ? 1 : direction === 'down' ? -1 : 0; for (var col = 0; col < gridWidth; col++) { for (var row = 0; row < gridHeight; row++) { if (!grid[col][row]) { var isRowOrColumnEmpty = true; if (rowMode) { for (var checkIndex = 0; checkIndex < (direction === 'left' || direction === 'right' ? gridHeight : gridWidth); checkIndex++) { isRowOrColumnEmpty = isRowOrColumnEmpty && !grid[direction === 'left' || direction === 'right' ? col : checkIndex][direction === 'up' || direction === 'down' ? row : checkIndex]; } } if (isRowOrColumnEmpty) { if (rowMode) { for (var checkIndex = 0; checkIndex < (direction === 'left' || direction === 'right' ? gridHeight : gridWidth); checkIndex++) { var targetCol = direction === 'left' || direction === 'right' ? col : checkIndex; var targetRow = direction === 'up' || direction === 'down' ? row : checkIndex; if (targetCol + dx >= 0 && targetCol + dx < gridWidth && targetRow + dy >= 0 && targetRow + dy < gridHeight && grid[targetCol + dx][targetRow + dy]) { var targetCell = grid[targetCol + dx][targetRow + dy]; var targetPos = self.calculateTargetPosition(targetCol, targetRow); targetCell.move(targetPos.x, targetPos.y); grid[targetCol][targetRow] = targetCell; grid[targetCol + dx][targetRow + dy] = null; moved = true; } } } else { var targetCol = col + dx; var targetRow = row + dy; if (targetCol >= 0 && targetCol < gridWidth && targetRow >= 0 && targetRow < gridHeight && grid[targetCol][targetRow]) { var targetCell = grid[targetCol][targetRow]; var targetPos = self.calculateTargetPosition(col, row); targetCell.move(targetPos.x, targetPos.y); grid[col][row] = targetCell; grid[targetCol][targetRow] = null; moved = true; } } } } } } } while (moved); }; self.addBottomTiles(); LK.on('tick', function () { for (var i = 0; i < gridWidth; i++) { for (var j = 0; j < gridHeight; j++) { if (grid[i][j]) grid[i][j].tick(); } } }); });
===================================================================
--- original.js
+++ change.js
@@ -117,8 +117,21 @@
}
};
});
var Game = Container.expand(function () {
+ self.addBottomTiles = function () {
+ var bottomTiles = [];
+ var numberOfTiles = 3;
+ var spacing = (2048 - (numberOfTiles * cellWidth + (numberOfTiles - 1) * gridSpacing)) / 2;
+ for (var i = 0; i < numberOfTiles; i++) {
+ var tile = new Tile();
+ var posX = spacing + i * (cellWidth + gridSpacing);
+ var posY = 2732 - cellHeight / 2 - 100;
+ tile.move(posX, posY, true);
+ bottomTiles.push(tile);
+ self.addChild(tile);
+ }
+ };
var self = Container.call(this);
var gridWidth = 5;
var gridHeight = 5;
var gridSpacing = 2;
@@ -257,8 +270,9 @@
}
}
} while (moved);
};
+ self.addBottomTiles();
LK.on('tick', function () {
for (var i = 0; i < gridWidth; i++) {
for (var j = 0; j < gridHeight; j++) {
if (grid[i][j]) grid[i][j].tick();
Simple White square round corners. Vector. No details. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
Hour hand. Vector. Simple Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
Simple Awesome background for clock chain reaction game. Vector high contrast.