Play
:quality(85)/https:%2F%2Fcdn.frvr.ai/685b0546695ea145576a200d.png)
:quality(85)/https:%2F%2Fcdn.frvr.ai/685c26310c868ef3affd52c6.png)
#cartoon
#bird
#dragon
#fly
#sobrevive
#Dodge Bird
Creation History
User prompt
quiero que le agregues musica de fondo
User prompt
al menu agregale para yo insertar imagen
User prompt
no veo el menu
User prompt
quiero ponerle imagen al menu
User prompt
agregale un menu al inicio por favor
User prompt
el menu esta desapareciendo
User prompt
Please fix the bug: 'Cannot set properties of undefined (setting 'visible')' in or related to this line: 'particle.visible = false; // Ensure particle is hidden initially' Line Number: 244
User prompt
sigue desapareciendo
User prompt
fixea el problema de que el menu desaparesca sin haber iniciado
User prompt
que el menu no se quite solo, que espere a que le de clic en comenzar
User prompt
bien, agregale un menu y eso donde aparesca el record, configuraciones y boton de iniciar el juego, cuando pierda tambien quiero que aparesca un menu donde aparesca boton de iniciar de nuevo y los segundos que duro ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
que los obstaculos no sean transparentes
User prompt
y tambien que cada vez aparescan mas y mas obstaculos
User prompt
tambien quiero un contador del tiempo transcurrido en la parte superior y que entre mas tiempo pasa, mas rapido se mueven los obstaculos, mucho mas rapido
User prompt
quiero que cada vez vayan mas rapido
User prompt
quiero ponerle un fondo
User prompt
mas grande, el doble de grande
User prompt
quiero que las cosas sean mas grande, la particula tambien
User prompt
estoy notando que se pierde sin haber tocado un obstaculo
User prompt
que se vean todos los obstaculos
User prompt
quiero que cada vez sean mas fapidas y que pierda si toca alguna
Code edit (1 edits merged)
Please save this source code
User prompt
Fluye
Initial prompt
Minimalist mobile game UI concept for a relaxing game called "Fluye". The screen shows a soft glowing particle gently floating through a horizontal stream of translucent moving shapes and obstacles. The player controls the particle by dragging. The background is a smooth pastel gradient (sky blue to lavender), with abstract flow lines and a clean, modern interface. Everything feels fluid and zen-like. The particle leaves a light motion trail. Style is ultra-flat, ambient, elegant. No text, no HUD, just a visual mockup of the gameplay with obstacles and soft motion cues.
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1");
/****
* Classes
****/
var Obstacle = Container.expand(function (type) {
var self = Container.call(this);
var assetName = 'obstacle' + (type || 1);
var obstacleGraphics = self.attachAsset(assetName, {
anchorX: 0.5,
anchorY: 0.5
});
// Obstacles are now fully opaque (removed alpha setting)
self.speed = -(currentSpeed + Math.random() * 4); // Speed increases over time - now with more variation
self.update = function () {
self.x += self.speed;
// Gentle floating motion
self.y += Math.sin(LK.ticks * 0.02 + self.x * 0.01) * 0.5;
};
return self;
});
var Particle = Container.expand(function () {
var self = Container.call(this);
var particleGraphics = self.attachAsset('particle', {
anchorX: 0.5,
anchorY: 0.5
});
// Add glow effect
particleGraphics.alpha = 0.9;
self.targetX = 0;
self.targetY = 0;
self.update = function () {
// Smooth movement towards target position
var dx = self.targetX - self.x;
var dy = self.targetY - self.y;
self.x += dx * 0.15;
self.y += dy * 0.15;
// Create trail effect
if (LK.ticks % 3 === 0) {
createTrailDot(self.x, self.y);
}
};
return self;
});
var TrailDot = Container.expand(function () {
var self = Container.call(this);
var dotGraphics = self.attachAsset('trailDot', {
anchorX: 0.5,
anchorY: 0.5
});
self.life = 1.0;
self.fadeSpeed = 0.02;
self.update = function () {
self.life -= self.fadeSpeed;
dotGraphics.alpha = self.life * 0.5;
dotGraphics.scaleX = self.life;
dotGraphics.scaleY = self.life;
if (self.life <= 0) {
self.destroy();
for (var i = trailDots.length - 1; i >= 0; i--) {
if (trailDots[i] === self) {
trailDots.splice(i, 1);
break;
}
}
}
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x87ceeb
});
/****
* Game Code
****/
// Game variables
var particle;
var obstacles = [];
var trailDots = [];
var backgroundColors = [0x87ceeb, 0x9370db, 0xdda0dd, 0xb19cd9];
var colorIndex = 0;
var colorTimer = 0;
var baseSpeed = 2;
var speedIncrement = 0.01;
var currentSpeed = baseSpeed;
var startTime = Date.now();
// Game state management
var gameState = 'menu'; // 'menu', 'playing', 'gameOver'
var bestTime = storage.bestTime || 0;
var currentGameTime = 0;
// Menu elements
var mainMenu;
var gameOverMenu;
var startButton;
var recordText;
var settingsButton;
var restartButton;
var gameOverTimeText;
// Create timer display
var timerText = new Text2('0s', {
size: 80,
fill: 0xFFFFFF
});
timerText.anchor.set(0.5, 0);
timerText.visible = false; // Hide timer initially
LK.gui.top.addChild(timerText);
// Create main menu
mainMenu = new Container();
game.addChild(mainMenu);
// Menu title with background
var titleContainer = new Container();
var titleBg = LK.getAsset('titleBackground', {
anchorX: 0.5,
anchorY: 0.5
});
titleBg.alpha = 0.9;
titleContainer.addChild(titleBg);
var titleText = new Text2('DODGE GAME', {
size: 120,
fill: 0xFFFFFF
});
titleText.anchor.set(0.5, 0.5);
titleContainer.addChild(titleText);
titleContainer.x = 2048 / 2;
titleContainer.y = 600;
mainMenu.addChild(titleContainer);
// Subtitle
var subtitleText = new Text2('Esquiva los obstáculos', {
size: 60,
fill: 0xcccccc
});
subtitleText.anchor.set(0.5, 0.5);
subtitleText.x = 2048 / 2;
subtitleText.y = 750;
mainMenu.addChild(subtitleText);
// Start button
startButton = new Container();
var startBg = LK.getAsset('buttonBackground', {
anchorX: 0.5,
anchorY: 0.5
});
startBg.scaleX = 1.2;
startBg.scaleY = 1.0;
startBg.alpha = 0.9;
startButton.addChild(startBg);
var startText = new Text2('COMENZAR', {
size: 70,
fill: 0xFFFFFF
});
startText.anchor.set(0.5, 0.5);
startButton.addChild(startText);
startButton.x = 2048 / 2;
startButton.y = 1200;
mainMenu.addChild(startButton);
// Record display
recordText = new Text2('Mejor tiempo: ' + bestTime + 's', {
size: 55,
fill: 0xFFD700
});
recordText.anchor.set(0.5, 0.5);
recordText.x = 2048 / 2;
recordText.y = 1450;
mainMenu.addChild(recordText);
// Instructions
var instructionsText = new Text2('Toca y arrastra para moverte', {
size: 45,
fill: 0xaaaaaa
});
instructionsText.anchor.set(0.5, 0.5);
instructionsText.x = 2048 / 2;
instructionsText.y = 1650;
mainMenu.addChild(instructionsText);
// Add decorative menu elements
var leftDecor = LK.getAsset('menuDecoration', {
anchorX: 0.5,
anchorY: 0.5
});
leftDecor.x = 300;
leftDecor.y = 1000;
leftDecor.alpha = 0.4;
leftDecor.rotation = Math.PI / 6;
leftDecor.scaleX = 0.8;
leftDecor.scaleY = 0.8;
mainMenu.addChild(leftDecor);
var rightDecor = LK.getAsset('menuDecoration', {
anchorX: 0.5,
anchorY: 0.5
});
rightDecor.x = 1748;
rightDecor.y = 1200;
rightDecor.alpha = 0.4;
rightDecor.rotation = -Math.PI / 8;
rightDecor.scaleX = 0.9;
rightDecor.scaleY = 0.9;
mainMenu.addChild(rightDecor);
var topDecor = LK.getAsset('menuDecoration', {
anchorX: 0.5,
anchorY: 0.5
});
topDecor.x = 1024;
topDecor.y = 300;
topDecor.alpha = 0.3;
topDecor.scaleX = 1.2;
topDecor.scaleY = 1.2;
mainMenu.addChild(topDecor);
// Start button interaction
startButton.down = function (x, y, obj) {
startGame();
};
// Add background image first (so it's behind everything)
var backgroundImage = LK.getAsset('background', {
anchorX: 0,
anchorY: 0,
x: 0,
y: 0
});
game.addChild(backgroundImage);
// Move background to the back
game.setChildIndex(backgroundImage, 0);
// Add menu-specific background
var menuBgImage = LK.getAsset('menuBackground', {
anchorX: 0,
anchorY: 0,
x: 0,
y: 0
});
menuBgImage.alpha = 0.8;
mainMenu.addChild(menuBgImage);
// Move menu background to back of menu
mainMenu.setChildIndex(menuBgImage, 0);
// Create game over menu
gameOverMenu = new Container();
game.addChild(gameOverMenu);
// Game over title
var gameOverTitle = new Text2('GAME OVER', {
size: 100,
fill: 0xff0000
});
gameOverTitle.anchor.set(0.5, 0.5);
gameOverTitle.x = 2048 / 2;
gameOverTitle.y = 900;
gameOverMenu.addChild(gameOverTitle);
// Game over time display
gameOverTimeText = new Text2('Tiempo: 0s', {
size: 70,
fill: 0xFFFFFF
});
gameOverTimeText.anchor.set(0.5, 0.5);
gameOverTimeText.x = 2048 / 2;
gameOverTimeText.y = 1100;
gameOverMenu.addChild(gameOverTimeText);
// Restart button
restartButton = new Container();
var restartBg = LK.getAsset('buttonBackground', {
anchorX: 0.5,
anchorY: 0.5
});
restartBg.scaleX = 1.1;
restartBg.scaleY = 0.9;
restartBg.alpha = 0.9;
restartButton.addChild(restartBg);
var restartText = new Text2('REINICIAR', {
size: 50,
fill: 0xFFFFFF
});
restartText.anchor.set(0.5, 0.5);
restartButton.addChild(restartText);
restartButton.x = 2048 / 2;
restartButton.y = 1350;
gameOverMenu.addChild(restartButton);
// Restart button interaction
restartButton.down = function (x, y, obj) {
startGame();
};
// Create particle first (before trying to access its properties)
particle = game.addChild(new Particle());
particle.x = 300;
particle.y = 2732 / 2;
particle.targetX = particle.x;
particle.targetY = particle.y;
particle.visible = false; // Hide particle until game starts
// Move particle behind menu elements
game.setChildIndex(particle, 1);
// Initialize menu visibility
mainMenu.visible = true;
gameOverMenu.visible = false;
timerText.visible = false; // Ensure timer is hidden initially
// Ensure game stays in menu state
gameState = 'menu';
// Bring main menu to front to ensure it's visible
game.setChildIndex(mainMenu, game.children.length - 1);
// Game state functions
function startGame() {
gameState = 'playing';
mainMenu.visible = false;
gameOverMenu.visible = false;
timerText.visible = true;
// Reset game variables
startTime = Date.now();
currentSpeed = baseSpeed;
colorIndex = 0;
colorTimer = 0;
// Clear obstacles and trail dots
for (var i = obstacles.length - 1; i >= 0; i--) {
obstacles[i].destroy();
}
obstacles = [];
for (var j = trailDots.length - 1; j >= 0; j--) {
trailDots[j].destroy();
}
trailDots = [];
// Reset and show particle
particle.x = 300;
particle.y = 2732 / 2;
particle.targetX = particle.x;
particle.targetY = particle.y;
particle.visible = true;
}
function showGameOver() {
gameState = 'gameOver';
currentGameTime = Math.floor((Date.now() - startTime) / 1000);
// Update best time if current time is better
if (currentGameTime > bestTime) {
bestTime = currentGameTime;
storage.bestTime = bestTime;
recordText.setText('Record: ' + bestTime + 's');
}
// Update game over display
gameOverTimeText.setText('Tiempo: ' + currentGameTime + 's');
gameOverMenu.visible = true;
}
// Particle already created above
// Background gradient animation
function updateBackgroundColor() {
colorTimer++;
if (colorTimer >= 300) {
// Change color every 5 seconds at 60fps
colorTimer = 0;
colorIndex = (colorIndex + 1) % backgroundColors.length;
// Smooth color transition
var currentColor = game.backgroundColor;
var targetColor = backgroundColors[colorIndex];
tween(game, {
backgroundColor: targetColor
}, {
duration: 3000,
easing: tween.easeInOut
});
}
}
// Create trail dot function
function createTrailDot(x, y) {
var dot = new TrailDot();
dot.x = x + (Math.random() - 0.5) * 10;
dot.y = y + (Math.random() - 0.5) * 10;
trailDots.push(dot);
game.addChild(dot);
}
// Spawn obstacles
function spawnObstacle() {
var obstacleType = Math.floor(Math.random() * 3) + 1;
var obstacle = new Obstacle(obstacleType);
obstacle.x = 2048 + 100;
obstacle.y = 200 + Math.random() * (2732 - 400); // Keep obstacles within reasonable bounds
obstacles.push(obstacle);
game.addChild(obstacle);
}
// Handle collision with game over
function handleCollision(particle, obstacle) {
// Flash the screen red briefly before game over
LK.effects.flashScreen(0xff0000, 500);
// Show game over after a brief delay
LK.setTimeout(function () {
showGameOver();
}, 300);
}
// Touch/drag controls
game.down = function (x, y, obj) {
if (gameState === 'playing') {
particle.targetX = x;
particle.targetY = y;
}
};
game.move = function (x, y, obj) {
if (gameState === 'playing') {
particle.targetX = x;
particle.targetY = y;
}
};
// Main game update
game.update = function () {
// Only update background color animation
updateBackgroundColor();
// Only run game logic if playing
if (gameState !== 'playing') {
return; // Don't update game logic if not playing
}
// Update timer display
var elapsedTime = Math.floor((Date.now() - startTime) / 1000);
timerText.setText(elapsedTime + 's');
// Gradually increase speed over time - accelerates much more rapidly with elapsed time
var timeMultiplier = 1 + elapsedTime * 0.3; // Speed increases dramatically with time
currentSpeed = baseSpeed * timeMultiplier;
// Spawn obstacles periodically - frequency increases over time
var elapsedTimeForSpawn = Math.floor((Date.now() - startTime) / 1000);
var spawnRate = Math.max(30, 120 - elapsedTimeForSpawn * 2); // Start at 120 ticks (2 seconds), decrease to minimum 30 ticks (0.5 seconds)
if (LK.ticks % spawnRate === 0) {
spawnObstacle();
// Spawn additional obstacles as time progresses
if (elapsedTimeForSpawn > 10 && LK.ticks % (spawnRate * 2) === 0) {
spawnObstacle();
}
if (elapsedTimeForSpawn > 20 && LK.ticks % (spawnRate * 3) === 0) {
spawnObstacle();
}
}
// Update and clean up obstacles
for (var i = obstacles.length - 1; i >= 0; i--) {
var obstacle = obstacles[i];
// Remove obstacles that have moved off screen
if (obstacle.x < -200) {
obstacle.destroy();
obstacles.splice(i, 1);
continue;
}
// Check collision with particle
if (particle.intersects(obstacle)) {
handleCollision(particle, obstacle);
}
}
// Clean up old trail dots (safety check)
if (trailDots.length > 100) {
var oldDot = trailDots.shift();
if (oldDot && oldDot.parent) {
oldDot.destroy();
}
}
}; ===================================================================
--- original.js
+++ change.js
@@ -117,16 +117,13 @@
mainMenu = new Container();
game.addChild(mainMenu);
// Menu title with background
var titleContainer = new Container();
-var titleBg = LK.getAsset('particle', {
+var titleBg = LK.getAsset('titleBackground', {
anchorX: 0.5,
anchorY: 0.5
});
-titleBg.scaleX = 3;
-titleBg.scaleY = 1.5;
-titleBg.tint = 0x4a4a4a;
-titleBg.alpha = 0.7;
+titleBg.alpha = 0.9;
titleContainer.addChild(titleBg);
var titleText = new Text2('DODGE GAME', {
size: 120,
fill: 0xFFFFFF
@@ -146,15 +143,14 @@
subtitleText.y = 750;
mainMenu.addChild(subtitleText);
// Start button
startButton = new Container();
-var startBg = LK.getAsset('particle', {
+var startBg = LK.getAsset('buttonBackground', {
anchorX: 0.5,
anchorY: 0.5
});
-startBg.scaleX = 2.5;
-startBg.scaleY = 1.2;
-startBg.tint = 0x00ff00;
+startBg.scaleX = 1.2;
+startBg.scaleY = 1.0;
startBg.alpha = 0.9;
startButton.addChild(startBg);
var startText = new Text2('COMENZAR', {
size: 70,
@@ -183,35 +179,39 @@
instructionsText.x = 2048 / 2;
instructionsText.y = 1650;
mainMenu.addChild(instructionsText);
// Add decorative menu elements
-var leftDecor = LK.getAsset('obstacle2', {
+var leftDecor = LK.getAsset('menuDecoration', {
anchorX: 0.5,
anchorY: 0.5
});
leftDecor.x = 300;
leftDecor.y = 1000;
-leftDecor.alpha = 0.3;
+leftDecor.alpha = 0.4;
leftDecor.rotation = Math.PI / 6;
+leftDecor.scaleX = 0.8;
+leftDecor.scaleY = 0.8;
mainMenu.addChild(leftDecor);
-var rightDecor = LK.getAsset('obstacle3', {
+var rightDecor = LK.getAsset('menuDecoration', {
anchorX: 0.5,
anchorY: 0.5
});
rightDecor.x = 1748;
rightDecor.y = 1200;
-rightDecor.alpha = 0.3;
+rightDecor.alpha = 0.4;
rightDecor.rotation = -Math.PI / 8;
+rightDecor.scaleX = 0.9;
+rightDecor.scaleY = 0.9;
mainMenu.addChild(rightDecor);
-var topDecor = LK.getAsset('particle', {
+var topDecor = LK.getAsset('menuDecoration', {
anchorX: 0.5,
anchorY: 0.5
});
topDecor.x = 1024;
topDecor.y = 300;
-topDecor.alpha = 0.2;
-topDecor.scaleX = 1.5;
-topDecor.scaleY = 1.5;
+topDecor.alpha = 0.3;
+topDecor.scaleX = 1.2;
+topDecor.scaleY = 1.2;
mainMenu.addChild(topDecor);
// Start button interaction
startButton.down = function (x, y, obj) {
startGame();
@@ -225,8 +225,19 @@
});
game.addChild(backgroundImage);
// Move background to the back
game.setChildIndex(backgroundImage, 0);
+// Add menu-specific background
+var menuBgImage = LK.getAsset('menuBackground', {
+ anchorX: 0,
+ anchorY: 0,
+ x: 0,
+ y: 0
+});
+menuBgImage.alpha = 0.8;
+mainMenu.addChild(menuBgImage);
+// Move menu background to back of menu
+mainMenu.setChildIndex(menuBgImage, 0);
// Create game over menu
gameOverMenu = new Container();
game.addChild(gameOverMenu);
// Game over title
@@ -248,15 +259,14 @@
gameOverTimeText.y = 1100;
gameOverMenu.addChild(gameOverTimeText);
// Restart button
restartButton = new Container();
-var restartBg = LK.getAsset('particle', {
+var restartBg = LK.getAsset('buttonBackground', {
anchorX: 0.5,
anchorY: 0.5
});
-restartBg.scaleX = 2.2;
-restartBg.scaleY = 1.1;
-restartBg.tint = 0xffaa00;
+restartBg.scaleX = 1.1;
+restartBg.scaleY = 0.9;
restartBg.alpha = 0.9;
restartButton.addChild(restartBg);
var restartText = new Text2('REINICIAR', {
size: 50,
Showing 1 to 24 of 24
Images
:quality(85)/https:%2F%2Fcdn.frvr.ai/685b0771695ea145576a203d.png%3F3)
ave volando version caricatura. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/685b08ab695ea145576a2067.png%3F3)
un dragon caricatura volando mirando hacia la izquierda. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/685b0977695ea145576a2089.png%3F3)
perro colgado de un globo version caricatura. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/685b0a3e695ea145576a2091.png%3F3)
fondo de caricatura 2d, en la parte de abajo se vea edificios de ciudad y el 70% que sea del cielo. In-Game asset. 2d. High contrast. No shadows
:quality(85)/https:%2F%2Fcdn.frvr.ai/685b112d695ea145576a2181.png%3F3)
rectangulo para insertar texto ancho 800x200. In-Game asset. 2d. High contrast. No shadows
Sounds & Music
Used plugins
@upit/tween@upit/storage
