User prompt
in getOverlappingCells the return of empty array happens on the method inside forEach. However it's getOverlappingCells that should return an empty array
User prompt
in getOverlappingCells the if (grid[i][j]) { needs to break booth loops
User prompt
in getOverlappingCells the return of empty array happens on the method inside forEach. However it's getOverlappingCells that should return an empty array
User prompt
empty grid values are not null, just test for any nullable type in getOverlappingCells
Code edit (2 edits merged)
Please save this source code
User prompt
n getOverlappingCells, if an overlapping cell background does not have a corresponding empty grid, make getOverlappingCells return an empty array
Code edit (1 edits merged)
Please save this source code
User prompt
just use !grid[i][j] in the getOverlappingCells check
Code edit (1 edits merged)
Please save this source code
User prompt
in getOverlappingCells, if an overlapping cell background does not have a corresponding empty grid, return an empty array
User prompt
Define Game.prototype.getOverlappingCells using self rather than prototype
User prompt
In Game.prototype.getOverlappingCells just use self
User prompt
Refactor highlightOverlappingCells such that it uses a new method that returns the overlapping cells
User prompt
On stage up call the method that resets background grid
User prompt
Remove attachCellListeners we don’t need it for this game
User prompt
Move the code in highlightOverlappingCells which reset background grid to a separate method
User prompt
Use 0.15 for speed in tile rather that 0.05
User prompt
highlightOverlappingCells Don’t test with the full tile, test with the cells the tile contain
User prompt
Expose the cells that exist inside a tile. In an array, only attach the cells actually attached for type
User prompt
Expose the cells that excise inside a tile
User prompt
Fix Bug: 'TypeError: tileBounds.intersects is not a function. (In 'tileBounds.intersects(bgCellBounds)', 'tileBounds.intersects' is undefined)' in this line: 'if (tileBounds.intersects(bgCellBounds)) {' Line Number: 235
User prompt
When dragging a tile highlight the background cells that the cells inside tile overlaps while dragging
User prompt
In GridBackgroundCell add a method that can set alpha and tint on the bg cell graphics
User prompt
In the tick method in tile simply move the tile smoothly to target y,x
User prompt
Don’t tick the bottom tile that is currently being dragged
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);
tileGraphics.alpha = 0.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;
var cell1 = new Cell();
var cell2 = new Cell();
var cellWidth = cell1.width;
var cellHeight = cell1.height;
cell1.x = self.x;
cell1.y = self.y;
if (self.type === 0) {
cell1.x = self.x - cellWidth / 2;
cell2.x = self.x + cellWidth / 2;
cell2.y = self.y;
} else if (self.type === 1) {
cell1.y = self.y - cellHeight / 2;
cell2.x = self.x;
cell2.y = self.y + cellHeight / 2;
} else if (self.type === 2) {
self.removeChild(cell2);
}
self.addChild(cell1);
self.addChild(cell2);
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 () {
var self = Container.call(this);
var gridWidth = 5;
var gridHeight = 5;
var gridSpacing = 2;
var tempTile = new Tile();
var tileWidth = tempTile.width;
var tileHeight = tempTile.height;
tempTile.destroy();
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);
}
stage.on('move', function (obj) {
if (draggedTile) {
var pos = obj.event.getLocalPosition(self);
draggedTile.x = pos.x;
draggedTile.y = pos.y;
}
});
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();
}
}
for (var i = 0; i < bottomTiles.length; i++) {
if (bottomTiles[i] !== draggedTile) {
bottomTiles[i].tick();
}
}
});
var bottomTiles = [];
var draggedTile = null;
self.addBottomTiles = function () {
var numberOfTiles = 3;
var totalTilesWidth = numberOfTiles * tileWidth + (numberOfTiles - 1) * gridSpacing;
var margin = (2048 - totalTilesWidth) / 2;
var spacing = margin + tileWidth / 2;
var posY = 2732 - tileHeight / 2 - margin;
for (var i = 0; i < numberOfTiles; i++) {
var tile = new Tile();
var posX = spacing + i * (tileWidth + gridSpacing);
tile.move(posX, posY, true);
bottomTiles.push(tile);
tile.on('down', function () {
draggedTile = this;
});
self.addChild(tile);
}
};
stage.on('up', function (obj) {
draggedTile = null;
});
self.addBottomTiles();
});
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.