User prompt
remove that
User prompt
Let some squares be random block 2
User prompt
good imrove a little bit
User prompt
improve the game
User prompt
improve the game
User prompt
remove soft sound when block is placed
User prompt
improve the game
User prompt
The blocks we need to place should come down slowly from above.
User prompt
Let's show that there is a series when there is overlap completion, such as times 1 times two.
User prompt
lend fragmentation voice throughout the game
User prompt
Give disruption voice when the line is complete
User prompt
Once the bottom is complete, the blocks will slide down
User prompt
improve the game
Remix started
Copy Block Puzzle
/****
* Classes
****/
var Block = Container.expand(function (board) {
var self = Container.call(this);
var hsvToRgb = function hsvToRgb(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(function (val, index) {
return self.shape.map(function (row) {
return row[index];
}).reverse();
});
}
};
self.rotateShapeRandomly();
self.blocks = [];
var background = self.attachAsset('background', {
anchorX: 0.5,
anchorY: 0.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.attachAsset('block', {
anchorX: 0.5,
anchorY: 0.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_migrated = 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);
// Add gentle glow effect by scaling up slightly and fading back
if (typeof tween !== "undefined") {
cell.scale.x = cell.scale.y = 1.12;
tween.to(cell.scale, {
x: 1,
y: 1
}, 180, {
easing: tween.Easing.Cubic.Out
});
// Gentle highlight pulse on cell background
if (cell.children && cell.children.length > 0) {
var cellBg = cell.children[0];
if (cellBg && cellBg.alpha !== undefined) {
var origAlpha = cellBg.alpha;
cellBg.alpha = 1;
tween.to(cellBg, {
alpha: origAlpha
}, 180, {
easing: tween.Easing.Cubic.Out
});
}
}
}
}
}
};
self.rotateShapeRandomly = function () {
var rotations = Math.floor(Math.random() * 4);
for (var r = 0; r < rotations; r++) {
self.shape = self.shape[0].map(function (val, index) {
return self.shape.map(function (row) {
return 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.attachAsset('background', {
anchorX: 0.5,
anchorY: 0.5
});
background.y = -20;
background.alpha = .4;
background.blendMode = 1;
self.grid = new Array(10).fill(null).map(function () {
return 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) {
// Play disruption sound when a line is completed
LK.getSound('disruption').play();
rowsRemoved += (rowFilled ? 1 : 0) + (colFilled ? 1 : 0);
// Gentle shake animation for board
if (typeof tween !== "undefined") {
var origX = self.x,
origY = self.y;
tween.to(self, {
x: origX + 20
}, 60).onComplete(function () {
tween.to(self, {
x: origX - 20
}, 60).onComplete(function () {
tween.to(self, {
x: origX
}, 60);
});
});
}
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());
}
}
// Slide blocks down if a row was completed
if (rowFilled) {
for (var row = i; row > 0; row--) {
for (var col = 0; col < 10; col++) {
self.grid[row][col].setFill(self.grid[row - 1][col].filled);
self.grid[row][col].setTint(self.grid[row - 1][col].getTint());
}
}
// Clear the top row
for (var col = 0; col < 10; col++) {
self.grid[0][col].setFill(false);
self.grid[0][col].setTint(0xffffff);
}
}
}
}
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 Cell = Container.expand(function () {
var self = Container.call(this);
self.filled = false;
var empty = self.attachAsset('cell', {
anchorX: 0.5,
anchorY: 0.5
});
empty.alpha = .8;
var filled = self.attachAsset('block', {
anchorX: 0.5,
anchorY: 0.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 Particle = Container.expand(function (tint) {
var self = Container.call(this);
self.tint = tint;
var particleGraphics = self.attachAsset('particle', {
anchorX: 0.5,
anchorY: 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();
}
};
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x000000
});
/****
* Game Code
****/
var gameBackground = game.attachAsset('gameBackground', {
anchorX: 0.5,
anchorY: 0.5
});
gameBackground.x = 2048 / 2;
gameBackground.y = 2732 / 2;
// Gentle fade-in for background
if (typeof tween !== "undefined") {
gameBackground.alpha = 0;
tween.to(gameBackground, {
alpha: 1
}, 900, {
easing: tween.Easing.Cubic.Out
});
}
var tilesBackground = game.attachAsset('tileBackground', {
anchorX: 0.5,
anchorY: 0.5
});
tilesBackground.y = -20;
tilesBackground.alpha = .4;
tilesBackground.blendMode = 1;
var blocks = [];
var dragTarget;
var board = game.addChild(new Board());
board.x = 2048 / 2;
board.y = 2732 / 2 - 250 + 30;
tilesBackground.x = 2048 / 2;
tilesBackground.y = 2732 - 300;
var targetOffset;
game.createBlock = function (index) {
var block = new Block(board);
// Set initial position above the screen
block.x = 2048 / 2 + (index - 1) * (block.width + 30);
block.y = -block.height;
// Set the home position where the block should land
var homeY = 2732 - block.height / 2 - 30;
block.setStartPosition(block.x, homeY);
blocks.push(block);
game.addChild(block);
// Animate the block falling down to its home position
if (typeof tween !== "undefined") {
tween.to(block, {
y: homeY
}, 700, {
easing: tween.Easing.Cubic.Out
});
} else {
block.y = homeY;
}
// Animate block pop-in
if (typeof tween !== "undefined") {
block.scale.x = block.scale.y = 0.1;
tween.to(block.scale, {
x: 1,
y: 1
}, 250, {
easing: tween.Easing.Back.Out
});
}
block.on('down', function (x, y, obj) {
dragTarget = this;
var pos = this.toLocal(obj.global);
var targetPos = game.toLocal(obj.global);
this.targetX = pos.x;
this.targetY = pos.y;
dragTarget._move_migrated(targetPos.x, targetPos.y);
});
};
game.on('move', function (x, y, obj) {
if (dragTarget) {
board.removeTint();
var pos = game.toLocal(obj.global);
dragTarget._move_migrated(pos.x, pos.y);
dragTarget.showOverlap();
}
});
game.on('up', function (x, y, 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);
// Always use the default filled asset for placed squares
// Add a subtle particle effect when a block is placed
if (typeof board.spawnParticles === "function") {
board.spawnParticles(cells[a].x, cells[a].y, dragTarget.color);
}
// Subtle scale pulse effect on placed cell
if (typeof tween !== "undefined") {
cells[a].scale.x = cells[a].scale.y = 1.2;
tween.to(cells[a].scale, {
x: 1,
y: 1
}, 180, {
easing: tween.Easing.Back.Out
});
}
}
blocks[blocks.indexOf(dragTarget)] = undefined;
dragTarget.destroy();
// Gentle pulse on score text when a block is placed
if (typeof tween !== "undefined") {
tween.to(scoreTxt.scale, {
x: 1.15,
y: 1.15
}, 100).onComplete(function () {
tween.to(scoreTxt.scale, {
x: 1,
y: 1
}, 120);
});
}
// Soft highlight effect on board
if (typeof tween !== "undefined") {
var origAlpha = board.alpha;
board.alpha = 0.7;
tween.to(board, {
alpha: origAlpha
}, 200);
// Gentle pulse on board background
if (board.children && board.children.length > 0) {
var bg = board.children[0];
if (bg && bg.scale) {
bg.scale.x = bg.scale.y = 1.08;
tween.to(bg.scale, {
x: 1,
y: 1
}, 220, {
easing: tween.Easing.Back.Out
});
}
}
}
if (!blocks.some(function (block) {
return block;
})) {
game.createBlocks();
}
var pointsToAdd = board.checkLines();
if (pointsToAdd) {
score += Math.pow(pointsToAdd, 2) * 10;
scoreTxt.setText(score);
// Animate scoreTxt: scale up and back to normal
if (typeof tween !== "undefined") {
tween.to(scoreTxt.scale, {
x: 1.3,
y: 1.3
}, 120).onComplete(function () {
tween.to(scoreTxt.scale, {
x: 1,
y: 1
}, 180);
});
// Flash scoreTxt color
var origFill = scoreTxt.style.fill;
scoreTxt.style.fill = 0xffe066;
LK.setTimeout(function () {
scoreTxt.style.fill = origFill;
}, 200);
}
// Show combo/multiplier text if more than 1 line cleared
if (pointsToAdd > 1) {
var comboTxt = new Text2('x' + pointsToAdd, {
size: 120,
fill: 0xffa500,
font: 'Impact',
dropShadow: true,
dropShadowColor: '#2a636e'
});
comboTxt.anchor.set(.5, .5);
comboTxt.x = scoreTxt.x;
comboTxt.y = scoreTxt.y + scoreTxt.height + 30;
LK.gui.top.addChild(comboTxt);
// Gentle pop-in scale effect
if (typeof tween !== "undefined") {
comboTxt.alpha = 0;
comboTxt.scale.x = comboTxt.scale.y = 0.7;
tween.to(comboTxt, {
alpha: 1,
y: comboTxt.y - 40
}, 350, {
easing: tween.Easing.Cubic.Out
}).onComplete(function () {
tween.to(comboTxt, {
alpha: 0,
y: comboTxt.y - 40
}, 500).onComplete(function () {
comboTxt.destroy();
});
});
tween.to(comboTxt.scale, {
x: 1,
y: 1
}, 200, {
easing: tween.Easing.Back.Out
});
} else {
// fallback: just destroy after 1s
LK.setTimeout(function () {
comboTxt.destroy();
}, 1000);
}
}
}
}
board.removeTint();
dragTarget = undefined;
}
});
game.createBlocks = function () {
for (var i = 0; i < 3; i++) {
game.createBlock(i);
}
isGameOver = false;
};
var score = 0;
game.createBlocks();
// Play fragmentation music throughout the game
LK.playMusic('fragmentation', {
loop: true
});
var scoreTxt = new Text2('0', {
size: 150,
fill: 0xFFFFFF,
font: 'Impact',
dropShadow: true,
dropShadowColor: '#2a636e'
});
scoreTxt.anchor.set(.5, 0);
LK.gui.top.addChild(scoreTxt);
game.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 && !game.isMovePossible()) {
isGameOver = true;
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();
// Gentle floating animation for idle blocks
if (!blocks[a].floatingPhase) blocks[a].floatingPhase = Math.random() * Math.PI * 2;
blocks[a].floatingPhase += 0.04;
var floatY = Math.sin(blocks[a].floatingPhase) * 8;
blocks[a].y = blocks[a].startY + floatY;
} else {
blocks[a].moveToDragTarget();
}
}
}
}); ===================================================================
--- original.js
+++ change.js
@@ -445,39 +445,9 @@
if (cells) {
for (var a = 0; a < cells.length; a++) {
cells[a].setFill(true);
cells[a].setTint(dragTarget.color);
- // Randomly let some placed squares use block2 asset
- if (Math.random() < 0.33 && cells[a].children && cells[a].children.length > 1) {
- // Remove the old filled asset
- var oldFilled = cells[a].children[1];
- if (oldFilled) {
- oldFilled.visible = false;
- }
- // Attach block2 asset if not already present
- if (!cells[a].block2Asset) {
- var block2 = cells[a].attachAsset('block2', {
- anchorX: 0.5,
- anchorY: 0.5
- });
- block2.width = oldFilled.width;
- block2.height = oldFilled.height;
- block2.x = oldFilled.x;
- block2.y = oldFilled.y;
- block2.tint = dragTarget.color;
- block2.visible = true;
- cells[a].block2Asset = block2;
- cells[a].addChild(block2);
- } else {
- cells[a].block2Asset.visible = true;
- cells[a].block2Asset.tint = dragTarget.color;
- }
- } else if (cells[a].block2Asset) {
- cells[a].block2Asset.visible = false;
- if (cells[a].children && cells[a].children.length > 1) {
- cells[a].children[1].visible = true;
- }
- }
+ // Always use the default filled asset for placed squares
// Add a subtle particle effect when a block is placed
if (typeof board.spawnParticles === "function") {
board.spawnParticles(cells[a].x, cells[a].y, dragTarget.color);
}
White square with round corners, flat shaded, hyper casual game. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
Background for relaxing puzzle game. Pastel colors, flat shaded, vector art. Flowers. Blocks. Relaxing. Clouds Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
funny square. In-Game asset. 2d. High contrast. No shadows
sad square. In-Game asset. 2d. High contrast. No shadows