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; var isNotDirection = false; // 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() * 300; 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 = { NOT: [ // N - positioned above direction words { x: 824, y: 900 }, { x: 824, y: 950 }, { x: 824, y: 1000 }, { x: 824, y: 1050 }, { x: 874, y: 920 }, { x: 924, y: 940 }, { x: 974, y: 960 }, { x: 1024, y: 980 }, { x: 1074, y: 900 }, { x: 1074, y: 950 }, { x: 1074, y: 1000 }, { x: 1074, y: 1050 }, // O { x: 1224, y: 920 }, { x: 1224, y: 1030 }, { x: 1274, y: 900 }, { x: 1324, y: 900 }, { x: 1374, y: 920 }, { x: 1374, y: 1030 }, { x: 1274, y: 1050 }, { x: 1324, y: 1050 }, // T { x: 1524, y: 900 }, { x: 1624, y: 900 }, { x: 1724, y: 900 }, { x: 1624, y: 950 }, { x: 1624, y: 1000 }, { x: 1624, y: 1050 }], 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'; } } // Check if correct swipe based on whether NOT is shown var isCorrectSwipe = false; if (isNotDirection) { // NOT direction - correct if swiped in any direction except the shown one isCorrectSwipe = detectedDirection !== null && detectedDirection !== currentDirection; } else { // Normal direction - correct if swiped in the shown direction isCorrectSwipe = detectedDirection === currentDirection; } if (isCorrectSwipe) { // Correct swipe! 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 }; // Randomly decide if this should be a NOT direction isNotDirection = Math.random() < 0.5; // 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 = 400 + Math.random() * 800; 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 () { // Track particles used for NOT text game.notParticles = game.notParticles || []; // Show NOT text if needed if (isNotDirection) { // Get positions for NOT var notPositions = letterPositions.NOT.slice(); // Shuffle positions for (var i = notPositions.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = notPositions[i]; notPositions[i] = notPositions[j]; notPositions[j] = temp; } // Red color for NOT var notColor = 0xFF0000; // Form NOT with particles notPositions.forEach(function (pos, index) { if (particles[index]) { var particle = particles[index]; game.notParticles.push(particle); // Clear cloud parameters delete particle.cloudAngle; delete particle.cloudRadius; delete particle.cloudSpeed; delete particle.driftSpeed; tween(particle, { x: pos.x, y: pos.y, scaleX: 1.5, scaleY: 1.5, rotation: 0, tint: notColor }, { duration: 500, easing: tween.bounceOut, delay: index * 5 }); } }); } else { // Clear NOT particles game.notParticles = []; } // 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(); // Calculate starting index for direction particles (after NOT particles if shown) var notParticleCount = isNotDirection ? letterPositions.NOT.length : 0; particles.forEach(function (particle, index) { if (index >= notParticleCount && index < notParticleCount + positions.length) { var posIndex = index - notParticleCount; // 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[posIndex].x, y: positions[posIndex].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 - notParticleCount) * 10 + 600 }); } else { // Extra particles float around in cloud-like motion var angle = Math.random() * Math.PI * 2; var radius = 300 + Math.random() * 400; 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) * 0.5; var wiggleY = Math.cos(Date.now() * 0.003 + i) * 0.5; 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
@@ -77,8 +77,93 @@
particle.driftSpeed = 0.5 + Math.random() * 1;
}
// Create letter positions for directional words - centered on screen
var letterPositions = {
+ NOT: [
+ // N - positioned above direction words
+ {
+ x: 824,
+ y: 900
+ }, {
+ x: 824,
+ y: 950
+ }, {
+ x: 824,
+ y: 1000
+ }, {
+ x: 824,
+ y: 1050
+ }, {
+ x: 874,
+ y: 920
+ }, {
+ x: 924,
+ y: 940
+ }, {
+ x: 974,
+ y: 960
+ }, {
+ x: 1024,
+ y: 980
+ }, {
+ x: 1074,
+ y: 900
+ }, {
+ x: 1074,
+ y: 950
+ }, {
+ x: 1074,
+ y: 1000
+ }, {
+ x: 1074,
+ y: 1050
+ },
+ // O
+ {
+ x: 1224,
+ y: 920
+ }, {
+ x: 1224,
+ y: 1030
+ }, {
+ x: 1274,
+ y: 900
+ }, {
+ x: 1324,
+ y: 900
+ }, {
+ x: 1374,
+ y: 920
+ }, {
+ x: 1374,
+ y: 1030
+ }, {
+ x: 1274,
+ y: 1050
+ }, {
+ x: 1324,
+ y: 1050
+ },
+ // T
+ {
+ x: 1524,
+ y: 900
+ }, {
+ x: 1624,
+ y: 900
+ }, {
+ x: 1724,
+ y: 900
+ }, {
+ x: 1624,
+ y: 950
+ }, {
+ x: 1624,
+ y: 1000
+ }, {
+ x: 1624,
+ y: 1050
+ }],
UP: [
// U
{
x: 724,
@@ -577,9 +662,9 @@
}
}
// Check if correct swipe based on whether NOT is shown
var isCorrectSwipe = false;
- if (game.notText && game.notText.visible) {
+ if (isNotDirection) {
// NOT direction - correct if swiped in any direction except the shown one
isCorrectSwipe = detectedDirection !== null && detectedDirection !== currentDirection;
} else {
// Normal direction - correct if swiped in the shown direction
@@ -646,34 +731,50 @@
});
});
// After scatter, form the word
LK.setTimeout(function () {
+ // Track particles used for NOT text
+ game.notParticles = game.notParticles || [];
// Show NOT text if needed
if (isNotDirection) {
- // Create NOT text
- if (!game.notText) {
- game.notText = new Text2('NOT', {
- size: 150,
- fill: 0xFF0000 // Red color for NOT
- });
- game.notText.anchor.set(0.5, 0.5);
- game.addChild(game.notText);
+ // Get positions for NOT
+ var notPositions = letterPositions.NOT.slice();
+ // Shuffle positions
+ for (var i = notPositions.length - 1; i > 0; i--) {
+ var j = Math.floor(Math.random() * (i + 1));
+ var temp = notPositions[i];
+ notPositions[i] = notPositions[j];
+ notPositions[j] = temp;
}
- game.notText.visible = true;
- game.notText.x = 1024;
- game.notText.y = 1000; // Position above the direction word
- game.notText.alpha = 0;
- // Animate NOT text appearance
- tween(game.notText, {
- alpha: 1,
- scaleX: 1.2,
- scaleY: 1.2
- }, {
- duration: 500,
- easing: tween.bounceOut
+ // Red color for NOT
+ var notColor = 0xFF0000;
+ // Form NOT with particles
+ notPositions.forEach(function (pos, index) {
+ if (particles[index]) {
+ var particle = particles[index];
+ game.notParticles.push(particle);
+ // Clear cloud parameters
+ delete particle.cloudAngle;
+ delete particle.cloudRadius;
+ delete particle.cloudSpeed;
+ delete particle.driftSpeed;
+ tween(particle, {
+ x: pos.x,
+ y: pos.y,
+ scaleX: 1.5,
+ scaleY: 1.5,
+ rotation: 0,
+ tint: notColor
+ }, {
+ duration: 500,
+ easing: tween.bounceOut,
+ delay: index * 5
+ });
+ }
});
- } else if (game.notText) {
- game.notText.visible = false;
+ } else {
+ // Clear NOT particles
+ game.notParticles = [];
}
// Clone and shuffle the letter positions for the current direction
var positions = letterPositions[currentDirection].slice();
for (var i = positions.length - 1; i > 0; i--) {
@@ -685,19 +786,22 @@
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();
+ // Calculate starting index for direction particles (after NOT particles if shown)
+ var notParticleCount = isNotDirection ? letterPositions.NOT.length : 0;
particles.forEach(function (particle, index) {
- if (index < positions.length) {
+ if (index >= notParticleCount && index < notParticleCount + positions.length) {
+ var posIndex = index - notParticleCount;
// 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,
+ x: positions[posIndex].x,
+ y: positions[posIndex].y,
scaleX: 1.2,
// Increased scale for better readability
scaleY: 1.2,
// Increased scale for better readability
@@ -705,9 +809,9 @@
tint: wordColor // Same color for all particles in the word
}, {
duration: 800,
easing: randomTweenFunction,
- delay: index * 10
+ delay: (index - notParticleCount) * 10 + 600
});
} else {
// Extra particles float around in cloud-like motion
var angle = Math.random() * Math.PI * 2;