/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
// HelloCircle: The main "Hello" display.
var HelloCircle = Container.expand(function () {
var self = Container.call(this);
var circle = self.attachAsset('helloCircle', {
anchorX: 0.5,
anchorY: 0.5
});
self.circle = circle;
// "Hello" text
var helloText = new Text2('Hello!', {
size: 200,
fill: 0xFFFFFF
});
helloText.anchor.set(0.5, 0.5);
helloText.x = 0;
helloText.y = 0;
self.addChild(helloText);
return self;
});
// TapEffect: A quick expanding/fading effect when the user taps.
var TapEffect = Container.expand(function () {
var self = Container.call(this);
var effect = self.attachAsset('tapEffect', {
anchorX: 0.5,
anchorY: 0.5,
alpha: 0.7
});
self.effect = effect;
// Animate: expand and fade out, then destroy self
self.play = function () {
self.scaleX = 0.5;
self.scaleY = 0.5;
self.alpha = 0.7;
tween(self, {
scaleX: 2,
scaleY: 2,
alpha: 0
}, {
duration: 400,
easing: tween.easeOut,
onFinish: function onFinish() {
self.destroy();
}
});
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x222244
});
/****
* Game Code
****/
// Center coordinates
// No custom assets needed for this simple game. We'll use a friendly colored ellipse for the "Hello" and a box for the tap effect.
// We'll use tween for the animation.
var centerX = 2048 / 2;
var centerY = 2732 / 2;
// Add the HelloCircle to the center
var helloCircle = new HelloCircle();
helloCircle.x = centerX;
helloCircle.y = centerY;
game.addChild(helloCircle);
// "Tap to Start" text
var tapText = new Text2('Tap anywhere to start', {
size: 100,
fill: 0xFFFDE7
});
tapText.anchor.set(0.5, 0);
LK.gui.bottom.addChild(tapText);
// State: has the game started?
var started = false;
// Score variable and score text
var score = 0;
var scoreText = new Text2('Score: 0', {
size: 100,
fill: 0xffffff
});
scoreText.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreText);
// Handle tap (down) anywhere on the game
game.down = function (x, y, obj) {
// Increase score on every tap
score += 1;
scoreText.setText('Score: ' + score);
if (!started) {
started = true;
// Animate the helloCircle: scale up and fade out
tween(helloCircle, {
scaleX: 1.5,
scaleY: 1.5,
alpha: 0
}, {
duration: 600,
easing: tween.easeInOut,
onFinish: function onFinish() {
helloCircle.destroy();
}
});
// Animate the tapText: fade out and move down
tween(tapText, {
y: tapText.y + 100,
alpha: 0
}, {
duration: 500,
easing: tween.easeIn,
onFinish: function onFinish() {
tapText.destroy();
}
});
}
// Show tap effect at tap location (in game coordinates)
var effect = new TapEffect();
effect.x = x;
effect.y = y;
game.addChild(effect);
effect.play();
};
// No need for update or other handlers for this simple demo. ===================================================================
--- original.js
+++ change.js
@@ -63,11 +63,11 @@
/****
* Game Code
****/
-// We'll use tween for the animation.
-// No custom assets needed for this simple game. We'll use a friendly colored ellipse for the "Hello" and a box for the tap effect.
// Center coordinates
+// No custom assets needed for this simple game. We'll use a friendly colored ellipse for the "Hello" and a box for the tap effect.
+// We'll use tween for the animation.
var centerX = 2048 / 2;
var centerY = 2732 / 2;
// Add the HelloCircle to the center
var helloCircle = new HelloCircle();
@@ -82,10 +82,21 @@
tapText.anchor.set(0.5, 0);
LK.gui.bottom.addChild(tapText);
// State: has the game started?
var started = false;
+// Score variable and score text
+var score = 0;
+var scoreText = new Text2('Score: 0', {
+ size: 100,
+ fill: 0xffffff
+});
+scoreText.anchor.set(0.5, 0);
+LK.gui.top.addChild(scoreText);
// Handle tap (down) anywhere on the game
game.down = function (x, y, obj) {
+ // Increase score on every tap
+ score += 1;
+ scoreText.setText('Score: ' + score);
if (!started) {
started = true;
// Animate the helloCircle: scale up and fade out
tween(helloCircle, {