Play
:quality(85)/https://cdn.frvr.ai/6836f06fc9a05b7098dbc79c.png)
:quality(85)/https://cdn.frvr.ai/6836f06bc9a05b7098dbc79a.png)
#IdleGame
#TapToPlay
#UpgradeHero
#CollectGold
#MobileGame
Creation History
User prompt
My stats should be written at the bottom left of the screen, the enemy's stats should be written at the bottom right of the screen, it should be neat and clear, the font color should be black and the surroundings should be white.
User prompt
my stats for levels 1-10 are like this, 🔹 Level 1 health: 60 attack: 10 attack speed: 2 🔹 Level 2 health: 95 attack: 14 attack speed: 3 🔹 Level 3 health: 130 attack: 18 attack speed: 4 🔹 Level 4 health: 170 attack: 23 attack speed: 4 🔹 Level 5 health: 215 attack: 27 attack speed: 5 🔹 Level 6 health: 265 attack: 32 attack speed: 6 🔹 Level 7 health: 320 attack : 38 attack speed : 6 🔹 Level 8 health : 380 attack : 45 attack speed : 7 🔹 Level 9 health : 445 attack : 53 attack speed : 8 🔹 Level 10 health : 515 attack : 62 attack speed : 9 , I will have these basic stats at every level
User prompt
for each level my enemy health and attack values are as follows - Level 1 Health: 20 - 100 random Attack: 1 - 20 random Attack Speed: 1 - 5 random 🔹 Level 2 Health: 50 - 150 random Attack: 5 - 25 random Attack Speed: 2 - 6 random 🔹 Level 3 Health: 80 - 200 random Attack: 10 - 30 random Attack Speed: 3 - 7 random 🔹 Level 4 Health: 110 - 250 random Attack: 15 - 35 random Attack Speed: 4 - 8 random 🔹 Level 5 Health: 150 - 300 random Attack: 20 - 40 random Attack Speed: 5 - 9 random 🔹 Level 6 Health: 200 - 360 random Attack: 25 - 45 random Attack Speed: 6 - 10 random 🔹 Level 7 Health: 250 - 420 random Attack: 30 - 50 random Attack Speed: 7 - 11 random 🔹 Level 8 Health: 300 - 480 random Attack: 35 - 55 random Attack Speed: 8 - 12 random 🔹 Level 9 Health: 350 - 540 random Attack: 40 - 60 random Attack Speed: 9 - 13 random 🔹 Level 10 Health: 400 - 600 random Attack: 45 - 70 random Attack Speed: 10 - 15 random /// set the enemy statistics like this I will get enemies like this from level 1 to level 10
User prompt
The enemy will be on the far right of the screen.
User prompt
The buttons are not visible, make sure you installed it in the correct places
User prompt
Add the spawnBtn and upgradeBtn buttons to the locations I mentioned.
User prompt
the main character will appear on the left side of the screen, there will be a button in the middle bottom part, when we click on that button, an enemy will appear in front of him "spawnBtn", gold will drop from the enemy, there will be a button in the middle top part and that button will develop the character and increase the level "upgradeBtn", our gold amount will be written in the upper right part
Code edit (1 edits merged)
Please save this source code
User prompt
Gold Drop Hero
Initial prompt
The main character will appear on the left side of the screen, there will be a button in the middle bottom part, when we click on that button, an enemy will come in front of him, gold will drop from the enemy, there will be a button in the middle top part and that button will develop the character, increase the level and our gold amount will be written in the upper right part
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
// Enemy class
var Enemy = Container.expand(function () {
var self = Container.call(this);
var enemyGfx = self.attachAsset('enemy', {
anchorX: 0.5,
anchorY: 0.5
});
self.hp = 1;
self.x = 600;
self.y = 2732 / 2;
self.isAlive = true;
// Animate enemy in
self.spawnAnim = function () {
self.scaleX = 0.5;
self.scaleY = 0.5;
tween(self, {
scaleX: 1,
scaleY: 1
}, {
duration: 180,
easing: tween.bounceOut
});
};
// Animate enemy defeat
self.defeatAnim = function (onFinish) {
tween(self, {
alpha: 0,
scaleX: 1.3,
scaleY: 1.3
}, {
duration: 180,
easing: tween.easeIn,
onFinish: onFinish
});
};
return self;
});
// Gold class
var Gold = Container.expand(function () {
var self = Container.call(this);
var goldGfx = self.attachAsset('gold', {
anchorX: 0.5,
anchorY: 0.5
});
self.x = 600;
self.y = 2732 / 2;
// Animate gold drop
self.dropAnim = function (targetX, targetY, onFinish) {
tween(self, {
y: targetY
}, {
duration: 350,
easing: tween.bounceOut,
onFinish: onFinish
});
};
// Animate gold collect
self.collectAnim = function (targetX, targetY, onFinish) {
tween(self, {
x: targetX,
y: targetY,
scaleX: 0.3,
scaleY: 0.3,
alpha: 0
}, {
duration: 320,
easing: tween.cubicIn,
onFinish: onFinish
});
};
return self;
});
// Hero class
var Hero = Container.expand(function () {
var self = Container.call(this);
var heroGfx = self.attachAsset('hero', {
anchorX: 0.5,
anchorY: 0.5
});
self.level = 1;
self.x = 200;
self.y = 2732 / 2;
// For upgrade animation
self.flashUpgrade = function () {
tween(self, {
scaleX: 1.2,
scaleY: 1.2
}, {
duration: 120,
easing: tween.easeOut,
onFinish: function onFinish() {
tween(self, {
scaleX: 1,
scaleY: 1
}, {
duration: 120,
easing: tween.easeIn
});
}
});
};
return self;
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x222a36
});
/****
* Game Code
****/
// Upgrade Button: orange box
// Spawn Enemy Button: green box
// Gold: yellow ellipse
// Enemy: blue ellipse
// Hero: red box, left side
// --- Global State ---
var hero = new Hero();
game.addChild(hero);
var currentEnemy = null;
var golds = [];
var goldAmount = 0;
var heroLevel = 1;
// --- GUI Elements ---
// Gold display (top right)
var goldTxt = new Text2('0', {
size: 100,
fill: 0xFFE066
});
goldTxt.anchor.set(1, 0); // right, top
LK.gui.topRight.addChild(goldTxt);
// --- Hero and Enemy Stats Display ---
var heroStatsBg = LK.getAsset('hero', {
anchorX: 0,
anchorY: 1
});
heroStatsBg.width = 500;
heroStatsBg.height = 260;
heroStatsBg.x = 0;
heroStatsBg.y = LK.gui.bottom.height;
heroStatsBg.alpha = 1;
heroStatsBg.tint = 0xffffff;
LK.gui.bottomLeft.addChild(heroStatsBg);
var heroStatsTxt = new Text2('', {
size: 60,
fill: "#000"
});
heroStatsTxt.anchor.set(0, 1);
heroStatsTxt.x = 30;
heroStatsTxt.y = LK.gui.bottom.height - 30;
LK.gui.bottomLeft.addChild(heroStatsTxt);
var enemyStatsBg = LK.getAsset('enemy', {
anchorX: 1,
anchorY: 1
});
enemyStatsBg.width = 500;
enemyStatsBg.height = 260;
enemyStatsBg.x = LK.gui.bottomRight.width;
enemyStatsBg.y = LK.gui.bottom.height;
enemyStatsBg.alpha = 1;
enemyStatsBg.tint = 0xffffff;
LK.gui.bottomRight.addChild(enemyStatsBg);
var enemyStatsTxt = new Text2('', {
size: 60,
fill: "#000"
});
enemyStatsTxt.anchor.set(1, 1);
enemyStatsTxt.x = LK.gui.bottomRight.width - 30;
enemyStatsTxt.y = LK.gui.bottom.height - 30;
LK.gui.bottomRight.addChild(enemyStatsTxt);
// Upgrade button (top center)
var upgradeBtn = LK.getAsset('upgradeBtn', {
anchorX: 0.5,
anchorY: 0.5
});
// Place upgradeBtn at top center, but not in the top left 100x100 area
// Use LK.gui.top (centered horizontally, below top edge)
upgradeBtn.x = LK.gui.top.width / 2;
upgradeBtn.y = 100 + upgradeBtn.height / 2;
LK.gui.top.addChild(upgradeBtn);
var upgradeTxt = new Text2('Upgrade\nLvl: 1', {
size: 60,
fill: "#fff"
});
upgradeTxt.anchor.set(0.5, 0.5);
upgradeTxt.x = upgradeBtn.x;
upgradeTxt.y = upgradeBtn.y;
LK.gui.top.addChild(upgradeTxt);
// Spawn enemy button (bottom center)
var spawnBtn = LK.getAsset('spawnBtn', {
anchorX: 0.5,
anchorY: 0.5
});
// Place spawnBtn at bottom center, above the very bottom edge
spawnBtn.x = LK.gui.bottom.width / 2;
spawnBtn.y = LK.gui.bottom.height - 100 - spawnBtn.height / 2;
LK.gui.bottom.addChild(spawnBtn);
var spawnTxt = new Text2('Spawn Enemy', {
size: 60,
fill: "#fff"
});
spawnTxt.anchor.set(0.5, 0.5);
spawnTxt.x = spawnBtn.x;
spawnTxt.y = spawnBtn.y;
LK.gui.bottom.addChild(spawnTxt);
// --- Helper Functions ---
function updateGoldDisplay() {
goldTxt.setText(goldAmount);
}
function updateUpgradeDisplay() {
upgradeTxt.setText('Upgrade\nLvl: ' + heroLevel);
}
// Update hero stats display
function updateHeroStatsDisplay() {
var stats = getEnemyStatsForLevel(heroLevel);
heroStatsTxt.setText("Hero\n" + "Level: " + heroLevel + "\n" + "Health: " + stats.hp + "\n" + "Attack: " + stats.atk + "\n" + "Atk Spd: " + stats.atkSpd);
}
// Update enemy stats display
function updateEnemyStatsDisplay() {
if (currentEnemy && currentEnemy.isAlive) {
enemyStatsTxt.setText("Enemy\n" + "Level: " + heroLevel + "\n" + "Health: " + currentEnemy.hp + "\n" + "Attack: " + currentEnemy.attack + "\n" + "Atk Spd: " + currentEnemy.attackSpeed);
} else {
enemyStatsTxt.setText("Enemy\n-");
}
}
// --- Game Logic ---
// Spawn enemy logic
// Enemy stat table for levels 1-10 (fixed stats)
var enemyStatsByLevel = [
// Level 1
{
hp: 60,
atk: 10,
atkSpd: 2
},
// Level 2
{
hp: 95,
atk: 14,
atkSpd: 3
},
// Level 3
{
hp: 130,
atk: 18,
atkSpd: 4
},
// Level 4
{
hp: 170,
atk: 23,
atkSpd: 4
},
// Level 5
{
hp: 215,
atk: 27,
atkSpd: 5
},
// Level 6
{
hp: 265,
atk: 32,
atkSpd: 6
},
// Level 7
{
hp: 320,
atk: 38,
atkSpd: 6
},
// Level 8
{
hp: 380,
atk: 45,
atkSpd: 7
},
// Level 9
{
hp: 445,
atk: 53,
atkSpd: 8
},
// Level 10
{
hp: 515,
atk: 62,
atkSpd: 9
}];
function getEnemyStatsForLevel(level) {
// Clamp level to 1-10
var idx = Math.max(0, Math.min(enemyStatsByLevel.length - 1, level - 1));
var stats = enemyStatsByLevel[idx];
// Return fixed stats
return {
hp: stats.hp,
atk: stats.atk,
atkSpd: stats.atkSpd
};
}
function spawnEnemy() {
if (currentEnemy && currentEnemy.isAlive) return; // Only one at a time
var enemy = new Enemy();
// Place enemy on the far right, vertically aligned with hero
enemy.x = 2048 - 200; // 200px from the right edge, matching hero's 200px from left
enemy.y = hero.y;
// Get stats for this level
var stats = getEnemyStatsForLevel(heroLevel);
enemy.hp = stats.hp;
enemy.attack = stats.atk;
enemy.attackSpeed = stats.atkSpd;
enemy.isAlive = true;
enemy.spawnAnim();
game.addChild(enemy);
currentEnemy = enemy;
updateEnemyStatsDisplay();
}
// Defeat enemy logic
function defeatEnemy() {
if (!currentEnemy || !currentEnemy.isAlive) return;
currentEnemy.isAlive = false;
currentEnemy.defeatAnim(function () {
if (currentEnemy) {
currentEnemy.destroy();
currentEnemy = null;
updateEnemyStatsDisplay();
}
});
// Drop gold
var gold = new Gold();
// Drop gold at the far right (where enemy was)
gold.x = 2048 - 200;
gold.y = hero.y;
gold.scaleX = 1;
gold.scaleY = 1;
gold.alpha = 1;
game.addChild(gold);
golds.push(gold);
// Drop to random y near enemy
var dropY = gold.y + (Math.random() * 120 - 60);
gold.dropAnim(gold.x, dropY, function () {});
}
// Collect gold logic
function collectGold(gold) {
// Animate to gold display
var guiGoldPos = LK.gui.topRight.toLocal(gold.toGlobal({
x: 0,
y: 0
}));
goldAmount += 1;
updateGoldDisplay();
gold.collectAnim(guiGoldPos.x, guiGoldPos.y, function () {
gold.destroy();
});
}
// Upgrade logic
function upgradeHero() {
var upgradeCost = heroLevel * 5;
if (goldAmount < upgradeCost) {
// Flash gold text red
tween(goldTxt, {
tint: 0xff4444
}, {
duration: 120,
onFinish: function onFinish() {
tween(goldTxt, {
tint: 0xFFE066
}, {
duration: 120
});
}
});
return;
}
goldAmount -= upgradeCost;
heroLevel += 1;
hero.level = heroLevel;
updateGoldDisplay();
updateUpgradeDisplay();
updateHeroStatsDisplay();
updateEnemyStatsDisplay();
hero.flashUpgrade();
}
// --- Event Handlers ---
// Spawn button tap
spawnBtn.down = function (x, y, obj) {
spawnEnemy();
};
// Enemy tap (defeat)
function onEnemyDown(x, y, obj) {
if (!currentEnemy || !currentEnemy.isAlive) return;
currentEnemy.hp -= 1;
// Flash enemy
tween(currentEnemy, {
tint: 0xffffff
}, {
duration: 60,
onFinish: function onFinish() {
tween(currentEnemy, {
tint: 0x2a6bde
}, {
duration: 60
});
}
});
if (currentEnemy.hp <= 0) {
defeatEnemy();
}
}
// Gold tap (collect)
function onGoldDown(x, y, obj) {
for (var i = golds.length - 1; i >= 0; i--) {
var gold = golds[i];
if (gold && gold.containsPoint && gold.containsPoint({
x: x,
y: y
})) {
collectGold(gold);
golds.splice(i, 1);
break;
}
}
}
// Upgrade button tap
upgradeBtn.down = function (x, y, obj) {
upgradeHero();
};
// --- Attach event handlers to game ---
game.down = function (x, y, obj) {
// Check if tap is on enemy
if (currentEnemy && currentEnemy.isAlive && currentEnemy.containsPoint && currentEnemy.containsPoint({
x: x,
y: y
})) {
onEnemyDown(x, y, obj);
return;
}
// Check if tap is on any gold
for (var i = golds.length - 1; i >= 0; i--) {
var gold = golds[i];
if (gold && gold.containsPoint && gold.containsPoint({
x: x,
y: y
})) {
collectGold(gold);
golds.splice(i, 1);
return;
}
}
// (Buttons handled by their own .down)
};
// --- Game update loop ---
game.update = function () {
// Remove golds that are invisible
for (var i = golds.length - 1; i >= 0; i--) {
var gold = golds[i];
if (gold.alpha <= 0.01) {
gold.destroy();
golds.splice(i, 1);
}
}
// Keep hero vertically centered
hero.y = 2732 / 2;
// Keep enemy vertically centered and at far right if alive
if (currentEnemy && currentEnemy.isAlive) {
currentEnemy.x = 2048 - 200;
currentEnemy.y = hero.y;
}
updateHeroStatsDisplay();
updateEnemyStatsDisplay();
};
// --- Initial UI state ---
updateGoldDisplay();
updateUpgradeDisplay();
updateHeroStatsDisplay();
updateEnemyStatsDisplay(); ===================================================================
--- original.js
+++ change.js
@@ -139,8 +139,47 @@
fill: 0xFFE066
});
goldTxt.anchor.set(1, 0); // right, top
LK.gui.topRight.addChild(goldTxt);
+// --- Hero and Enemy Stats Display ---
+var heroStatsBg = LK.getAsset('hero', {
+ anchorX: 0,
+ anchorY: 1
+});
+heroStatsBg.width = 500;
+heroStatsBg.height = 260;
+heroStatsBg.x = 0;
+heroStatsBg.y = LK.gui.bottom.height;
+heroStatsBg.alpha = 1;
+heroStatsBg.tint = 0xffffff;
+LK.gui.bottomLeft.addChild(heroStatsBg);
+var heroStatsTxt = new Text2('', {
+ size: 60,
+ fill: "#000"
+});
+heroStatsTxt.anchor.set(0, 1);
+heroStatsTxt.x = 30;
+heroStatsTxt.y = LK.gui.bottom.height - 30;
+LK.gui.bottomLeft.addChild(heroStatsTxt);
+var enemyStatsBg = LK.getAsset('enemy', {
+ anchorX: 1,
+ anchorY: 1
+});
+enemyStatsBg.width = 500;
+enemyStatsBg.height = 260;
+enemyStatsBg.x = LK.gui.bottomRight.width;
+enemyStatsBg.y = LK.gui.bottom.height;
+enemyStatsBg.alpha = 1;
+enemyStatsBg.tint = 0xffffff;
+LK.gui.bottomRight.addChild(enemyStatsBg);
+var enemyStatsTxt = new Text2('', {
+ size: 60,
+ fill: "#000"
+});
+enemyStatsTxt.anchor.set(1, 1);
+enemyStatsTxt.x = LK.gui.bottomRight.width - 30;
+enemyStatsTxt.y = LK.gui.bottom.height - 30;
+LK.gui.bottomRight.addChild(enemyStatsTxt);
// Upgrade button (top center)
var upgradeBtn = LK.getAsset('upgradeBtn', {
anchorX: 0.5,
anchorY: 0.5
@@ -181,8 +220,21 @@
}
function updateUpgradeDisplay() {
upgradeTxt.setText('Upgrade\nLvl: ' + heroLevel);
}
+// Update hero stats display
+function updateHeroStatsDisplay() {
+ var stats = getEnemyStatsForLevel(heroLevel);
+ heroStatsTxt.setText("Hero\n" + "Level: " + heroLevel + "\n" + "Health: " + stats.hp + "\n" + "Attack: " + stats.atk + "\n" + "Atk Spd: " + stats.atkSpd);
+}
+// Update enemy stats display
+function updateEnemyStatsDisplay() {
+ if (currentEnemy && currentEnemy.isAlive) {
+ enemyStatsTxt.setText("Enemy\n" + "Level: " + heroLevel + "\n" + "Health: " + currentEnemy.hp + "\n" + "Attack: " + currentEnemy.attack + "\n" + "Atk Spd: " + currentEnemy.attackSpeed);
+ } else {
+ enemyStatsTxt.setText("Enemy\n-");
+ }
+}
// --- Game Logic ---
// Spawn enemy logic
// Enemy stat table for levels 1-10 (fixed stats)
var enemyStatsByLevel = [
@@ -271,8 +323,9 @@
enemy.isAlive = true;
enemy.spawnAnim();
game.addChild(enemy);
currentEnemy = enemy;
+ updateEnemyStatsDisplay();
}
// Defeat enemy logic
function defeatEnemy() {
if (!currentEnemy || !currentEnemy.isAlive) return;
@@ -280,8 +333,9 @@
currentEnemy.defeatAnim(function () {
if (currentEnemy) {
currentEnemy.destroy();
currentEnemy = null;
+ updateEnemyStatsDisplay();
}
});
// Drop gold
var gold = new Gold();
@@ -333,8 +387,10 @@
heroLevel += 1;
hero.level = heroLevel;
updateGoldDisplay();
updateUpgradeDisplay();
+ updateHeroStatsDisplay();
+ updateEnemyStatsDisplay();
hero.flashUpgrade();
}
// --- Event Handlers ---
// Spawn button tap
@@ -420,8 +476,12 @@
if (currentEnemy && currentEnemy.isAlive) {
currentEnemy.x = 2048 - 200;
currentEnemy.y = hero.y;
}
+ updateHeroStatsDisplay();
+ updateEnemyStatsDisplay();
};
// --- Initial UI state ---
updateGoldDisplay();
-updateUpgradeDisplay();
\ No newline at end of file
+updateUpgradeDisplay();
+updateHeroStatsDisplay();
+updateEnemyStatsDisplay();
\ No newline at end of file
Images
:quality(85)/https://cdn.frvr.ai/68370f95d66d759dbd97c93f.png%3F3)
:quality(85)/https://cdn.frvr.ai/6838864ad66d759dbd97cb4b.png%3F3)
:quality(85)/https://cdn.frvr.ai/68388b8ae689bc57d0cb1641.png%3F3)
:quality(85)/https://cdn.frvr.ai/683ae852ebe79108d1f15464.png%3F3)
:quality(85)/https://cdn.frvr.ai/683ae929ebe79108d1f15466.png%3F3)
:quality(85)/https://cdn.frvr.ai/683ae9dcebe79108d1f1546a.png%3F3)
:quality(85)/https://cdn.frvr.ai/683aea86ebe79108d1f1546e.png%3F3)
:quality(85)/https://cdn.frvr.ai/683aeba5ebe79108d1f15472.png%3F3)
:quality(85)/https://cdn.frvr.ai/683c4d605715f4c9136ea1d5.png%3F3)
:quality(85)/https://cdn.frvr.ai/683c5aa75715f4c9136ea1fd.png%3F3)
:quality(85)/https://cdn.frvr.ai/683da5b15715f4c9136ea362.png%3F3)
:quality(85)/https://cdn.frvr.ai/68406860e606ec8e2cc478ea.png%3F3)
:quality(85)/https://cdn.frvr.ai/684069b4da80c25ab0472ff7.png%3F3)
:quality(85)/https://cdn.frvr.ai/68412e58e606ec8e2cc4797a.png%3F3)
:quality(85)/https://cdn.frvr.ai/68412e6fe606ec8e2cc4797c.png%3F3)
:quality(85)/https://cdn.frvr.ai/68412e7fe606ec8e2cc4797e.png%3F3)
:quality(85)/https://cdn.frvr.ai/68412e97e606ec8e2cc47980.png%3F3)
:quality(85)/https://cdn.frvr.ai/68414a91e606ec8e2cc4798c.png%3F3)
Used plugins
@upit/tween
