Upit | Learn about creating the game Dragons & 2épée with gen AI

/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); var storage = LK.import("@upit/storage.v1"); /**** * Classes ****/ var AdultDragon = Container.expand(function (type, level) { var self = Container.call(this); // Map dragon types to their specific assets var assetMap = { 'Nilisty': 'nilisty', 'Mistina': 'mistina', 'Nokan': 'nokan', 'Oragana': 'oragana', 'Farocha': 'farocha', 'Nonano': 'nonano', 'Jarare': 'jarare', 'Eriza': 'eriza', 'Katoza': 'katoza', 'Ultete': 'ultete' }; var assetName = assetMap[type] || 'nilisty'; var dragonGraphics = self.attachAsset(assetName, { anchorX: 0.5, anchorY: 0.5 }); self.dragonType = type || 'Nilisty'; self.level = level || 1; // Define calculateHealth method before using it self.calculateHealth = function () { var baseHealth = 30 + self.level * 10; var typeMultiplier = { 'Nilisty': 1.0, 'Mistina': 1.2, 'Nokan': 1.1, 'Oragana': 1.3, 'Farocha': 1.4, 'Nonano': 1.1, 'Jarare': 1.2, 'Eriza': 1.5, 'Katoza': 1.3, 'Ultete': 1.6 }; return Math.floor(baseHealth * (typeMultiplier[self.dragonType] || 1.0)); }; // Define getElement method before using it self.getElement = function () { var elements = { 'Nilisty': 'Fire', 'Mistina': 'Water', 'Nokan': 'Earth', 'Oragana': 'Fire', 'Farocha': 'Dark', 'Nonano': 'Ice', 'Jarare': 'Lightning', 'Eriza': 'Light', 'Katoza': 'Earth', 'Ultete': 'Shadow' }; return elements[self.dragonType] || 'Fire'; }; self.maxHealth = self.calculateHealth(); self.health = self.maxHealth; self.element = self.getElement(); self.canHeal = ['Mistina', 'Farocha', 'Eriza'].includes(self.dragonType); self.isHealing = false; self.healingTimer = 0; // Dragons now use their own colored assets, no tinting needed // Store original colors for healing effects var originalColors = { 'Nilisty': 0x8b0000, 'Mistina': 0x00ff7f, 'Nokan': 0x4b0082, 'Oragana': 0x8b4513, 'Farocha': 0x191970, 'Nonano': 0x00bfff, 'Jarare': 0x32cd32, 'Eriza': 0xffd700, 'Katoza': 0x2f4f4f, 'Ultete': 0x556b2f }; self.startHealing = function () { if (self.canHeal && !self.isHealing) { self.isHealing = true; self.healingTimer = 5000; // 5 seconds dragonGraphics.tint = 0x00ff00; // Green tint when healing } }; self.interruptHealing = function () { if (self.isHealing) { self.isHealing = false; self.healingTimer = 0; dragonGraphics.tint = originalColors[self.dragonType] || 0x8b0000; return true; } return false; }; self.completeHealing = function () { if (self.isHealing) { self.health = Math.min(self.health + Math.floor(self.maxHealth * 0.3), self.maxHealth); self.isHealing = false; self.healingTimer = 0; dragonGraphics.tint = originalColors[self.dragonType] || 0x8b0000; } }; self.update = function () { if (self.isHealing) { self.healingTimer -= 16.67; // ~60fps if (self.healingTimer <= 0) { self.completeHealing(); } } }; return self; }); var BabyDragon = Container.expand(function () { var self = Container.call(this); var dragonGraphics = self.attachAsset('babyDragon', { anchorX: 0.5, anchorY: 0.5 }); self.maxHealth = 50; self.health = self.maxHealth; self.level = 1; self.experience = 0; self.experienceToNext = 3; self.targetY = 0; self.jumpSpeed = 0; self.isJumping = false; self.elementalStones = {}; self.takeDamage = function (damage) { self.health = Math.max(0, self.health - damage); LK.effects.flashObject(self, 0xff0000, 500); }; self.gainExperience = function () { self.experience++; if (self.experience >= self.experienceToNext) { self.levelUp(); } }; self.levelUp = function () { self.level++; self.experience = 0; self.experienceToNext *= 2; // Health bonus var healthBonus = Math.floor(self.maxHealth * 0.1); self.maxHealth += healthBonus; self.health = self.maxHealth; LK.effects.flashObject(self, 0xffd700, 1000); }; self.jumpTo = function (targetY) { if (!self.isJumping) { self.isJumping = true; self.targetY = targetY; self.jumpSpeed = -8; LK.getSound('jump').play(); } }; self.update = function () { if (self.isJumping) { self.jumpSpeed += 0.5; // gravity self.y += self.jumpSpeed; if (self.y >= self.targetY) { self.y = self.targetY; self.isJumping = false; self.jumpSpeed = 0; } } }; return self; }); var Combat = Container.expand(function (player, enemy) { var self = Container.call(this); self.player = player; self.enemy = enemy; self.isPlayerTurn = true; self.turnTimer = 0; self.ui = new CombatUI(); self.addChild(self.ui); self.playerAttack = function () { if (!self.isPlayerTurn) return; var damage = 15 + Math.floor(Math.random() * 10); self.enemy.health = Math.max(0, self.enemy.health - damage); self.ui.showAction('You deal ' + damage + ' damage!'); LK.getSound('attack').play(); if (self.enemy.health <= 0) { self.victory(); } else { self.isPlayerTurn = false; self.turnTimer = 1000; } }; self.enemyTurn = function () { if (Math.random() < 0.3 && self.enemy.canHeal && self.enemy.health < self.enemy.maxHealth * 0.7) { self.enemy.startHealing(); self.ui.showAction(self.enemy.dragonType + ' is healing! Tap to interrupt!'); } else { var damage = 10 + Math.floor(Math.random() * 8); self.player.takeDamage(damage); self.ui.showAction(self.enemy.dragonType + ' deals ' + damage + ' damage!'); if (self.player.health <= 0) { self.defeat(); return; } } self.isPlayerTurn = true; self.turnTimer = 0; }; self.victory = function () { self.player.gainExperience(); // Grant elemental stone if (!self.player.elementalStones[self.enemy.element]) { self.player.elementalStones[self.enemy.element] = 0; } self.player.elementalStones[self.enemy.element]++; LK.setScore(LK.getScore() + 100); LK.getSound('victory').play(); self.ui.showAction('Victory! Gained ' + self.enemy.element + ' Stone! Level: ' + self.player.level + ' XP: ' + self.player.experience + '/' + self.player.experienceToNext); LK.setTimeout(function () { inCombat = false; currentCombat = null; self.destroy(); }, 2000); }; self.defeat = function () { LK.getSound('defeat').play(); self.ui.showAction('Defeat! Game Over'); LK.setTimeout(function () { LK.showGameOver(); }, 2000); }; self.update = function () { self.ui.updateHealthBars(self.player.health, self.player.maxHealth, self.enemy.health, self.enemy.maxHealth); if (self.turnTimer > 0) { self.turnTimer -= 16.67; if (self.turnTimer <= 0) { self.enemyTurn(); } } }; return self; }); var CombatUI = Container.expand(function () { var self = Container.call(this); var background = self.attachAsset('healthBarBg', { width: 2048, height: 2732, anchorX: 0, anchorY: 0, alpha: 0.8 }); background.tint = 0x000000; var playerHealthBg = self.attachAsset('healthBarBg', { anchorX: 0.5, anchorY: 0.5, x: 1024, y: 2200 }); var playerHealthBar = self.attachAsset('healthBar', { anchorX: 0.5, anchorY: 0.5, x: 1024, y: 2200 }); var enemyHealthBg = self.attachAsset('healthBarBg', { anchorX: 0.5, anchorY: 0.5, x: 1024, y: 400 }); var enemyHealthBar = self.attachAsset('healthBar', { anchorX: 0.5, anchorY: 0.5, x: 1024, y: 400 }); var attackButton = self.attachAsset('combatButton', { anchorX: 0.5, anchorY: 0.5, x: 1024, y: 2400 }); self.playerHealthBar = playerHealthBar; self.enemyHealthBar = enemyHealthBar; self.attackButton = attackButton; var playerInfoText = new Text2('', { size: 40, fill: '#ffffff' }); playerInfoText.anchor.set(0.5, 0.5); playerInfoText.x = 1024; playerInfoText.y = 2300; self.addChild(playerInfoText); self.playerInfoText = playerInfoText; var enemyInfoText = new Text2('', { size: 40, fill: '#ffffff' }); enemyInfoText.anchor.set(0.5, 0.5); enemyInfoText.x = 1024; enemyInfoText.y = 500; self.addChild(enemyInfoText); self.enemyInfoText = enemyInfoText; var actionText = new Text2('', { size: 50, fill: '#ffff00' }); actionText.anchor.set(0.5, 0.5); actionText.x = 1024; actionText.y = 1300; self.addChild(actionText); self.actionText = actionText; self.updateHealthBars = function (playerHealth, playerMaxHealth, enemyHealth, enemyMaxHealth) { var playerRatio = playerHealth / playerMaxHealth; var enemyRatio = enemyHealth / enemyMaxHealth; self.playerHealthBar.scaleX = playerRatio; self.enemyHealthBar.scaleX = enemyRatio; self.playerInfoText.setText('HP: ' + playerHealth + '/' + playerMaxHealth); self.enemyInfoText.setText('HP: ' + enemyHealth + '/' + enemyMaxHealth); }; self.showAction = function (text) { self.actionText.setText(text); tween(self.actionText, { alpha: 1 }, { duration: 0 }); tween(self.actionText, { alpha: 0 }, { duration: 2000 }); }; self.down = function (x, y, obj) { // Check if obj and obj.parent exist before calling toGlobal if (obj && obj.parent && obj.parent.toGlobal) { var localPos = self.toLocal(obj.parent.toGlobal(obj.position)); } if (currentCombat && currentCombat.enemy.isHealing) { if (currentCombat.enemy.interruptHealing()) { self.showAction('Healing Interrupted!'); currentCombat.playerAttack(); } } else if (currentCombat && currentCombat.isPlayerTurn) { currentCombat.playerAttack(); } }; return self; }); var Platform = Container.expand(function () { var self = Container.call(this); var platformGraphics = self.attachAsset('platform', { anchorX: 0.5, anchorY: 0.5 }); self.speed = -2; self.update = function () { self.x += self.speed; }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x87ceeb }); /**** * Game Code ****/ // Dragon type specific assets // Shadow & Fire - dark red // Light & Plant - light green // Energy & Void - indigo // Wind & Earth - saddle brown // Water & Void - midnight blue // Water & Wind - deep sky blue // Energy & Plant - lime green (rare) // Light & Fire - gold // Shadow & Wind - dark slate gray // Void & Plant - dark olive green var platforms = []; var adultDragons = []; var babyDragon = new BabyDragon(); var inCombat = false; var currentCombat = null; var platformSpawnTimer = 0; var dragonSpawnTimer = 0; var scrollSpeed = 2; // Dragon types var dragonTypes = ['Nilisty', 'Mistina', 'Nokan', 'Oragana', 'Farocha', 'Nonano', 'Jarare', 'Eriza', 'Katoza', 'Ultete']; // Initialize baby dragon babyDragon.x = 300; babyDragon.y = 1800; babyDragon.elementalStones = {}; game.addChild(babyDragon); // Create initial platforms for (var i = 0; i < 5; i++) { var platform = new Platform(); platform.x = 400 + i * 400; platform.y = 1800 + (Math.random() * 400 - 200); platforms.push(platform); game.addChild(platform); } // UI Elements var levelText = new Text2('Level: 1', { size: 60, fill: '#ffffff' }); levelText.anchor.set(0, 0); levelText.x = 150; levelText.y = 100; LK.gui.topLeft.addChild(levelText); // Elemental stones display below level var elementalStonesDisplay = new Text2('', { size: 35, fill: '#ffd700' }); elementalStonesDisplay.anchor.set(0, 0); elementalStonesDisplay.x = 150; elementalStonesDisplay.y = 170; LK.gui.topLeft.addChild(elementalStonesDisplay); // Remaining dragons display below stones var remainingDragonsDisplay = new Text2('', { size: 35, fill: '#ffffff' }); remainingDragonsDisplay.anchor.set(0, 0); remainingDragonsDisplay.x = 150; remainingDragonsDisplay.y = 210; LK.gui.topLeft.addChild(remainingDragonsDisplay); var healthText = new Text2('HP: 50/50', { size: 60, fill: '#ffffff' }); healthText.anchor.set(1, 0); healthText.x = 1900; healthText.y = 100; LK.gui.topRight.addChild(healthText); var scoreText = new Text2('Score: 0', { size: 60, fill: '#ffffff' }); scoreText.anchor.set(0.5, 0); scoreText.x = 1024; scoreText.y = 100; LK.gui.top.addChild(scoreText); var stonesText = new Text2('Stones: 0', { size: 70, fill: '#ffd700' }); stonesText.anchor.set(0.5, 0); stonesText.x = 1024; stonesText.y = 200; LK.gui.top.addChild(stonesText); // Individual stone counters display var stoneCountersText = new Text2('', { size: 45, fill: '#ffffff' }); stoneCountersText.anchor.set(0.5, 0); stoneCountersText.x = 1024; stoneCountersText.y = 280; LK.gui.top.addChild(stoneCountersText); game.down = function (x, y, obj) { if (inCombat) return; // Find nearest platform to jump to var nearestPlatform = null; var minDistance = Infinity; for (var i = 0; i < platforms.length; i++) { var platform = platforms[i]; var distance = Math.abs(platform.x - babyDragon.x); if (distance < minDistance && platform.x > babyDragon.x - 100) { minDistance = distance; nearestPlatform = platform; } } if (nearestPlatform) { babyDragon.jumpTo(nearestPlatform.y); } }; function spawnPlatform() { var platform = new Platform(); platform.x = 2200; platform.y = 1400 + Math.random() * 800; platforms.push(platform); game.addChild(platform); } function spawnDragon() { if (platforms.length > 0) { var randomPlatform = platforms[Math.floor(Math.random() * platforms.length)]; var dragonType = dragonTypes[Math.floor(Math.random() * dragonTypes.length)]; var dragon = new AdultDragon(dragonType, babyDragon.level); dragon.x = randomPlatform.x; dragon.y = randomPlatform.y - 80; adultDragons.push(dragon); game.addChild(dragon); } } function startCombat(dragon) { inCombat = true; currentCombat = new Combat(babyDragon, dragon); game.addChild(currentCombat); // Remove dragon from world var index = adultDragons.indexOf(dragon); if (index > -1) { adultDragons.splice(index, 1); } } game.update = function () { if (inCombat) { return; } // Update platforms for (var i = platforms.length - 1; i >= 0; i--) { var platform = platforms[i]; if (platform.x < -200) { platform.destroy(); platforms.splice(i, 1); } } // Update adult dragons for (var i = adultDragons.length - 1; i >= 0; i--) { var dragon = adultDragons[i]; dragon.x -= scrollSpeed; if (dragon.x < -200) { dragon.destroy(); adultDragons.splice(i, 1); continue; } // Check collision with baby dragon if (dragon.intersects(babyDragon)) { startCombat(dragon); dragon.destroy(); break; } } // Spawn platforms platformSpawnTimer += 16.67; if (platformSpawnTimer >= 2000) { spawnPlatform(); platformSpawnTimer = 0; } // Spawn dragons dragonSpawnTimer += 16.67; if (dragonSpawnTimer >= 5000) { spawnDragon(); dragonSpawnTimer = 0; } // Update UI levelText.setText('Level: ' + babyDragon.level); healthText.setText('HP: ' + babyDragon.health + '/' + babyDragon.maxHealth); scoreText.setText('Score: ' + LK.getScore()); // Count total elemental stones and create detailed display var totalStones = 0; var stoneDetails = []; var elementOrder = ['Fire', 'Water', 'Earth', 'Dark', 'Ice', 'Lightning', 'Light', 'Shadow']; for (var i = 0; i < elementOrder.length; i++) { var element = elementOrder[i]; if (babyDragon.elementalStones[element] && babyDragon.elementalStones[element] > 0) { var count = babyDragon.elementalStones[element]; totalStones += count; stoneDetails.push(element + ': ' + count); } } stonesText.setText('Total Stones: ' + totalStones); // Update individual stone counters if (stoneDetails.length > 0) { stoneCountersText.setText(stoneDetails.join(' | ')); } else { stoneCountersText.setText('No elemental stones collected'); } // Update elemental stones display below level if (stoneDetails.length > 0) { elementalStonesDisplay.setText('Stones: ' + stoneDetails.slice(0, 3).join(', ')); } else { elementalStonesDisplay.setText('Stones: None collected'); } // Calculate remaining dragons to defeat for next level var remainingDragons = babyDragon.experienceToNext - babyDragon.experience; remainingDragonsDisplay.setText('Dragons to next level: ' + remainingDragons); };

===================================================================
--- original.js
+++ change.js
@@ -217,9 +217,9 @@
 		}
 		self.player.elementalStones[self.enemy.element]++;
 		LK.setScore(LK.getScore() + 100);
 		LK.getSound('victory').play();
-		self.ui.showAction('Victory! Level: ' + self.player.level + ' XP: ' + self.player.experience + '/' + self.player.experienceToNext);
+		self.ui.showAction('Victory! Gained ' + self.enemy.element + ' Stone! Level: ' + self.player.level + ' XP: ' + self.player.experience + '/' + self.player.experienceToNext);
 		LK.setTimeout(function () {
 			inCombat = false;
 			currentCombat = null;
 			self.destroy();
@@ -558,25 +558,29 @@
 	scoreText.setText('Score: ' + LK.getScore());
 	// Count total elemental stones and create detailed display
 	var totalStones = 0;
 	var stoneDetails = [];
-	for (var element in babyDragon.elementalStones) {
-		var count = babyDragon.elementalStones[element];
-		totalStones += count;
-		stoneDetails.push(element + ': ' + count);
+	var elementOrder = ['Fire', 'Water', 'Earth', 'Dark', 'Ice', 'Lightning', 'Light', 'Shadow'];
+	for (var i = 0; i < elementOrder.length; i++) {
+		var element = elementOrder[i];
+		if (babyDragon.elementalStones[element] && babyDragon.elementalStones[element] > 0) {
+			var count = babyDragon.elementalStones[element];
+			totalStones += count;
+			stoneDetails.push(element + ': ' + count);
+		}
 	}
 	stonesText.setText('Total Stones: ' + totalStones);
 	// Update individual stone counters
 	if (stoneDetails.length > 0) {
 		stoneCountersText.setText(stoneDetails.join(' | '));
 	} else {
-		stoneCountersText.setText('No stones collected');
+		stoneCountersText.setText('No elemental stones collected');
 	}
 	// Update elemental stones display below level
 	if (stoneDetails.length > 0) {
 		elementalStonesDisplay.setText('Stones: ' + stoneDetails.slice(0, 3).join(', '));
 	} else {
-		elementalStonesDisplay.setText('Stones: None');
+		elementalStonesDisplay.setText('Stones: None collected');
 	}
 	// Calculate remaining dragons to defeat for next level
 	var remainingDragons = babyDragon.experienceToNext - babyDragon.experience;
 	remainingDragonsDisplay.setText('Dragons to next level: ' + remainingDragons);

Creation History

Images

Sounds & Music

Used plugins