Play
:quality(85)/https:%2F%2Fcdn.frvr.ai/685e72bb5e0b136f47923eb8.png)
:quality(85)/https:%2F%2Fcdn.frvr.ai/685e72b15e0b136f47923eb5.png)
#match3
#puzzle
#flowers
#casual
#mobile
Creation History
User prompt
Use the particle explosion asset to make the effect after the flower match or pop. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Now make the particle explosion asset.
User prompt
Fix 1,2,34,5 then. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Add effect when the flowers pop. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
Make a background, a flower garden background.
Code edit (1 edits merged)
Please save this source code
User prompt
Blossom Match
Initial prompt
Lets make a game a flower match game, like candy crush but instead of candy it's flower, different kinds of flower.
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var Flower = Container.expand(function (type) {
var self = Container.call(this);
self.flowerType = type;
self.gridX = 0;
self.gridY = 0;
var flowerGraphics = self.attachAsset(type, {
anchorX: 0.5,
anchorY: 0.5
});
// Add subtle glow effect
flowerGraphics.alpha = 0.9;
self.down = function (x, y, obj) {
if (!isSwapping && !isMatching) {
game.selectFlower(self);
}
};
self.animateMatch = function () {
// Create spectacular particle explosion effect
for (var i = 0; i < 16; i++) {
var particle = self.attachAsset('particle', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 1.5 + Math.random() * 1.0,
scaleY: 1.5 + Math.random() * 1.0,
alpha: 1.0,
tint: Math.random() < 0.3 ? 0xffff00 : Math.random() < 0.6 ? 0xff6b47 : 0xff1493
});
var angle = i / 16 * Math.PI * 2 + Math.random() * 0.8;
var distance = 120 + Math.random() * 100;
var targetX = Math.cos(angle) * distance;
var targetY = Math.sin(angle) * distance;
// Add initial burst motion
particle.x = Math.cos(angle) * 20;
particle.y = Math.sin(angle) * 20;
tween(particle, {
x: targetX,
y: targetY,
scaleX: 0.1,
scaleY: 0.1,
alpha: 0,
rotation: Math.random() * Math.PI * 6
}, {
duration: 600 + Math.random() * 400,
easing: tween.easeOut,
onFinish: function onFinish() {
particle.destroy();
}
});
}
// Add flower scaling and fade animation
tween(flowerGraphics, {
scaleX: 1.5,
scaleY: 1.5,
alpha: 0,
rotation: Math.random() * Math.PI * 0.5
}, {
duration: 400,
easing: tween.easeOut,
onFinish: function onFinish() {
self.visible = false;
}
});
};
self.animateFall = function (targetY, callback) {
tween(self, {
y: targetY
}, {
duration: 200,
easing: tween.easeIn,
onFinish: callback
});
};
return self;
});
var Grid = Container.expand(function () {
var self = Container.call(this);
self.gridSize = 8;
self.cellSize = 200;
self.flowers = [];
self.flowerTypes = ['rose', 'tulip', 'daisy', 'sunflower', 'lily'];
// Initialize 2D array
for (var i = 0; i < self.gridSize; i++) {
self.flowers[i] = [];
for (var j = 0; j < self.gridSize; j++) {
self.flowers[i][j] = null;
}
}
self.createFlower = function (gridX, gridY) {
var randomType = self.flowerTypes[Math.floor(Math.random() * self.flowerTypes.length)];
var flower = new Flower(randomType);
flower.gridX = gridX;
flower.gridY = gridY;
flower.x = gridX * self.cellSize + self.cellSize / 2;
flower.y = gridY * self.cellSize + self.cellSize / 2;
self.flowers[gridY][gridX] = flower;
self.addChild(flower);
return flower;
};
self.initializeGrid = function () {
for (var y = 0; y < self.gridSize; y++) {
for (var x = 0; x < self.gridSize; x++) {
self.createFlower(x, y);
}
}
};
self.swapFlowers = function (flower1, flower2, callback) {
var tempX = flower1.gridX;
var tempY = flower1.gridY;
// Update grid positions
flower1.gridX = flower2.gridX;
flower1.gridY = flower2.gridY;
flower2.gridX = tempX;
flower2.gridY = tempY;
// Update array
self.flowers[flower1.gridY][flower1.gridX] = flower1;
self.flowers[flower2.gridY][flower2.gridX] = flower2;
// Animate swap
var targetX1 = flower1.gridX * self.cellSize + self.cellSize / 2;
var targetY1 = flower1.gridY * self.cellSize + self.cellSize / 2;
var targetX2 = flower2.gridX * self.cellSize + self.cellSize / 2;
var targetY2 = flower2.gridY * self.cellSize + self.cellSize / 2;
var completed = 0;
function onComplete() {
completed++;
if (completed === 2 && callback) {
callback();
}
}
tween(flower1, {
x: targetX1,
y: targetY1
}, {
duration: 250,
easing: tween.easeInOut,
onFinish: onComplete
});
tween(flower2, {
x: targetX2,
y: targetY2
}, {
duration: 250,
easing: tween.easeInOut,
onFinish: onComplete
});
};
self.findMatches = function () {
var matches = [];
// Check horizontal matches
for (var y = 0; y < self.gridSize; y++) {
var count = 1;
var currentType = self.flowers[y][0] ? self.flowers[y][0].flowerType : null;
for (var x = 1; x < self.gridSize; x++) {
var flower = self.flowers[y][x];
if (flower && flower.flowerType === currentType) {
count++;
} else {
if (count >= 3 && currentType) {
for (var i = x - count; i < x; i++) {
matches.push({
x: i,
y: y
});
}
}
count = 1;
currentType = flower ? flower.flowerType : null;
}
}
if (count >= 3 && currentType) {
for (var i = self.gridSize - count; i < self.gridSize; i++) {
matches.push({
x: i,
y: y
});
}
}
}
// Check vertical matches
for (var x = 0; x < self.gridSize; x++) {
var count = 1;
var currentType = self.flowers[0][x] ? self.flowers[0][x].flowerType : null;
for (var y = 1; y < self.gridSize; y++) {
var flower = self.flowers[y][x];
if (flower && flower.flowerType === currentType) {
count++;
} else {
if (count >= 3 && currentType) {
for (var i = y - count; i < y; i++) {
matches.push({
x: x,
y: i
});
}
}
count = 1;
currentType = flower ? flower.flowerType : null;
}
}
if (count >= 3 && currentType) {
for (var i = self.gridSize - count; i < self.gridSize; i++) {
matches.push({
x: x,
y: i
});
}
}
}
return matches;
};
self.removeMatches = function (matches, callback) {
if (matches.length === 0) {
if (callback) callback();
return;
}
var completed = 0;
var total = matches.length;
function onAnimationComplete() {
completed++;
if (completed === total && callback) {
callback();
}
}
for (var i = 0; i < matches.length; i++) {
var match = matches[i];
var flower = self.flowers[match.y][match.x];
if (flower) {
flower.animateMatch();
self.flowers[match.y][match.x] = null;
LK.setTimeout(function () {
onAnimationComplete();
}, 300);
}
}
};
self.dropFlowers = function (callback) {
var animations = 0;
for (var x = 0; x < self.gridSize; x++) {
var writeIndex = self.gridSize - 1;
// Move existing flowers down
for (var y = self.gridSize - 1; y >= 0; y--) {
if (self.flowers[y][x]) {
if (y !== writeIndex) {
self.flowers[writeIndex][x] = self.flowers[y][x];
self.flowers[y][x] = null;
var flower = self.flowers[writeIndex][x];
flower.gridY = writeIndex;
var targetY = writeIndex * self.cellSize + self.cellSize / 2;
animations++;
(function (f, ty) {
f.animateFall(ty, function () {
animations--;
if (animations === 0 && callback) {
callback();
}
});
})(flower, targetY);
}
writeIndex--;
}
}
// Create new flowers to fill empty spaces
for (var y = 0; y <= writeIndex; y++) {
var newFlower = self.createFlower(x, y);
newFlower.y = -self.cellSize;
var targetY = y * self.cellSize + self.cellSize / 2;
animations++;
(function (f, ty) {
f.animateFall(ty, function () {
animations--;
if (animations === 0 && callback) {
callback();
}
});
})(newFlower, targetY);
}
}
if (animations === 0 && callback) {
callback();
}
};
self.isAdjacent = function (flower1, flower2) {
var dx = Math.abs(flower1.gridX - flower2.gridX);
var dy = Math.abs(flower1.gridY - flower2.gridY);
return dx === 1 && dy === 0 || dx === 0 && dy === 1;
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x98fb98
});
/****
* Game Code
****/
// Create beautiful flower garden background
var gardenBg = game.attachAsset('gardenBackground', {
anchorX: 0,
anchorY: 0,
x: 0,
y: 0
});
var grid = new Grid();
var selectedFlower = null;
var score = 0;
var isSwapping = false;
var isMatching = false;
// Position grid in center of screen
grid.x = (2048 - grid.gridSize * grid.cellSize) / 2;
grid.y = (2732 - grid.gridSize * grid.cellSize) / 2 + 200;
game.addChild(grid);
// Score display
var scoreTxt = new Text2('Score: 0', {
size: 120,
fill: 0x2D5016
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
// Initialize grid
grid.initializeGrid();
game.selectFlower = function (flower) {
if (selectedFlower === null) {
// First selection
selectedFlower = flower;
tween(flower, {
scaleX: 1.1,
scaleY: 1.1
}, {
duration: 150,
easing: tween.easeOut
});
} else if (selectedFlower === flower) {
// Deselect same flower
tween(flower, {
scaleX: 1,
scaleY: 1
}, {
duration: 150,
easing: tween.easeOut
});
selectedFlower = null;
} else if (grid.isAdjacent(selectedFlower, flower)) {
// Valid swap
isSwapping = true;
var firstFlower = selectedFlower;
tween(firstFlower, {
scaleX: 1,
scaleY: 1
}, {
duration: 150,
easing: tween.easeOut
});
LK.getSound('swap').play();
grid.swapFlowers(firstFlower, flower, function () {
selectedFlower = null;
isSwapping = false;
game.checkForMatches();
});
} else {
// Invalid swap - select new flower
tween(selectedFlower, {
scaleX: 1,
scaleY: 1
}, {
duration: 150,
easing: tween.easeOut
});
selectedFlower = flower;
tween(flower, {
scaleX: 1.1,
scaleY: 1.1
}, {
duration: 150,
easing: tween.easeOut
});
}
};
game.checkForMatches = function () {
var matches = grid.findMatches();
if (matches.length > 0) {
isMatching = true;
LK.getSound('match').play();
// Update score
score += matches.length * 10;
LK.setScore(score);
scoreTxt.setText('Score: ' + score);
grid.removeMatches(matches, function () {
grid.dropFlowers(function () {
isMatching = false;
// Check for cascading matches
LK.setTimeout(function () {
game.checkForMatches();
}, 300);
});
});
}
};
// Initial match check after grid creation
LK.setTimeout(function () {
game.checkForMatches();
}, 500);
game.update = function () {
// Game runs automatically through event-driven mechanics
}; ===================================================================
--- original.js
+++ change.js
@@ -22,43 +22,48 @@
game.selectFlower(self);
}
};
self.animateMatch = function () {
- // Create particle explosion effect with dedicated particle asset
- for (var i = 0; i < 12; i++) {
+ // Create spectacular particle explosion effect
+ for (var i = 0; i < 16; i++) {
var particle = self.attachAsset('particle', {
anchorX: 0.5,
anchorY: 0.5,
- scaleX: 0.8 + Math.random() * 0.4,
- scaleY: 0.8 + Math.random() * 0.4,
- alpha: 0.9,
- tint: Math.random() < 0.5 ? 0xffff00 : 0xff6b47
+ scaleX: 1.5 + Math.random() * 1.0,
+ scaleY: 1.5 + Math.random() * 1.0,
+ alpha: 1.0,
+ tint: Math.random() < 0.3 ? 0xffff00 : Math.random() < 0.6 ? 0xff6b47 : 0xff1493
});
- var angle = i / 12 * Math.PI * 2 + Math.random() * 0.5;
- var distance = 80 + Math.random() * 70;
+ var angle = i / 16 * Math.PI * 2 + Math.random() * 0.8;
+ var distance = 120 + Math.random() * 100;
var targetX = Math.cos(angle) * distance;
var targetY = Math.sin(angle) * distance;
+ // Add initial burst motion
+ particle.x = Math.cos(angle) * 20;
+ particle.y = Math.sin(angle) * 20;
tween(particle, {
x: targetX,
y: targetY,
- scaleX: 0,
- scaleY: 0,
+ scaleX: 0.1,
+ scaleY: 0.1,
alpha: 0,
- rotation: Math.random() * Math.PI * 4
+ rotation: Math.random() * Math.PI * 6
}, {
- duration: 500 + Math.random() * 300,
+ duration: 600 + Math.random() * 400,
easing: tween.easeOut,
onFinish: function onFinish() {
particle.destroy();
}
});
}
+ // Add flower scaling and fade animation
tween(flowerGraphics, {
- scaleX: 1.3,
- scaleY: 1.3,
- alpha: 0
+ scaleX: 1.5,
+ scaleY: 1.5,
+ alpha: 0,
+ rotation: Math.random() * Math.PI * 0.5
}, {
- duration: 300,
+ duration: 400,
easing: tween.easeOut,
onFinish: function onFinish() {
self.visible = false;
}
Images
:quality(85)/https:%2F%2Fcdn.frvr.ai/685e74545e0b136f47923eee.png%3F3)
Tulip. The flower is facing at the center. Make it vibrant. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/685e74af5e0b136f47923f01.png%3F3)
Rose. Front. Make it vibrant. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/685e74ee5e0b136f47923f0b.png%3F3)
Daisy. Front. Make it vibrant.. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/685e75505e0b136f47923f1d.png%3F3)
Sunflower. Front. Make it vibrant.. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/685e759c5e0b136f47923f2d.png%3F3)
Lily. Front. Make it vibrant.. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/685e79035e0b136f47923f99.png%3F3)
Grass background.. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/685e7b8a5e0b136f47923fd2.png%3F3)
Flowery particle. Vibrant.. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/685e7dd65e0b136f47923fee.png%3F3)
Shimmer effect. Vibrant.. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/685e7e115e0b136f47923ff9.png%3F3)
Rainbow effect. Vibrant.. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/685eae915e0b136f479243e3.png%3F3)
Blossom match with rose,lily,sunflower,tulips,and daisy. Vibrant.. In-Game asset. 2d. High contrast. No shadows
Used plugins
@upit/tween@upit/storage
