Play
Creation History
User prompt
when timer ir reseted it should go back to 100%
User prompt
make sure timer does a full circle
User prompt
Nice! lets move score and the timer a little lower though since timer is cut off. Timer should be seen completely
User prompt
Lets implemente the circular ting arround the score
User prompt
Can you optimize the code to reuse lines. For example do not write again down up left and right for when they have NOT. just add the NOT and keep the other words in their original position
User prompt
Center all Not messages. Both the not and the directio
User prompt
Game over should happen when player misses
User prompt
Please fix the bug: 'Cannot read properties of undefined (reading 'addChild')' in or related to this line: 'var particle = scoreContainer.addChild(new Particle());' Line Number: 104
User prompt
Please fix the bug: 'Cannot read properties of undefined (reading '0')' in or related to this line: 'var pattern = digitPatterns[digit];' Line Number: 85
User prompt
Please fix the bug: 'Cannot read properties of undefined (reading 'forEach')' in or related to this line: 'scoreParticles.forEach(function (particle) {' Line Number: 72
User prompt
Score numbers should also be formed by particles but score should still be tracked
User prompt
When not words appear make sure also the direction word below not is also centered
User prompt
Make sure not words are also centered
User prompt
Add more words to the game. they will be Not right, not left, not up, and not down. Should be in two lines one over the other. Logically when this appear, player shoild awipe in any of the other 3 directions to win a point
User prompt
NOT word shoild also use particles!
User prompt
Randomly add the word NOT on top of the direction which means player should swipe in any direction but that one
User prompt
Make words wiggle radius smaller
User prompt
Make particle cloud a litttle bugger
User prompt
Particles in word shoild not move in the cloud, rhey should have a very small wiggle
User prompt
Particles in bacground should be always moving withi the cloud shape it has
/****
* 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.originalTint = getRandomFluorescentColor();
self.tint = self.originalTint;
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;
var currentDirection = null;
var swipeStartX = null;
var swipeStartY = null;
var isCorrectSwipe = false;
var canSwipe = true;
// Function to generate bright fluorescent colors
function getRandomFluorescentColor() {
var fluorColors = [0xFF00FF,
// Magenta
0x00FFFF,
// Cyan
0xFFFF00,
// Yellow
0x00FF00,
// Lime
0xFF0080,
// Hot Pink
0x80FF00,
// Chartreuse
0xFF8000,
// Orange
0x00FF80,
// Spring Green
0x8000FF,
// Purple
0xFF0040,
// Rose
0x40FF00,
// Green Yellow
0x00FFBF // Turquoise
];
return fluorColors[Math.floor(Math.random() * fluorColors.length)];
}
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);
// Initialize cloud movement parameters
particle.cloudAngle = angle;
particle.cloudRadius = radius;
particle.cloudSpeed = 0.01 + Math.random() * 0.02;
particle.driftSpeed = 0.5 + Math.random() * 1;
}
// Create letter positions for directional words - centered on screen
var letterPositions = {
UP: [
// U
{
x: 724,
y: 1200
}, {
x: 724,
y: 1300
}, {
x: 724,
y: 1400
}, {
x: 724,
y: 1500
}, {
x: 824,
y: 1500
}, {
x: 924,
y: 1500
}, {
x: 1024,
y: 1200
}, {
x: 1024,
y: 1300
}, {
x: 1024,
y: 1400
}, {
x: 1024,
y: 1500
},
// P
{
x: 1224,
y: 1200
}, {
x: 1224,
y: 1300
}, {
x: 1224,
y: 1400
}, {
x: 1224,
y: 1500
}, {
x: 1324,
y: 1200
}, {
x: 1424,
y: 1200
}, {
x: 1424,
y: 1300
}, {
x: 1324,
y: 1350
}, {
x: 1424,
y: 1350
}],
DOWN: [
// D
{
x: 324,
y: 1200
}, {
x: 324,
y: 1300
}, {
x: 324,
y: 1400
}, {
x: 324,
y: 1500
}, {
x: 424,
y: 1200
}, {
x: 524,
y: 1250
}, {
x: 524,
y: 1450
}, {
x: 424,
y: 1500
},
// O
{
x: 724,
y: 1250
}, {
x: 724,
y: 1450
}, {
x: 774,
y: 1200
}, {
x: 874,
y: 1200
}, {
x: 924,
y: 1250
}, {
x: 924,
y: 1450
}, {
x: 774,
y: 1500
}, {
x: 874,
y: 1500
},
// W
{
x: 1124,
y: 1200
}, {
x: 1144,
y: 1300
}, {
x: 1164,
y: 1400
}, {
x: 1184,
y: 1500
}, {
x: 1274,
y: 1400
}, {
x: 1364,
y: 1400
}, {
x: 1384,
y: 1500
}, {
x: 1404,
y: 1400
}, {
x: 1424,
y: 1300
}, {
x: 1444,
y: 1200
},
// N
{
x: 1574,
y: 1200
}, {
x: 1574,
y: 1300
}, {
x: 1574,
y: 1400
}, {
x: 1574,
y: 1500
}, {
x: 1644,
y: 1280
}, {
x: 1714,
y: 1360
}, {
x: 1784,
y: 1440
}, {
x: 1854,
y: 1200
}, {
x: 1854,
y: 1300
}, {
x: 1854,
y: 1400
}, {
x: 1854,
y: 1500
}],
LEFT: [
// L
{
x: 424,
y: 1200
}, {
x: 424,
y: 1300
}, {
x: 424,
y: 1400
}, {
x: 424,
y: 1500
}, {
x: 524,
y: 1500
}, {
x: 624,
y: 1500
},
// E
{
x: 824,
y: 1200
}, {
x: 824,
y: 1300
}, {
x: 824,
y: 1400
}, {
x: 824,
y: 1500
}, {
x: 924,
y: 1200
}, {
x: 1024,
y: 1200
}, {
x: 924,
y: 1350
}, {
x: 924,
y: 1500
}, {
x: 1024,
y: 1500
},
// F
{
x: 1224,
y: 1200
}, {
x: 1224,
y: 1300
}, {
x: 1224,
y: 1400
}, {
x: 1224,
y: 1500
}, {
x: 1324,
y: 1200
}, {
x: 1424,
y: 1200
}, {
x: 1324,
y: 1350
},
// T
{
x: 1624,
y: 1200
}, {
x: 1724,
y: 1200
}, {
x: 1824,
y: 1200
}, {
x: 1724,
y: 1300
}, {
x: 1724,
y: 1400
}, {
x: 1724,
y: 1500
}],
RIGHT: [
// Shifted left by 225px to fit on screen
// R
{
x: 49,
// 274 - 225
y: 1200
}, {
x: 49,
// 274 - 225
y: 1300
}, {
x: 49,
// 274 - 225
y: 1400
}, {
x: 49,
// 274 - 225
y: 1500
}, {
x: 149,
// 374 - 225
y: 1200
}, {
x: 249,
// 474 - 225
y: 1200
}, {
x: 249,
// 474 - 225
y: 1300
}, {
x: 149,
// 374 - 225
y: 1350
}, {
x: 249,
// 474 - 225
y: 1400
}, {
x: 349,
// 574 - 225
y: 1500
},
// I
{
x: 549,
// 774 - 225
y: 1200
}, {
x: 649,
// 874 - 225
y: 1200
}, {
x: 749,
// 974 - 225
y: 1200
}, {
x: 649,
// 874 - 225
y: 1300
}, {
x: 649,
// 874 - 225
y: 1400
}, {
x: 549,
// 774 - 225
y: 1500
}, {
x: 649,
// 874 - 225
y: 1500
}, {
x: 749,
// 974 - 225
y: 1500
},
// G
{
x: 949,
// 1174 - 225
y: 1250
}, {
x: 999,
// 1224 - 225
y: 1200
}, {
x: 1099,
// 1324 - 225
y: 1200
}, {
x: 1149,
// 1374 - 225
y: 1200
}, {
x: 949,
// 1174 - 225
y: 1350
}, {
x: 949,
// 1174 - 225
y: 1450
}, {
x: 999,
// 1224 - 225
y: 1500
}, {
x: 1099,
// 1324 - 225
y: 1500
}, {
x: 1149,
// 1374 - 225
y: 1450
}, {
x: 1149,
// 1374 - 225
y: 1400
}, {
x: 1099,
// 1324 - 225
y: 1400
},
// H
{
x: 1349,
// 1574 - 225
y: 1200
}, {
x: 1349,
// 1574 - 225
y: 1300
}, {
x: 1349,
// 1574 - 225
y: 1400
}, {
x: 1349,
// 1574 - 225
y: 1500
}, {
x: 1449,
// 1674 - 225
y: 1350
}, {
x: 1549,
// 1774 - 225
y: 1350
}, {
x: 1649,
// 1874 - 225
y: 1200
}, {
x: 1649,
// 1874 - 225
y: 1300
}, {
x: 1649,
// 1874 - 225
y: 1400
}, {
x: 1649,
// 1874 - 225
y: 1500
},
// T
{
x: 1799,
// 2024 - 225
y: 1200
}, {
x: 1899,
// 2124 - 225
y: 1200
}, {
x: 1999,
// 2224 - 225
y: 1200
}, {
x: 1899,
// 2124 - 225
y: 1300
}, {
x: 1899,
// 2124 - 225
y: 1400
}, {
x: 1899,
// 2124 - 225
y: 1500
}]
};
// 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.move = function (x, y) {
// Not used for swipe detection, but required by engine
};
game.up = function (x, y) {
if (!canSwipe || swipeStartX === null || swipeStartY === null) return;
var swipeDeltaX = x - swipeStartX;
var swipeDeltaY = y - swipeStartY;
var swipeThreshold = 100;
var detectedDirection = null;
if (Math.abs(swipeDeltaX) > Math.abs(swipeDeltaY)) {
if (swipeDeltaX > swipeThreshold) {
detectedDirection = 'RIGHT';
} else if (swipeDeltaX < -swipeThreshold) {
detectedDirection = 'LEFT';
}
} else {
if (swipeDeltaY > swipeThreshold) {
detectedDirection = 'DOWN';
} else if (swipeDeltaY < -swipeThreshold) {
detectedDirection = 'UP';
}
}
if (detectedDirection === currentDirection) {
// Correct swipe!
isCorrectSwipe = true;
LK.setScore(LK.getScore() + 1);
scoreDisplay.setText(LK.getScore().toString());
// Flash green for correct
LK.effects.flashScreen(0x00FF00, 300);
// Check win condition
if (LK.getScore() >= 20) {
LK.showYouWin();
return;
}
// Start next round
canSwipe = false;
showNextDirection();
} else if (detectedDirection !== null) {
// Wrong swipe
LK.effects.flashScreen(0xFF0000, 300);
}
swipeStartX = null;
swipeStartY = null;
};
function showNextDirection() {
// Choose random direction
var directions = ['UP', 'DOWN', 'LEFT', 'RIGHT'];
currentDirection = directions[Math.floor(Math.random() * directions.length)];
var directionColors = {
UP: 0xFFFF00,
// Bright Yellow
DOWN: 0x00FFFF,
// Bright Cyan
LEFT: 0x00FF00,
// Bright Green
RIGHT: 0xFF00FF // Bright Magenta
};
// Get particles
var particles = [];
for (var i = 0; i < game.children.length; i++) {
if (game.children[i] instanceof Particle) {
particles.push(game.children[i]);
}
}
// Animate particles to scatter first
var scatterDuration = 500;
particles.forEach(function (particle, index) {
var angle = Math.random() * Math.PI * 2;
var radius = 300 + Math.random() * 700;
tween(particle, {
x: 1024 + Math.cos(angle) * radius,
y: 1366 + Math.sin(angle) * radius,
scaleX: 0.5,
scaleY: 0.5,
rotation: Math.random() * Math.PI * 2,
tint: particle.originalTint
}, {
duration: scatterDuration,
easing: tween.easeOut
});
});
// After scatter, form the word
LK.setTimeout(function () {
// Clone and shuffle the letter positions for the current direction
var positions = letterPositions[currentDirection].slice();
for (var i = positions.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = positions[i];
positions[i] = positions[j];
positions[j] = temp;
}
var tweenFunctions = [tween.easeIn, tween.easeOut, tween.elasticOut, tween.bounceOut, tween.easeInOut];
var randomTweenFunction = tweenFunctions[Math.floor(Math.random() * tweenFunctions.length)];
// Generate a single random color for all particles in the word
var wordColor = getRandomFluorescentColor();
particles.forEach(function (particle, index) {
if (index < positions.length) {
// Form letter
// Clear cloud parameters so particle is identified as word particle
delete particle.cloudAngle;
delete particle.cloudRadius;
delete particle.cloudSpeed;
delete particle.driftSpeed;
tween(particle, {
x: positions[index].x,
y: positions[index].y,
scaleX: 1.2,
// Increased scale for better readability
scaleY: 1.2,
// Increased scale for better readability
rotation: 0,
tint: wordColor // Same color for all particles in the word
}, {
duration: 800,
easing: randomTweenFunction,
delay: index * 10
});
} else {
// Extra particles float around in cloud-like motion
var angle = Math.random() * Math.PI * 2;
var radius = 200 + Math.random() * 300;
var targetX = 1024 + Math.cos(angle) * radius;
var targetY = 1366 + Math.sin(angle) * radius;
// Store cloud movement parameters on particle
particle.cloudAngle = angle;
particle.cloudRadius = radius;
particle.cloudSpeed = 0.01 + Math.random() * 0.02;
particle.driftSpeed = 0.5 + Math.random() * 1;
tween(particle, {
x: targetX,
y: targetY,
scaleX: 0.2,
scaleY: 0.2,
rotation: Math.random() * Math.PI * 2,
tint: particle.originalTint
}, {
duration: 1000,
easing: tween.linear
});
}
});
// Enable swiping after animation
LK.setTimeout(function () {
canSwipe = true;
}, 900);
}, scatterDuration + 100);
}
// Add continuous movement for background particles
game.update = function () {
// Move particles that are in cloud formation
for (var i = 0; i < game.children.length; i++) {
var particle = game.children[i];
if (particle instanceof Particle) {
// Check if particle is part of the word (not in cloud formation)
if (particle.cloudAngle === undefined) {
// Add small wiggle to word particles
var wiggleX = Math.sin(Date.now() * 0.003 + i) * 2;
var wiggleY = Math.cos(Date.now() * 0.003 + i) * 2;
particle.x = particle.x + wiggleX;
particle.y = particle.y + wiggleY;
} else {
// Original cloud movement for background particles
// Update cloud angle for circular drift
particle.cloudAngle += particle.cloudSpeed;
// Calculate new position within cloud shape
var centerX = 1024;
var centerY = 1366;
var cloudX = centerX + Math.cos(particle.cloudAngle) * particle.cloudRadius;
var cloudY = centerY + Math.sin(particle.cloudAngle) * particle.cloudRadius;
// Add some drift movement
var driftX = Math.sin(Date.now() * 0.001 * particle.driftSpeed) * 20;
var driftY = Math.cos(Date.now() * 0.001 * particle.driftSpeed) * 15;
// Apply movement
particle.x = cloudX + driftX;
particle.y = cloudY + driftY;
// Gentle rotation
particle.rotation += 0.01;
}
}
}
};
// Start the first round
showNextDirection();
game.down = function (x, y) {
if (!canSwipe) return;
swipeStartX = x;
swipeStartY = y;
isCorrectSwipe = false;
}; ===================================================================
--- original.js
+++ change.js
@@ -650,8 +650,13 @@
var wordColor = getRandomFluorescentColor();
particles.forEach(function (particle, index) {
if (index < positions.length) {
// Form letter
+ // Clear cloud parameters so particle is identified as word particle
+ delete particle.cloudAngle;
+ delete particle.cloudRadius;
+ delete particle.cloudSpeed;
+ delete particle.driftSpeed;
tween(particle, {
x: positions[index].x,
y: positions[index].y,
scaleX: 1.2,
@@ -699,24 +704,34 @@
game.update = function () {
// Move particles that are in cloud formation
for (var i = 0; i < game.children.length; i++) {
var particle = game.children[i];
- if (particle instanceof Particle && particle.cloudAngle !== undefined) {
- // Update cloud angle for circular drift
- particle.cloudAngle += particle.cloudSpeed;
- // Calculate new position within cloud shape
- var centerX = 1024;
- var centerY = 1366;
- var cloudX = centerX + Math.cos(particle.cloudAngle) * particle.cloudRadius;
- var cloudY = centerY + Math.sin(particle.cloudAngle) * particle.cloudRadius;
- // Add some drift movement
- var driftX = Math.sin(Date.now() * 0.001 * particle.driftSpeed) * 20;
- var driftY = Math.cos(Date.now() * 0.001 * particle.driftSpeed) * 15;
- // Apply movement
- particle.x = cloudX + driftX;
- particle.y = cloudY + driftY;
- // Gentle rotation
- particle.rotation += 0.01;
+ if (particle instanceof Particle) {
+ // Check if particle is part of the word (not in cloud formation)
+ if (particle.cloudAngle === undefined) {
+ // Add small wiggle to word particles
+ var wiggleX = Math.sin(Date.now() * 0.003 + i) * 2;
+ var wiggleY = Math.cos(Date.now() * 0.003 + i) * 2;
+ particle.x = particle.x + wiggleX;
+ particle.y = particle.y + wiggleY;
+ } else {
+ // Original cloud movement for background particles
+ // Update cloud angle for circular drift
+ particle.cloudAngle += particle.cloudSpeed;
+ // Calculate new position within cloud shape
+ var centerX = 1024;
+ var centerY = 1366;
+ var cloudX = centerX + Math.cos(particle.cloudAngle) * particle.cloudRadius;
+ var cloudY = centerY + Math.sin(particle.cloudAngle) * particle.cloudRadius;
+ // Add some drift movement
+ var driftX = Math.sin(Date.now() * 0.001 * particle.driftSpeed) * 20;
+ var driftY = Math.cos(Date.now() * 0.001 * particle.driftSpeed) * 15;
+ // Apply movement
+ particle.x = cloudX + driftX;
+ particle.y = cloudY + driftY;
+ // Gentle rotation
+ particle.rotation += 0.01;
+ }
}
}
};
// Start the first round
Images
:quality(85)/https://cdn.frvr.ai/6761c5e2b72f3ea1a839ad94.png%3F3)
Used plugins
@upit/tween
