/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var AnimatedBackground = Container.expand(function () { var self = Container.call(this); // Create multiple gradient layers for depth var layer1 = self.attachAsset('backgroundGradient1', { anchorX: 0, anchorY: 0, alpha: 0.8 }); var layer2 = self.attachAsset('backgroundGradient2', { anchorX: 0, anchorY: 0, alpha: 0.6 }); var layer3 = self.attachAsset('backgroundGradient3', { anchorX: 0, anchorY: 0, alpha: 0.4 }); // Start animations self.startAnimations = function () { // Animate layer 1 with slow color transitions tween(layer1, { tint: 0x2d1b69 }, { duration: 4000, easing: tween.easeInOut, onFinish: function onFinish() { tween(layer1, { tint: 0x1a1a2e }, { duration: 4000, easing: tween.easeInOut, onFinish: function onFinish() { self.startAnimations(); } }); } }); // Animate layer 2 with different timing tween(layer2, { tint: 0x0f4c75 }, { duration: 6000, easing: tween.easeInOut, onFinish: function onFinish() { tween(layer2, { tint: 0x16213e }, { duration: 6000, easing: tween.easeInOut }); } }); // Animate layer 3 with subtle movement tween(layer3, { alpha: 0.7, tint: 0x3282b8 }, { duration: 8000, easing: tween.easeInOut, onFinish: function onFinish() { tween(layer3, { alpha: 0.4, tint: 0x0f3460 }, { duration: 8000, easing: tween.easeInOut }); } }); }; return self; }); var RedButton = Container.expand(function () { var self = Container.call(this); var buttonGraphics = self.attachAsset('redButton', { anchorX: 0.5, anchorY: 0.5 }); self.originalScale = 1.0; self.isAnimating = false; self.animateClick = function () { if (self.isAnimating) return; self.isAnimating = true; // Scale down animation tween(buttonGraphics, { scaleX: 0.9, scaleY: 0.9 }, { duration: 100, easing: tween.easeOut, onFinish: function onFinish() { // Scale back up tween(buttonGraphics, { scaleX: self.originalScale, scaleY: self.originalScale }, { duration: 150, easing: tween.bounceOut, onFinish: function onFinish() { self.isAnimating = false; } }); } }); // Color flash animation tween(buttonGraphics, { tint: 0xffffff }, { duration: 100, onFinish: function onFinish() { tween(buttonGraphics, { tint: 0xff0000 }, { duration: 200 }); } }); }; self.down = function (x, y, obj) { self.animateClick(); score++; scoreTxt.setText(score); LK.getSound('click').play(); // Add screen flash effect for satisfying feedback LK.effects.flashScreen(0xffffff, 100); // Change button color based on score milestones if (score === 50) { buttonGraphics.tint = 0xff8800; // Orange } else if (score === 100) { buttonGraphics.tint = 0xff00ff; // Magenta } else if (score === 200) { buttonGraphics.tint = 0x00ff00; // Green } else if (score === 500) { buttonGraphics.tint = 0x0088ff; // Blue } }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x222222 }); /**** * Game Code ****/ // Create and add animated background var animatedBg = game.addChild(new AnimatedBackground()); animatedBg.x = 0; animatedBg.y = 0; animatedBg.startAnimations(); var score = 0; var clicksPerSecond = 0; var lastSecondClicks = 0; var lastSecondTime = Date.now(); // Create and position the red button var redButton = game.addChild(new RedButton()); redButton.x = 2048 / 2; redButton.y = 2732 / 2; // Create score display var scoreTxt = new Text2('Clicks: 0', { size: 120, fill: 0xFFFFFF }); scoreTxt.anchor.set(0.5, 0); LK.gui.top.addChild(scoreTxt); // Create clicks per second display var cpsTxt = new Text2('CPS: 0', { size: 80, fill: 0xCCCCCC }); cpsTxt.anchor.set(0.5, 0); cpsTxt.y = 150; LK.gui.top.addChild(cpsTxt); // Track clicking speed var clickTimes = []; game.update = function () { var currentTime = Date.now(); // Calculate clicks per second if (currentTime - lastSecondTime >= 1000) { clicksPerSecond = score - lastSecondClicks; lastSecondClicks = score; lastSecondTime = currentTime; cpsTxt.setText('CPS: ' + clicksPerSecond); } // Update score display scoreTxt.setText('Clicks: ' + score); // Add subtle idle animation to button if (!redButton.isAnimating && LK.ticks % 120 === 0) { var buttonGraphics = redButton.children[0]; tween(buttonGraphics, { scaleX: 1.05, scaleY: 1.05 }, { duration: 500, easing: tween.easeInOut, onFinish: function onFinish() { tween(buttonGraphics, { scaleX: 1.0, scaleY: 1.0 }, { duration: 500, easing: tween.easeInOut }); } }); } };
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var AnimatedBackground = Container.expand(function () {
var self = Container.call(this);
// Create multiple gradient layers for depth
var layer1 = self.attachAsset('backgroundGradient1', {
anchorX: 0,
anchorY: 0,
alpha: 0.8
});
var layer2 = self.attachAsset('backgroundGradient2', {
anchorX: 0,
anchorY: 0,
alpha: 0.6
});
var layer3 = self.attachAsset('backgroundGradient3', {
anchorX: 0,
anchorY: 0,
alpha: 0.4
});
// Start animations
self.startAnimations = function () {
// Animate layer 1 with slow color transitions
tween(layer1, {
tint: 0x2d1b69
}, {
duration: 4000,
easing: tween.easeInOut,
onFinish: function onFinish() {
tween(layer1, {
tint: 0x1a1a2e
}, {
duration: 4000,
easing: tween.easeInOut,
onFinish: function onFinish() {
self.startAnimations();
}
});
}
});
// Animate layer 2 with different timing
tween(layer2, {
tint: 0x0f4c75
}, {
duration: 6000,
easing: tween.easeInOut,
onFinish: function onFinish() {
tween(layer2, {
tint: 0x16213e
}, {
duration: 6000,
easing: tween.easeInOut
});
}
});
// Animate layer 3 with subtle movement
tween(layer3, {
alpha: 0.7,
tint: 0x3282b8
}, {
duration: 8000,
easing: tween.easeInOut,
onFinish: function onFinish() {
tween(layer3, {
alpha: 0.4,
tint: 0x0f3460
}, {
duration: 8000,
easing: tween.easeInOut
});
}
});
};
return self;
});
var RedButton = Container.expand(function () {
var self = Container.call(this);
var buttonGraphics = self.attachAsset('redButton', {
anchorX: 0.5,
anchorY: 0.5
});
self.originalScale = 1.0;
self.isAnimating = false;
self.animateClick = function () {
if (self.isAnimating) return;
self.isAnimating = true;
// Scale down animation
tween(buttonGraphics, {
scaleX: 0.9,
scaleY: 0.9
}, {
duration: 100,
easing: tween.easeOut,
onFinish: function onFinish() {
// Scale back up
tween(buttonGraphics, {
scaleX: self.originalScale,
scaleY: self.originalScale
}, {
duration: 150,
easing: tween.bounceOut,
onFinish: function onFinish() {
self.isAnimating = false;
}
});
}
});
// Color flash animation
tween(buttonGraphics, {
tint: 0xffffff
}, {
duration: 100,
onFinish: function onFinish() {
tween(buttonGraphics, {
tint: 0xff0000
}, {
duration: 200
});
}
});
};
self.down = function (x, y, obj) {
self.animateClick();
score++;
scoreTxt.setText(score);
LK.getSound('click').play();
// Add screen flash effect for satisfying feedback
LK.effects.flashScreen(0xffffff, 100);
// Change button color based on score milestones
if (score === 50) {
buttonGraphics.tint = 0xff8800; // Orange
} else if (score === 100) {
buttonGraphics.tint = 0xff00ff; // Magenta
} else if (score === 200) {
buttonGraphics.tint = 0x00ff00; // Green
} else if (score === 500) {
buttonGraphics.tint = 0x0088ff; // Blue
}
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x222222
});
/****
* Game Code
****/
// Create and add animated background
var animatedBg = game.addChild(new AnimatedBackground());
animatedBg.x = 0;
animatedBg.y = 0;
animatedBg.startAnimations();
var score = 0;
var clicksPerSecond = 0;
var lastSecondClicks = 0;
var lastSecondTime = Date.now();
// Create and position the red button
var redButton = game.addChild(new RedButton());
redButton.x = 2048 / 2;
redButton.y = 2732 / 2;
// Create score display
var scoreTxt = new Text2('Clicks: 0', {
size: 120,
fill: 0xFFFFFF
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
// Create clicks per second display
var cpsTxt = new Text2('CPS: 0', {
size: 80,
fill: 0xCCCCCC
});
cpsTxt.anchor.set(0.5, 0);
cpsTxt.y = 150;
LK.gui.top.addChild(cpsTxt);
// Track clicking speed
var clickTimes = [];
game.update = function () {
var currentTime = Date.now();
// Calculate clicks per second
if (currentTime - lastSecondTime >= 1000) {
clicksPerSecond = score - lastSecondClicks;
lastSecondClicks = score;
lastSecondTime = currentTime;
cpsTxt.setText('CPS: ' + clicksPerSecond);
}
// Update score display
scoreTxt.setText('Clicks: ' + score);
// Add subtle idle animation to button
if (!redButton.isAnimating && LK.ticks % 120 === 0) {
var buttonGraphics = redButton.children[0];
tween(buttonGraphics, {
scaleX: 1.05,
scaleY: 1.05
}, {
duration: 500,
easing: tween.easeInOut,
onFinish: function onFinish() {
tween(buttonGraphics, {
scaleX: 1.0,
scaleY: 1.0
}, {
duration: 500,
easing: tween.easeInOut
});
}
});
}
};