Play
Creation History
User prompt
Particles of word shoild have random colors but allt he particles of a word the same color amonst them
User prompt
Particles in word shoild have rabdom colors
User prompt
The color of the particles of the words should be random but all have tge same color
User prompt
But the prticles of the word should have the same cllor
User prompt
The particles in the word should also have random colors every time they are formed
User prompt
Words letters should also be random
User prompt
Each particle shoild have a different random bright fluor color, even the unused ones
User prompt
Down word is still not centered. Fix it please
User prompt
Center Down word too
User prompt
Center the word Left
User prompt
Center the unused particles
User prompt
Up left and down are not centered. Plase center them.
User prompt
Right does not fit in the screen adjust it please
User prompt
Direction words are not very clear can you make them more reqdable. Also add a lot of colour
User prompt
Remove the text that says wipe the direction and also cneter the text that tells qhich direction
User prompt
Use the paricle and the movement but end up forming the word up down left or rigth and player has to swipe that way to add a pount ↪💡 Consider importing and using the following plugins: @upit/tween.v1
User prompt
I just want a simple tap game, using all this tween effects. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
Remix started
Copy Tween toy
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var Particle = Container.expand(function () {
var self = Container.call(this);
var particleGraphics = self.attachAsset('particle', {
anchorX: 0.5,
anchorY: 0.5
});
self.tint = 0xffffff * Math.random();
self.rotation = Math.PI * 2 * Math.random();
particleGraphics.blendMode = 1;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x000000 //Init game with black background
});
/****
* Game Code
****/
var scoreDisplay;
for (var i = 0; i < 500; i++) {
var particle = game.addChild(new Particle());
var angle = Math.random() * Math.PI * 2;
var radius = Math.random() * 200;
particle.x = 1024 + Math.cos(angle) * radius;
particle.y = 1366 + Math.sin(angle) * radius;
particle.scale.set(4, 4);
}
var clickMeText = new Text2('Click Me', {
size: 150,
fill: 0x000000,
weight: 800
});
clickMeText.anchor.set(0.5, 0.5);
clickMeText.x = 2048 / 2;
clickMeText.y = 2732 / 2;
game.addChild(clickMeText);
// Create a grid of positions for the particles
var gridPositions = [];
var gridSize = 13;
var elementWidth = 150; // width of the particle element
for (var i = 0; i < gridSize; i++) {
for (var j = 0; j < gridSize + 4; j++) {
gridPositions.push({
x: i * elementWidth + elementWidth / 2 + (2048 - elementWidth * gridSize) / 2,
y: j * elementWidth + elementWidth / 2 + (2732 - elementWidth * (gridSize + 4)) / 2
});
}
}
// Initialize score display
scoreDisplay = new Text2(LK.getScore().toString(), {
size: 100,
// Set a nice size for the score
fill: 0xFFFFFF // White color for visibility
});
scoreDisplay.anchor.set(0.5, 0); // Anchor to its top-center point
LK.gui.top.addChild(scoreDisplay); // Add to the GUI at the top-center of the screen
game.down = function () {
// Increment score
LK.setScore(LK.getScore() + 1);
// Update score display (ensure scoreDisplay is initialized and LK.getScore() is converted to string)
if (scoreDisplay) {
scoreDisplay.setText(LK.getScore().toString());
}
// Check for win condition (e.g., score of 10)
if (LK.getScore() >= 10) {
LK.showYouWin();
return; // Stop further execution if game is won
}
if (clickMeText) {
tween(clickMeText, {
y: -200
}, {
duration: 500,
easing: tween.easeIn,
onFinish: function onFinish() {
if (clickMeText) {
clickMeText.destroy();
clickMeText = null;
}
}
});
}
var tweenFunctions = [tween.linear, tween.easeIn, tween.easeOut, tween.elasticIn, tween.elasticOut, tween.bounceIn, tween.bounceOut, tween.easeInOut, tween.bounceInOut, tween.elasticInOut];
var randomTweenFunction = tweenFunctions[Math.floor(Math.random() * tweenFunctions.length)];
var setupType = Math.random();
var sizeRand = Math.random() * 2;
var radius = Math.random() * 1000; // Radius for the circular particle formation
var tweenLength = 1200 * Math.random() + 300;
var tweenDelay = Math.random() * 3;
// Filter game.children to get only Particle instances for robust animation logic
var particles = [];
for (var k = 0; k < game.children.length; k++) {
if (game.children[k] instanceof Particle) {
particles.push(game.children[k]);
}
}
var numParticles = particles.length;
particles.forEach(function (child, particleIndex) {
// particleIndex is 0 to numParticles-1
var size = Math.random() * sizeRand;
var targetPosition;
// One third of the time, use a grid position, one third random, one third circle
if (setupType < 0.33) {
// Use particleIndex for grid assignment
if (gridPositions.length > 0) {
targetPosition = gridPositions[particleIndex % gridPositions.length];
} else {
// Fallback if gridPositions is somehow empty
targetPosition = {
x: Math.random() * 2048,
y: Math.random() * 2732
};
}
} else if (setupType < 0.66) {
targetPosition = {
x: Math.random() * 2048,
y: Math.random() * 2732
};
} else {
// Use numParticles and particleIndex for accurate circular arrangement
var angle = numParticles > 0 ? 2 * Math.PI * particleIndex / numParticles : 0;
targetPosition = {
x: 1024 + radius * Math.cos(angle),
y: 1366 + radius * Math.sin(angle)
};
}
tween(child, {
x: targetPosition.x,
y: targetPosition.y,
scaleX: size,
scaleY: size,
rotation: Math.random() * Math.PI * 2,
tint: Math.random() * 0xffffff
}, {
duration: tweenLength,
easing: randomTweenFunction,
delay: particleIndex * tweenDelay // Use particleIndex for consistent delay
});
}); //{y} // Note: original line id {x} for the `if (child instanceof Particle)` block's closing brace is removed as the filter makes it redundant.
}; ===================================================================
--- original.js
+++ change.js
@@ -26,8 +26,9 @@
/****
* Game Code
****/
+var scoreDisplay;
for (var i = 0; i < 500; i++) {
var particle = game.addChild(new Particle());
var angle = Math.random() * Math.PI * 2;
var radius = Math.random() * 200;
@@ -55,9 +56,28 @@
y: j * elementWidth + elementWidth / 2 + (2732 - elementWidth * (gridSize + 4)) / 2
});
}
}
+// Initialize score display
+scoreDisplay = new Text2(LK.getScore().toString(), {
+ size: 100,
+ // Set a nice size for the score
+ fill: 0xFFFFFF // White color for visibility
+});
+scoreDisplay.anchor.set(0.5, 0); // Anchor to its top-center point
+LK.gui.top.addChild(scoreDisplay); // Add to the GUI at the top-center of the screen
game.down = function () {
+ // Increment score
+ LK.setScore(LK.getScore() + 1);
+ // Update score display (ensure scoreDisplay is initialized and LK.getScore() is converted to string)
+ if (scoreDisplay) {
+ scoreDisplay.setText(LK.getScore().toString());
+ }
+ // Check for win condition (e.g., score of 10)
+ if (LK.getScore() >= 10) {
+ LK.showYouWin();
+ return; // Stop further execution if game is won
+ }
if (clickMeText) {
tween(clickMeText, {
y: -200
}, {
@@ -74,41 +94,58 @@
var tweenFunctions = [tween.linear, tween.easeIn, tween.easeOut, tween.elasticIn, tween.elasticOut, tween.bounceIn, tween.bounceOut, tween.easeInOut, tween.bounceInOut, tween.elasticInOut];
var randomTweenFunction = tweenFunctions[Math.floor(Math.random() * tweenFunctions.length)];
var setupType = Math.random();
var sizeRand = Math.random() * 2;
- var radius = Math.random() * 1000;
+ var radius = Math.random() * 1000; // Radius for the circular particle formation
var tweenLength = 1200 * Math.random() + 300;
var tweenDelay = Math.random() * 3;
- game.children.forEach(function (child, index) {
- if (child instanceof Particle) {
- var size = Math.random() * sizeRand;
- var targetPosition;
- // One third of the time, use a grid position, one third of the time use a random position, one third of the time arrange in a circle
- if (setupType < 0.33) {
- targetPosition = gridPositions[index % gridPositions.length];
- } else if (setupType < 0.66) {
+ // Filter game.children to get only Particle instances for robust animation logic
+ var particles = [];
+ for (var k = 0; k < game.children.length; k++) {
+ if (game.children[k] instanceof Particle) {
+ particles.push(game.children[k]);
+ }
+ }
+ var numParticles = particles.length;
+ particles.forEach(function (child, particleIndex) {
+ // particleIndex is 0 to numParticles-1
+ var size = Math.random() * sizeRand;
+ var targetPosition;
+ // One third of the time, use a grid position, one third random, one third circle
+ if (setupType < 0.33) {
+ // Use particleIndex for grid assignment
+ if (gridPositions.length > 0) {
+ targetPosition = gridPositions[particleIndex % gridPositions.length];
+ } else {
+ // Fallback if gridPositions is somehow empty
targetPosition = {
x: Math.random() * 2048,
y: Math.random() * 2732
};
- } else {
- var angle = 2 * Math.PI * index / game.children.length;
- targetPosition = {
- x: 1024 + radius * Math.cos(angle),
- y: 1366 + radius * Math.sin(angle)
- };
}
- tween(child, {
- x: targetPosition.x,
- y: targetPosition.y,
- scaleX: size,
- scaleY: size,
- rotation: Math.random() * Math.PI * 2,
- tint: Math.random() * 0xffffff
- }, {
- duration: tweenLength,
- easing: randomTweenFunction,
- delay: index * tweenDelay
- });
+ } else if (setupType < 0.66) {
+ targetPosition = {
+ x: Math.random() * 2048,
+ y: Math.random() * 2732
+ };
+ } else {
+ // Use numParticles and particleIndex for accurate circular arrangement
+ var angle = numParticles > 0 ? 2 * Math.PI * particleIndex / numParticles : 0;
+ targetPosition = {
+ x: 1024 + radius * Math.cos(angle),
+ y: 1366 + radius * Math.sin(angle)
+ };
}
- });
+ tween(child, {
+ x: targetPosition.x,
+ y: targetPosition.y,
+ scaleX: size,
+ scaleY: size,
+ rotation: Math.random() * Math.PI * 2,
+ tint: Math.random() * 0xffffff
+ }, {
+ duration: tweenLength,
+ easing: randomTweenFunction,
+ delay: particleIndex * tweenDelay // Use particleIndex for consistent delay
+ });
+ }); //{y} // Note: original line id {x} for the `if (child instanceof Particle)` block's closing brace is removed as the filter makes it redundant.
};
\ No newline at end of file
Images
:quality(85)/https://cdn.frvr.ai/6761c5e2b72f3ea1a839ad94.png%3F3)
Used plugins
@upit/tween
