/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
var TransformButton = Container.expand(function () {
var self = Container.call(this);
// Array of button states
self.buttonStates = ['button1', 'button2', 'button3', 'button4', 'button5', 'button6'];
self.soundStates = ['tap1', 'tap2', 'tap3', 'tap4', 'tap5', 'tap6'];
self.currentState = 0;
// Create initial button graphics
self.buttonGraphics = self.attachAsset(self.buttonStates[0], {
anchorX: 0.5,
anchorY: 0.5
});
self.transformToNext = function () {
// Cycle to next state
self.currentState = (self.currentState + 1) % self.buttonStates.length;
// Remove current graphics
self.removeChild(self.buttonGraphics);
// Add new graphics
self.buttonGraphics = self.attachAsset(self.buttonStates[self.currentState], {
anchorX: 0.5,
anchorY: 0.5
});
// Play corresponding sound
LK.getSound(self.soundStates[self.currentState]).play();
// Add satisfying scale animation
self.buttonGraphics.scaleX = 0.8;
self.buttonGraphics.scaleY = 0.8;
tween(self.buttonGraphics, {
scaleX: 1.1,
scaleY: 1.1
}, {
duration: 100,
easing: tween.easeOut,
onFinish: function onFinish() {
tween(self.buttonGraphics, {
scaleX: 1,
scaleY: 1
}, {
duration: 150,
easing: tween.easeOut
});
}
});
};
self.down = function (x, y, obj) {
self.transformToNext();
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x2c3e50
});
/****
* Game Code
****/
// Create the transform button
var transformButton = game.addChild(new TransformButton());
// Position button at center of screen
transformButton.x = 2048 / 2;
transformButton.y = 2732 / 2;
// Add title text
var titleText = new Text2('TAP TO TRANSFORM', {
size: 80,
fill: 0xFFFFFF
});
titleText.anchor.set(0.5, 0.5);
titleText.x = 2048 / 2;
titleText.y = 400;
game.addChild(titleText);
// Add instruction text
var instructionText = new Text2('Tap the button to see it change!', {
size: 50,
fill: 0xBDC3C7
});
instructionText.anchor.set(0.5, 0.5);
instructionText.x = 2048 / 2;
instructionText.y = 2200;
game.addChild(instructionText);
game.update = function () {
// No continuous updates needed for this simple game
}; ===================================================================
--- original.js
+++ change.js
@@ -1,6 +1,93 @@
-/****
+/****
+* Plugins
+****/
+var tween = LK.import("@upit/tween.v1");
+
+/****
+* Classes
+****/
+var TransformButton = Container.expand(function () {
+ var self = Container.call(this);
+ // Array of button states
+ self.buttonStates = ['button1', 'button2', 'button3', 'button4', 'button5', 'button6'];
+ self.soundStates = ['tap1', 'tap2', 'tap3', 'tap4', 'tap5', 'tap6'];
+ self.currentState = 0;
+ // Create initial button graphics
+ self.buttonGraphics = self.attachAsset(self.buttonStates[0], {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ self.transformToNext = function () {
+ // Cycle to next state
+ self.currentState = (self.currentState + 1) % self.buttonStates.length;
+ // Remove current graphics
+ self.removeChild(self.buttonGraphics);
+ // Add new graphics
+ self.buttonGraphics = self.attachAsset(self.buttonStates[self.currentState], {
+ anchorX: 0.5,
+ anchorY: 0.5
+ });
+ // Play corresponding sound
+ LK.getSound(self.soundStates[self.currentState]).play();
+ // Add satisfying scale animation
+ self.buttonGraphics.scaleX = 0.8;
+ self.buttonGraphics.scaleY = 0.8;
+ tween(self.buttonGraphics, {
+ scaleX: 1.1,
+ scaleY: 1.1
+ }, {
+ duration: 100,
+ easing: tween.easeOut,
+ onFinish: function onFinish() {
+ tween(self.buttonGraphics, {
+ scaleX: 1,
+ scaleY: 1
+ }, {
+ duration: 150,
+ easing: tween.easeOut
+ });
+ }
+ });
+ };
+ self.down = function (x, y, obj) {
+ self.transformToNext();
+ };
+ return self;
+});
+
+/****
* Initialize Game
-****/
+****/
var game = new LK.Game({
- backgroundColor: 0x000000
-});
\ No newline at end of file
+ backgroundColor: 0x2c3e50
+});
+
+/****
+* Game Code
+****/
+// Create the transform button
+var transformButton = game.addChild(new TransformButton());
+// Position button at center of screen
+transformButton.x = 2048 / 2;
+transformButton.y = 2732 / 2;
+// Add title text
+var titleText = new Text2('TAP TO TRANSFORM', {
+ size: 80,
+ fill: 0xFFFFFF
+});
+titleText.anchor.set(0.5, 0.5);
+titleText.x = 2048 / 2;
+titleText.y = 400;
+game.addChild(titleText);
+// Add instruction text
+var instructionText = new Text2('Tap the button to see it change!', {
+ size: 50,
+ fill: 0xBDC3C7
+});
+instructionText.anchor.set(0.5, 0.5);
+instructionText.x = 2048 / 2;
+instructionText.y = 2200;
+game.addChild(instructionText);
+game.update = function () {
+ // No continuous updates needed for this simple game
+};
\ No newline at end of file