Play
:quality(85)/https://cdn.frvr.ai/6834d989f4b47e6b60191893.png)
:quality(85)/https://cdn.frvr.ai/6834d9bdf4b47e6b60191899.png)
Creation History
User prompt
When clicking refresh asset refresh power-up must be spend
User prompt
Move refresh indicator to the more left
User prompt
Power-up list must seen at the top right corner. This indicator should include "refresh" asset
User prompt
Power-up list must seen at the top right corner.
User prompt
Refresh power-up refreshes given 3 blocks at the background
User prompt
Give 1 refresh power-up if 2 line elimination is done in a single move
User prompt
When blocks are eliminated, play "elimination" sound
User prompt
Particle colors must be darker as well ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
color of "particle" asset must be according to which block are eliminated at the corresponding cell ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Brighten quad block little bit ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Make quad block dark blue ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Make L shape block little bit darker
User prompt
Make only light green block to navy blue color
User prompt
Make green blocks darker and make original colored block to darker ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
green blocks must hued to dark green ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Red blocks must hued to bordeux ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
"gamemusic" should play when game starts
User prompt
"gamemusic" must play as soon as game starts and loops if finished
User prompt
But I cannot hear music
User prompt
"gamemusic" must play, as soon as game starts and it must keep playing and looping if finished
User prompt
Play "gamemusic" while playing 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;
var brightness = 0.8; // Default brightness
// Adjust hue for bordeaux color - shift red (hue 0) towards purple-red
if (offset === 0) {
hue = 0.92; // Bordeaux hue (closer to purple-red)
brightness = 0.6; // Make original colored blocks darker
}
// Make green blocks darker (green is around hue 0.33)
if (hue >= 0.25 && hue <= 0.41) {
brightness = 0.5; // Make green blocks darker
}
// Make L-shaped blocks darker
if (self.shape === ShapeTypes.LSHAPE) {
brightness = 0.5; // Make L-shaped blocks darker
}
// Make quad blocks dark blue
if (self.shape === ShapeTypes.QUAD) {
hue = 0.67; // Blue hue
brightness = 0.55; // Brightened dark blue
}
self.color = hsvToRgb(hue, 0.7, brightness);
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);
}
}
};
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 elimination sound
LK.getSound('elimination').play();
rowsRemoved += (rowFilled ? 1 : 0) + (colFilled ? 1 : 0);
for (var j = 0; j < 10; j++) {
if (rowFilled) {
// Use the tint of the filled block for the particle color
var particleTint = self.grid[i][j].getTint();
self.grid[i][j].setFill(false);
self.spawnParticles(self.grid[i][j].x, self.grid[i][j].y, particleTint);
}
if (colFilled) {
// Use the tint of the filled block for the particle color
var particleTint = self.grid[j][i].getTint();
self.grid[j][i].setFill(false);
self.spawnParticles(self.grid[j][i].x, self.grid[j][i].y, particleTint);
}
}
}
}
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);
// Utility: Convert RGB to HSV
function rgbToHsv(tint) {
var r = (tint >> 16 & 0xFF) / 255;
var g = (tint >> 8 & 0xFF) / 255;
var b = (tint & 0xFF) / 255;
var max = Math.max(r, g, b),
min = Math.min(r, g, b);
var h,
s,
v = max;
var d = max - min;
s = max === 0 ? 0 : d / max;
if (max === min) {
h = 0;
} else {
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return [h, s, v];
}
// Utility: Convert HSV to RGB
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);
}
// Make the particle color darker by reducing brightness
var hsv = rgbToHsv(tint);
hsv[2] = Math.max(0, hsv[2] * 0.5); // Reduce brightness by 50%
var darkTint = hsvToRgb(hsv[0], hsv[1], hsv[2]);
self.tint = darkTint;
var particleGraphics = self.attachAsset('particle', {
anchorX: 0.5,
anchorY: 0.5
});
particleGraphics.rotation = Math.random() * Math.PI * 2;
// Set the particle asset color to match the eliminated block's color, but darker
particleGraphics.tint = darkTint;
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;
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);
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);
game.addChild(block);
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);
}
blocks[blocks.indexOf(dragTarget)] = undefined;
dragTarget.destroy();
if (!blocks.some(function (block) {
return block;
})) {
game.createBlocks();
}
var pointsToAdd = board.checkLines();
if (pointsToAdd) {
score += Math.pow(pointsToAdd, 2) * 10;
scoreTxt.setText(score);
// Give 1 refresh power-up if 2 line elimination is done in a single move
if (pointsToAdd === 2) {
if (typeof game.refreshPowerUps === "undefined") {
game.refreshPowerUps = 0;
}
game.refreshPowerUps += 1;
game.updateRefreshPowerUpUI();
// Optionally, show a message or animation for the power-up here
}
}
}
board.removeTint();
dragTarget = undefined;
// --- Refresh power-up logic ---
// If player has refresh power-ups, allow refreshing the 3 blocks at the background
if (typeof game.refreshPowerUps !== "undefined" && game.refreshPowerUps > 0) {
// Example: call this function from a button or gesture in your UI
game.useRefreshPowerUp = function () {
if (game.refreshPowerUps > 0) {
// Remove current blocks
for (var i = 0; i < blocks.length; i++) {
if (blocks[i]) {
blocks[i].destroy();
blocks[i] = undefined;
}
}
// Create new blocks
game.createBlocks();
game.refreshPowerUps -= 1;
game.updateRefreshPowerUpUI();
// Optionally, update UI to show remaining power-ups
}
};
}
}
});
game.createBlocks = function () {
for (var i = 0; i < 3; i++) {
game.createBlock(i);
}
};
var score = 0;
game.createBlocks();
LK.playMusic('gamemusic');
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);
// --- Power-up UI ---
// Create a Text2 object to show the refresh power-up count
var refreshPowerUpTxt = new Text2('🔄 x0', {
size: 90,
fill: 0xFFFF66,
font: 'Impact',
dropShadow: true,
dropShadowColor: '#2a636e'
});
refreshPowerUpTxt.anchor.set(1, 0); // right-top anchor
// Place at top right, but leave 30px margin from right/top and avoid top left 100x100
refreshPowerUpTxt.x = -30;
refreshPowerUpTxt.y = 30;
LK.gui.topRight.addChild(refreshPowerUpTxt);
// Helper to update the power-up UI
game.updateRefreshPowerUpUI = function () {
var count = typeof game.refreshPowerUps !== "undefined" ? game.refreshPowerUps : 0;
refreshPowerUpTxt.setText('🔄 x' + count);
};
game.updateRefreshPowerUpUI();
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()) {
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();
}
}
}
}); ===================================================================
--- original.js
+++ change.js
@@ -466,8 +466,9 @@
if (typeof game.refreshPowerUps === "undefined") {
game.refreshPowerUps = 0;
}
game.refreshPowerUps += 1;
+ game.updateRefreshPowerUpUI();
// Optionally, show a message or animation for the power-up here
}
}
}
@@ -488,8 +489,9 @@
}
// Create new blocks
game.createBlocks();
game.refreshPowerUps -= 1;
+ game.updateRefreshPowerUpUI();
// Optionally, update UI to show remaining power-ups
}
};
}
@@ -511,8 +513,28 @@
dropShadowColor: '#2a636e'
});
scoreTxt.anchor.set(.5, 0);
LK.gui.top.addChild(scoreTxt);
+// --- Power-up UI ---
+// Create a Text2 object to show the refresh power-up count
+var refreshPowerUpTxt = new Text2('🔄 x0', {
+ size: 90,
+ fill: 0xFFFF66,
+ font: 'Impact',
+ dropShadow: true,
+ dropShadowColor: '#2a636e'
+});
+refreshPowerUpTxt.anchor.set(1, 0); // right-top anchor
+// Place at top right, but leave 30px margin from right/top and avoid top left 100x100
+refreshPowerUpTxt.x = -30;
+refreshPowerUpTxt.y = 30;
+LK.gui.topRight.addChild(refreshPowerUpTxt);
+// Helper to update the power-up UI
+game.updateRefreshPowerUpUI = function () {
+ var count = typeof game.refreshPowerUps !== "undefined" ? game.refreshPowerUps : 0;
+ refreshPowerUpTxt.setText('🔄 x' + count);
+};
+game.updateRefreshPowerUpUI();
game.isMovePossible = function () {
for (var a = 0; a < blocks.length; a++) {
if (blocks[a]) {
for (var i = 0; i < 10; i++) {
Images
:quality(85)/https://cdn.frvr.ai/65703e58695fbf13c2730381.png%3F3)
White particle cloud. Cartoon. Bright outline. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
:quality(85)/https://cdn.frvr.ai/6834a889f6723b7b70084681.png%3F3)
block with a smile face. No background. Transparent background. Blank background. No shadows. 2d. In-Game asset. flat
:quality(85)/https://cdn.frvr.ai/6834aa31f6723b7b700846bb.png%3F3)
Dark grey square with round corners, flat shaded, hyper casual game. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
:quality(85)/https://cdn.frvr.ai/6834acfef6723b7b7008471e.png%3F3)
Background for dark hell themed puzzle game. Pastel colors, flat shaded, vector art. Blocks. Depressed. dark prisons Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
:quality(85)/https://cdn.frvr.ai/683620c5606d87eaac61354f.png%3F3)
a dark colored refresh sign box. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https://cdn.frvr.ai/683623c4606d87eaac613594.png%3F3)
A bomb. No background. Transparent background. Blank background. No shadows. 2d. In-Game asset. flat
