Code edit (3 edits merged)
Please save this source code
User prompt
For each block type in Block use a separate asset for createAsset rather than just 'block'
Code edit (1 edits merged)
Please save this source code
User prompt
In block, do not set tint where you currently do block.tint
User prompt
in cell do not set filled.tint
User prompt
Cache tint value on Cell using a self variable.
Remix started
Copy Block Puzzle
var Particle = Container.expand(function (tint) {
var self = Container.call(this);
self.tint = tint;
var particleGraphics = self.createAsset('particle', 'Particle Graphics', 0.5, 0.5);
particleGraphics.rotation = Math.random() * Math.PI * 2;
particleGraphics.tint = self.tint;
self.vx = Math.random() * 4 - 2;
self.vy = Math.random() * 4 - 2;
self.alpha = 1;
self.lifetime = 60;
self.tick = function () {
self.x += self.vx;
self.y += self.vy;
self.alpha -= 1 / self.lifetime;
if (self.alpha <= 0) self.destroy();
};
});
var Cell = Container.expand(function () {
var self = Container.call(this);
self.filled = false;
var empty = self.createAsset('cell', 'Filled with a cell (empty)', .5, .5);
empty.alpa = .8;
var filled = self.createAsset('block', 'Filled with a block', .5, .5);
empty.y = 2;
self.setFill = function (isFilled) {
self.filled = isFilled;
empty.visible = !self.filled;
filled.visible = self.filled;
};
self.getTint = function () {
return filled.tint;
};
self.setTint = function (tint) {
empty.tint = filled.tint = tint;
};
self.setFill(false);
});
var Block = Container.expand(function (board) {
var self = Container.call(this);
var hsvToRgb = function (h, s, v) {
var r, g, b;
var i = Math.floor(h * 6);
var f = h * 6 - i;
var p = v * (1 - s);
var q = v * (1 - f * s);
var t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0:
(r = v, g = t, b = p);
break;
case 1:
(r = q, g = v, b = p);
break;
case 2:
(r = p, g = v, b = t);
break;
case 3:
(r = p, g = q, b = v);
break;
case 4:
(r = t, g = p, b = v);
break;
case 5:
(r = v, g = p, b = q);
break;
}
return (Math.round(r * 255) << 16) + (Math.round(g * 255) << 8) + Math.round(b * 255);
};
var ShapeTypes = {
SINGLE: [[1]],
TRI: [[1, 1, 1]],
QUAD: [[1, 1, 1, 1]],
LSHAPE: [[1, 0, 0], [1, 0, 0], [1, 1, 1]],
BLOCK: [[1, 1], [1, 1]],
SMALLLSHAPE: [[1, 0], [1, 1]]
};
var shapes = Object.values(ShapeTypes);
var offset = Math.floor(Math.random() * shapes.length);
self.shape = shapes[offset];
var hue = offset % shapes.length / shapes.length;
self.color = hsvToRgb(hue, 0.6, 1);
self.rotateShapeRandomly = function () {
var rotations = Math.floor(Math.random() * 4);
for (var r = 0; r < rotations; r++) {
self.shape = self.shape[0].map((val, index) => self.shape.map(row => row[index]).reverse());
}
};
self.rotateShapeRandomly();
self.blocks = [];
var background = self.createAsset('background', 'Background Graphics', .5, .5);
background.alpha = 0;
var blockSize = 160;
background.width = 4 * blockSize;
background.height = 4 * blockSize;
self.addChild(background);
self.offsetX = 0;
self.offsetY = 0;
var blockOffsetX = (background.width / 2 - self.shape[0].length * blockSize) / 2 - blockSize / 2;
var blockOffsetY = (background.height / 2 - self.shape.length * blockSize) / 2 - blockSize / 2;
for (var i = 0; i < self.shape.length; i++) {
for (var j = 0; j < self.shape[i].length; j++) {
if (self.shape[i][j] === 1) {
var block = self.createAsset('block', 'Block Graphics', .5, .5);
block.tint = self.color;
block.width = blockSize;
block.height = blockSize;
block.x = j * blockSize + blockOffsetX;
block.y = i * blockSize + blockOffsetY;
self.blocks.push(block);
self.addChild(block);
}
}
}
self.startX = 0;
self.startY = 0;
self.moveTowardsHomePosition = function () {
var dx = self.startX - self.x;
var dy = self.startY - self.y;
var distance = Math.sqrt(dx * dx + dy * dy);
if (distance > 1) {
self.x += dx * 0.3;
self.y += dy * 0.3;
} else {
self.x = self.startX;
self.y = self.startY;
}
};
var currentX = 0;
var currentY = 0;
self.moveToDragTarget = function () {
var ox = -this.targetX;
var oy = (LK.is.mobile ? 400 : 0) - this.targetY;
this.targetX += ox / 5;
this.targetY += oy / 5;
this.x = currentX - this.targetX;
this.y = currentY - this.targetY;
};
self.move = function (x, y) {
currentX = x;
currentY = y;
self.x = x - this.targetX;
self.y = y - this.targetY;
};
self.setStartPosition = function (x, y) {
self.startX = x;
self.startY = y;
};
self.getOverlappingCells = function () {
var cells = [];
var boardPos = {
x: -board.x + self.x + 160 * 4 + blockOffsetX + 160,
y: -board.y + self.y + 160 * 4 + blockOffsetY + 160
};
var startX = Math.floor(boardPos.x / 160);
var startY = Math.floor(boardPos.y / 160);
for (var i = 0; i < self.shape.length; i++) {
for (var j = 0; j < self.shape[i].length; j++) {
if (self.shape[i][j] === 1) {
var cell = board.grid && board.grid[startY + i] && board.grid[startY + i][startX + j];
if (cell && !cell.filled) {
cells.push(cell);
} else {
return null;
}
}
}
}
return cells;
};
self.showOverlap = function () {
var cells = self.getOverlappingCells();
if (cells) {
for (var a = 0; a < cells.length; a++) {
var cell = cells[a];
cell.setTint(self.color);
}
}
};
self.rotateShapeRandomly = function () {
var rotations = Math.floor(Math.random() * 4);
for (var r = 0; r < rotations; r++) {
self.shape = self.shape[0].map((val, index) => self.shape.map(row => row[index]).reverse());
}
};
});
var Board = Container.expand(function () {
var self = Container.call(this);
self.particles = [];
Board.prototype.spawnParticles = function (x, y, tint) {
for (var i = 0; i < 10; i++) {
var particle = new Particle(tint);
particle.x = x;
particle.y = y;
this.particles.push(particle);
this.addChild(particle);
}
};
var background = self.createAsset('background', 'Board outline', .5, .5);
background.y = -20;
background.alpha = .4;
background.blendMode = 1;
self.grid = new Array(10).fill(null).map(() => new Array(10).fill(null));
var size = 158;
var totalWidth = 10 * size;
var totalHeight = 10 * size;
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
var cell = new Cell();
cell.x = i * size - totalWidth / 2 + size / 2;
cell.y = j * size - totalHeight / 2 + size / 2;
self.grid[j][i] = cell;
self.addChild(cell);
}
}
self.removeTint = function () {
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if (!self.grid[i][j].filled) {
self.grid[i][j].setTint(0xffffff);
}
}
}
};
self.checkLines = function () {
var rowsRemoved = 0;
for (var i = 0; i < 10; i++) {
var rowFilled = true;
var colFilled = true;
for (var j = 0; j < 10; j++) {
if (!self.grid[i][j].filled) rowFilled = false;
if (!self.grid[j][i].filled) colFilled = false;
}
if (rowFilled || colFilled) {
rowsRemoved += (rowFilled ? 1 : 0) + (colFilled ? 1 : 0);
for (var j = 0; j < 10; j++) {
if (rowFilled) {
self.grid[i][j].setFill(false);
self.spawnParticles(self.grid[i][j].x, self.grid[i][j].y, self.grid[i][j].getTint());
}
if (colFilled) {
self.grid[j][i].setFill(false);
self.spawnParticles(self.grid[j][i].x, self.grid[j][i].y, self.grid[j][i].getTint());
}
}
}
}
return rowsRemoved;
};
self.tick = function () {
for (var i = self.particles.length - 1; i >= 0; i--) {
var particle = self.particles[i];
if (particle) {
particle.tick();
if (particle.alpha <= 0) {
self.particles.splice(i, 1);
}
}
}
};
self.placeBlock = function () {};
});
var Game = Container.expand(function () {
var self = Container.call(this);
var gameBackground = self.createAsset('gameBackground', 'Background Graphics', .5, .5);
gameBackground.x = 2048 / 2;
gameBackground.y = 2732 / 2;
var tilesBackground = self.createAsset('tileBackground', 'Board outline', .5, .5);
tilesBackground.y = -20;
tilesBackground.alpha = .4;
tilesBackground.blendMode = 1;
var blocks = [];
var dragTarget;
var board = self.addChild(new Board());
board.x = 2048 / 2;
board.y = 2732 / 2 - 250 + 30;
tilesBackground.x = 2048 / 2;
tilesBackground.y = 2732 - 300;
var targetOffset;
self.createBlock = function (index) {
var block = new Block(board);
block.x = 2048 / 2 + (index - 1) * (block.width + 30);
block.y = 2732 + block.height;
block.setStartPosition(block.x, 2732 - block.height / 2 - 30);
blocks.push(block);
self.addChild(block);
block.on('down', function (obj) {
dragTarget = this;
var pos = obj.event.getLocalPosition(this);
var targetPos = obj.event.getLocalPosition(self);
this.targetX = pos.x;
this.targetY = pos.y;
dragTarget.move(targetPos.x, targetPos.y);
});
};
stage.on('move', function (obj) {
if (dragTarget) {
board.removeTint();
var pos = obj.event.getLocalPosition(self);
dragTarget.move(pos.x, pos.y);
dragTarget.showOverlap();
}
});
stage.on('up', function (obj) {
if (dragTarget) {
var cells = dragTarget.getOverlappingCells();
if (cells) {
for (var a = 0; a < cells.length; a++) {
cells[a].setFill(true);
cells[a].setTint(dragTarget.color);
}
blocks[blocks.indexOf(dragTarget)] = undefined;
dragTarget.destroy();
if (!blocks.some(block => block)) {
self.createBlocks();
}
var pointsToAdd = board.checkLines();
if (pointsToAdd) {
score += Math.pow(pointsToAdd, 2) * 10;
scoreTxt.setText(score);
}
}
board.removeTint();
dragTarget = undefined;
}
});
self.createBlocks = function () {
for (var i = 0; i < 3; i++) {
self.createBlock(i);
}
};
var score = 0;
self.createBlocks();
var scoreTxt = new Text2('0', {
size: 150,
fill: "#ffffff",
font: 'Impact',
dropShadow: true,
dropShadowColor: '#2a636e'
});
scoreTxt.anchor.set(.5, 0);
LK.gui.topCenter.addChild(scoreTxt);
self.isMovePossible = function () {
for (var a = 0; a < blocks.length; a++) {
if (blocks[a]) {
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 10; j++) {
if (board.grid[i][j].filled) continue;
var canPlace = true;
for (var k = 0; k < blocks[a].shape.length; k++) {
for (var l = 0; l < blocks[a].shape[k].length; l++) {
if (blocks[a].shape[k][l] === 1) {
if (i + k < 0 || i + k >= 10 || j + l < 0 || j + l >= 10 || board.grid[i + k][j + l].filled) {
canPlace = false;
break;
}
}
}
if (!canPlace) break;
}
if (canPlace) return true;
}
}
}
}
return false;
};
var isGameOver = false;
LK.on('tick', function () {
board.tick();
if (isGameOver || !self.isMovePossible()) {
LK.effects.flashScreen(0xffffff, 1000);
LK.showGameOver();
}
for (var a = blocks.length - 1; a >= 0; a--) {
if (blocks[a]) {
if (blocks[a] != dragTarget) {
blocks[a].moveTowardsHomePosition();
} else {
blocks[a].moveToDragTarget();
}
}
}
});
});
White square with tight round corners, flat shaded, hyper casual game. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
White particle cloud. Cartoon. Bright outline. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
Perfectly square red Christmas decoration. Cartoon. Cute art style
Perfectly square yellow Christmas decoration. Cartoon style. Cute art style. Simple vector style.
Perfectly square bright blue Christmas decoration with cute happyy face. Cartoon style. Cute art style. Simple vector style.
Perfectly square bright purple Christmas decoration with cute happyy face. Cartoon style. Cute art style. Simple vector style.
Perfectly square bright green Christmas decoration with cute happyy face. Cartoon style. Cute art style. Simple vector style. No Shadows
Perfectly square bright cobalt blue Christmas decoration with cute happyy face. Cartoon style. Cute art style. Simple vector style. No Shadows Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
Background for hyper casual puzzle game. Showing Santas workshop. Pastel colors, flat shaded, vector art. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.