Play
:quality(85)/https://cdn.frvr.ai/6846b26c1b2f037183e290b1.png)
:quality(85)/https://cdn.frvr.ai/6846b2731b2f037183e290b6.png)
#KidsGame
#ColorLearning
#TouchGame
#HandEyeCoordination
#FamilyFun
Creation History
Code edit (2 edits merged)
Please save this source code
User prompt
move high score live's bottom, smaller and same colour
User prompt
add high score ↪💡 Consider importing and using the following plugins: @upit/storage.v1
Code edit (1 edits merged)
Please save this source code
User prompt
“The catching bar should not be colored but use the asset added. The speed should increase slightly each time the score reaches a multiple of 10.”
User prompt
"Lives will not decrease when bubbles of colors that should not be caught fall."
User prompt
"If a bubble of a color not mentioned in the text is caught or missed, lives will not be deducted."
User prompt
"Create a game feature where there is a target color shown on the screen. Only bubbles of this target color can be caught. If a player catches a bubble of a different color, the player loses one life. Catching the correct color allows the game to continue without penalty. Display this information prominently in the center of the screen as text. Update the target color and the on-screen message every 10 seconds." only allow catching the target color.
User prompt
"Create a game feature where there is a target color shown on the screen. Only bubbles of this target color can be caught. If a player catches a bubble of a different color, the player loses one life. Catching the correct color allows the game to continue without penalty. Display this information prominently in the center of the screen as text. Update the target color and the on-screen message every 10 seconds."
User prompt
"Display the word 'Catch' in the center of the screen. Update this word every 10 seconds to reflect the current target color."
User prompt
Please fix the bug: 'Timeout.tick error: Cannot set properties of undefined (setting 'fill')' in or related to this line: 'warningTxt.style.fill = colorMap[targetColor];' Line Number: 165
User prompt
"At the start of the game, display a warning message at the top indicating the target color to catch. Only bubbles of this target color can be catch. Over time, the target color changes, and the warning message updates accordingly."
Code edit (1 edits merged)
Please save this source code
User prompt
Color Catchers
Initial prompt
build a kids game
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
// FallingShape class
var FallingShape = Container.expand(function () {
var self = Container.call(this);
// Pick a random color/shape
var colorList = ['shapeRed', 'shapeBlue', 'shapeGreen', 'shapeYellow', 'shapePurple'];
var colorIdx = Math.floor(Math.random() * colorList.length);
self.shapeId = colorList[colorIdx];
// Attach the shape asset
var shape = self.attachAsset(self.shapeId, {
anchorX: 0.5,
anchorY: 0.5
});
// Set speed (randomize a bit for variety)
self.speed = 12 + Math.floor(Math.random() * 6);
// For collision detection
self.radius = shape.width * 0.5;
// For state tracking
self.caught = false;
self.missed = false;
// Update method called every tick
self.update = function () {
self.y += self.speed;
};
return self;
});
// Player class
var Player = Container.expand(function () {
var self = Container.call(this);
// Attach player asset
var playerShape = self.attachAsset('player', {
anchorX: 0.5,
anchorY: 0.5
});
// For collision detection
self.width = playerShape.width;
self.height = playerShape.height;
// For touch feedback
self.flash = function () {
tween(self, {
alpha: 0.5
}, {
duration: 80,
onFinish: function onFinish() {
tween(self, {
alpha: 1
}, {
duration: 120
});
}
});
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xf0f8ff // Light blue background
});
/****
* Game Code
****/
// Game constants
// Shapes for falling objects (different colors)
// Player character
// Sound effects
// Music
var GAME_WIDTH = 2048;
var GAME_HEIGHT = 2732;
var PLAYER_Y = GAME_HEIGHT - 180;
var SHAPE_SPAWN_INTERVAL = 48; // Ticks (0.8s at 60fps)
var SHAPE_MIN_X = 120;
var SHAPE_MAX_X = GAME_WIDTH - 120;
var TARGET_SCORE = 20;
var MAX_LIVES = 5;
// Game state
var player;
var fallingShapes = [];
var score = 0;
var lives = MAX_LIVES;
var dragNode = null;
var lastTouchX = 0;
// Target color warning message
var colorNames = {
'shapeRed': 'Red',
'shapeBlue': 'Blue',
'shapeGreen': 'Green',
'shapeYellow': 'Yellow',
'shapePurple': 'Purple'
};
var colorList = ['shapeRed', 'shapeBlue', 'shapeGreen', 'shapeYellow', 'shapePurple'];
var targetColorIdx = Math.floor(Math.random() * colorList.length);
var targetColor = colorList[targetColorIdx];
var warningTxt = new Text2('Catch: ' + colorNames[targetColor], {
size: 110,
fill: 0xff0000
});
warningTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(warningTxt);
warningTxt.x = LK.gui.top.width / 2;
warningTxt.y = 140;
// Score display
var scoreTxt = new Text2('Score: 0', {
size: 120,
fill: 0x222222
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
// Lives display
var livesTxt = new Text2('Lives: ' + MAX_LIVES, {
size: 90,
fill: 0x444444
});
livesTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(livesTxt);
livesTxt.y = 260;
// Center score and lives horizontally, but not in the top 100px
scoreTxt.x = LK.gui.top.width / 2;
scoreTxt.y = 20;
livesTxt.x = LK.gui.top.width / 2;
// Start music
LK.playMusic('bgmusic');
// Change target color every 7 seconds (420 ticks)
var colorChangeInterval = 420;
var colorChangeTimer = LK.setInterval(function () {
// Pick a new color different from the current one
var newIdx;
do {
newIdx = Math.floor(Math.random() * colorList.length);
} while (newIdx === targetColorIdx && colorList.length > 1);
targetColorIdx = newIdx;
targetColor = colorList[targetColorIdx];
warningTxt.setText('Catch: ' + colorNames[targetColor]);
// Optionally, change warning color to match
var colorMap = {
'shapeRed': 0xff4c4c,
'shapeBlue': 0x4c7bff,
'shapeGreen': 0x4cff7b,
'shapeYellow': 0xfff94c,
'shapePurple': 0xb44cff
};
warningTxt.style.fill = colorMap[targetColor];
}, colorChangeInterval);
// Create player
player = new Player();
game.addChild(player);
player.x = GAME_WIDTH / 2;
player.y = PLAYER_Y;
// Helper: clamp player within screen
function clampPlayerX(x) {
var halfW = player.width * 0.5;
if (x < halfW) return halfW;
if (x > GAME_WIDTH - halfW) return GAME_WIDTH - halfW;
return x;
}
// Touch/move handling
function handleMove(x, y, obj) {
if (dragNode) {
// Clamp to screen
dragNode.x = clampPlayerX(x);
lastTouchX = dragNode.x;
}
}
game.move = handleMove;
game.down = function (x, y, obj) {
// Only allow drag if touch is near player (within 200px vertically)
if (y > player.y - 200) {
dragNode = player;
handleMove(x, y, obj);
}
};
game.up = function (x, y, obj) {
dragNode = null;
};
// Spawn a new falling shape
function spawnShape() {
var shape = new FallingShape();
// Random X within bounds
shape.x = SHAPE_MIN_X + Math.random() * (SHAPE_MAX_X - SHAPE_MIN_X);
shape.y = -100;
fallingShapes.push(shape);
game.addChild(shape);
}
// Animate positive feedback
function animateCatch(shape) {
tween(shape, {
scaleX: 1.4,
scaleY: 1.4,
alpha: 0
}, {
duration: 350,
easing: tween.easeOut,
onFinish: function onFinish() {
shape.destroy();
}
});
}
// Animate negative feedback
function animateMiss(shape) {
tween(shape, {
alpha: 0
}, {
duration: 300,
onFinish: function onFinish() {
shape.destroy();
}
});
}
// Update score/lives display
function updateScoreLives() {
scoreTxt.setText('Score: ' + score);
livesTxt.setText('Lives: ' + lives);
}
// Main game update loop
game.update = function () {
// Spawn shapes at interval
if (LK.ticks % SHAPE_SPAWN_INTERVAL === 0) {
spawnShape();
}
// Update all falling shapes
for (var i = fallingShapes.length - 1; i >= 0; i--) {
var shape = fallingShapes[i];
shape.update();
// Check for catch (simple AABB)
if (!shape.caught && !shape.missed) {
var dx = Math.abs(shape.x - player.x);
var dy = Math.abs(shape.y - player.y);
var catchW = player.width * 0.5 + shape.radius * 0.7;
var catchH = player.height * 0.5 + shape.radius * 0.7;
if (dx < catchW && dy < catchH) {
// Only catch if shape matches target color
if (shape.shapeId === targetColor) {
// Caught!
shape.caught = true;
score += 1;
updateScoreLives();
LK.getSound('catch').play();
player.flash();
animateCatch(shape);
fallingShapes.splice(i, 1);
// Win condition
if (score >= TARGET_SCORE) {
LK.effects.flashScreen(0x00ff00, 800);
LK.showYouWin();
return;
}
continue;
}
// If wrong color, do nothing (let it fall through)
}
}
// Check for miss (off bottom)
if (!shape.caught && !shape.missed && shape.y > GAME_HEIGHT + 100) {
shape.missed = true;
lives -= 1;
updateScoreLives();
LK.getSound('miss').play();
animateMiss(shape);
fallingShapes.splice(i, 1);
// Lose condition
if (lives <= 0) {
LK.effects.flashScreen(0xff0000, 800);
LK.showGameOver();
return;
}
}
}
};
// On game reset, clear state
game.on('destroy', function () {
fallingShapes = [];
score = 0;
lives = MAX_LIVES;
dragNode = null;
lastTouchX = 0;
LK.stopMusic();
}); ===================================================================
--- original.js
+++ change.js
@@ -69,13 +69,13 @@
/****
* Game Code
****/
-// Music
-// Sound effects
-// Player character
-// Shapes for falling objects (different colors)
// Game constants
+// Shapes for falling objects (different colors)
+// Player character
+// Sound effects
+// Music
var GAME_WIDTH = 2048;
var GAME_HEIGHT = 2732;
var PLAYER_Y = GAME_HEIGHT - 180;
var SHAPE_SPAWN_INTERVAL = 48; // Ticks (0.8s at 60fps)
@@ -89,8 +89,27 @@
var score = 0;
var lives = MAX_LIVES;
var dragNode = null;
var lastTouchX = 0;
+// Target color warning message
+var colorNames = {
+ 'shapeRed': 'Red',
+ 'shapeBlue': 'Blue',
+ 'shapeGreen': 'Green',
+ 'shapeYellow': 'Yellow',
+ 'shapePurple': 'Purple'
+};
+var colorList = ['shapeRed', 'shapeBlue', 'shapeGreen', 'shapeYellow', 'shapePurple'];
+var targetColorIdx = Math.floor(Math.random() * colorList.length);
+var targetColor = colorList[targetColorIdx];
+var warningTxt = new Text2('Catch: ' + colorNames[targetColor], {
+ size: 110,
+ fill: 0xff0000
+});
+warningTxt.anchor.set(0.5, 0);
+LK.gui.top.addChild(warningTxt);
+warningTxt.x = LK.gui.top.width / 2;
+warningTxt.y = 140;
// Score display
var scoreTxt = new Text2('Score: 0', {
size: 120,
fill: 0x222222
@@ -103,15 +122,36 @@
fill: 0x444444
});
livesTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(livesTxt);
-livesTxt.y = 130;
+livesTxt.y = 260;
// Center score and lives horizontally, but not in the top 100px
scoreTxt.x = LK.gui.top.width / 2;
scoreTxt.y = 20;
livesTxt.x = LK.gui.top.width / 2;
// Start music
LK.playMusic('bgmusic');
+// Change target color every 7 seconds (420 ticks)
+var colorChangeInterval = 420;
+var colorChangeTimer = LK.setInterval(function () {
+ // Pick a new color different from the current one
+ var newIdx;
+ do {
+ newIdx = Math.floor(Math.random() * colorList.length);
+ } while (newIdx === targetColorIdx && colorList.length > 1);
+ targetColorIdx = newIdx;
+ targetColor = colorList[targetColorIdx];
+ warningTxt.setText('Catch: ' + colorNames[targetColor]);
+ // Optionally, change warning color to match
+ var colorMap = {
+ 'shapeRed': 0xff4c4c,
+ 'shapeBlue': 0x4c7bff,
+ 'shapeGreen': 0x4cff7b,
+ 'shapeYellow': 0xfff94c,
+ 'shapePurple': 0xb44cff
+ };
+ warningTxt.style.fill = colorMap[targetColor];
+}, colorChangeInterval);
// Create player
player = new Player();
game.addChild(player);
player.x = GAME_WIDTH / 2;
@@ -197,23 +237,27 @@
var dy = Math.abs(shape.y - player.y);
var catchW = player.width * 0.5 + shape.radius * 0.7;
var catchH = player.height * 0.5 + shape.radius * 0.7;
if (dx < catchW && dy < catchH) {
- // Caught!
- shape.caught = true;
- score += 1;
- updateScoreLives();
- LK.getSound('catch').play();
- player.flash();
- animateCatch(shape);
- fallingShapes.splice(i, 1);
- // Win condition
- if (score >= TARGET_SCORE) {
- LK.effects.flashScreen(0x00ff00, 800);
- LK.showYouWin();
- return;
+ // Only catch if shape matches target color
+ if (shape.shapeId === targetColor) {
+ // Caught!
+ shape.caught = true;
+ score += 1;
+ updateScoreLives();
+ LK.getSound('catch').play();
+ player.flash();
+ animateCatch(shape);
+ fallingShapes.splice(i, 1);
+ // Win condition
+ if (score >= TARGET_SCORE) {
+ LK.effects.flashScreen(0x00ff00, 800);
+ LK.showYouWin();
+ return;
+ }
+ continue;
}
- continue;
+ // If wrong color, do nothing (let it fall through)
}
}
// Check for miss (off bottom)
if (!shape.caught && !shape.missed && shape.y > GAME_HEIGHT + 100) {
Sounds & Music
Used plugins
@upit/tween@upit/storage
