Upit | Learn about creating the game Find the Button with gen AI

/**** * Classes ****/ // BackgroundContainer class var BackgroundContainer = Container.expand(function () { var self = Container.call(this); }); //<Assets used in the game will automatically appear here> // Button class var Button = Container.expand(function (buttonType) { var self = Container.call(this); var buttonGraphics = self.attachAsset(buttonType, { anchorX: 0.5, anchorY: 0.5 }); self.update = function () { // No specific update logic for the button }; self.down = function (x, y, obj) { // When the button is clicked, increase the score and move the button to a new random position LK.setScore(LK.getScore() + 1); scoreTxt.setText(LK.getScore().toString()); self.x = Math.random() * (2048 - buttonGraphics.width) + buttonGraphics.width / 2; self.y = Math.random() * (2732 - buttonGraphics.height) + buttonGraphics.height / 2; updateTargetButton(); }; }); // ForegroundContainer class var ForegroundContainer = Container.expand(function () { var self = Container.call(this); }); // MidgroundContainer class var MidgroundContainer = Container.expand(function () { var self = Container.call(this); }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 //Init game with black background }); /**** * Game Code ****/ // Initialize BackgroundContainer, MidgroundContainer, and ForegroundContainer var backgroundContainer = new BackgroundContainer(); var midgroundContainer = new MidgroundContainer(); var foregroundContainer = new ForegroundContainer(); // Add containers to the game in the correct order game.addChild(backgroundContainer); game.addChild(midgroundContainer); game.addChild(foregroundContainer); // Create a variable to keep track of the current level var currentLevel = 1; // Initialize score text var scoreTxt = new Text2(currentLevel.toString(), { size: 150, fill: "#ffffff" }); scoreTxt.anchor.set(0.5, 0); LK.gui.top.addChild(scoreTxt); // Initialize target button display with a default button asset var targetButtonTxt = LK.getAsset('Button_1', { anchorX: 0.5, anchorY: 0.5 }); targetButtonTxt.anchor.set(0.5, 0); LK.gui.top.addChild(targetButtonTxt); // Function to update the target button display function updateTargetButton() { var availableButtons = ['Button_1', 'Button_2']; for (var i = 3; i <= currentLevel; i++) { availableButtons.push('Button_' + i); } // Remove the previous target button from the available buttons var previousTarget = targetButtonTxt.assetId; availableButtons = availableButtons.filter(function (button) { return button !== previousTarget; }); // Pick a random button from the available buttons var newTargetButton = availableButtons[Math.floor(Math.random() * availableButtons.length)]; // Update the target button display targetButtonTxt.destroy(); targetButtonTxt = LK.getAsset(newTargetButton, { anchorX: 0.5, anchorY: 0.5 }); targetButtonTxt.anchor.set(0.5, 0); LK.gui.top.addChild(targetButtonTxt); // Randomize the location of all existing buttons game.children.forEach(function (child) { if (child instanceof Button) { child.x = Math.random() * (2048 - child.width) + child.width / 2; child.y = Math.random() * (2732 - child.height) + child.height / 2; } }); } // Create a variable to keep track of the current level var currentLevel = 1; // Create the button1 and add it to the midgroundContainer var button1 = midgroundContainer.addChild(new Button('Button_1')); button1.x = 2048 / 3; button1.y = 2732 / 2; // Create the button2 and add it to the midgroundContainer var button2 = midgroundContainer.addChild(new Button('Button_2')); button2.x = 2 * 2048 / 3; button2.y = 2732 / 2; // Update function for the game game.update = function () { // Increase the level after each correct button is found if (LK.getScore() >= currentLevel) { currentLevel++; scoreTxt.setText(currentLevel.toString()); // Introduce a new button at each level until level 11 if (currentLevel <= 11) { var button = midgroundContainer.addChild(new Button('Button_' + currentLevel)); button.x = Math.random() * (2048 - button.width) + button.width / 2; button.y = Math.random() * (2732 - button.height) + button.height / 2; } // Randomize the location of all existing buttons updateTargetButton(); } }; // Mouse or touch down on the game object game.down = function (x, y, obj) { // No specific logic for game down event }; // Mouse or touch up on the game object game.up = function (x, y, obj) { // No specific logic for game up event }; // Mouse or touch move on the game object game.move = function (x, y, obj) { // No specific logic for game move event };

===================================================================
--- original.js
+++ change.js
@@ -1,7 +1,11 @@
 /**** 
 * Classes
 ****/ 
+// BackgroundContainer class
+var BackgroundContainer = Container.expand(function () {
+	var self = Container.call(this);
+});
 //<Assets used in the game will automatically appear here>
 // Button class
 var Button = Container.expand(function (buttonType) {
 	var self = Container.call(this);
@@ -20,19 +24,35 @@
 		self.y = Math.random() * (2732 - buttonGraphics.height) + buttonGraphics.height / 2;
 		updateTargetButton();
 	};
 });
+// ForegroundContainer class
+var ForegroundContainer = Container.expand(function () {
+	var self = Container.call(this);
+});
+// MidgroundContainer class
+var MidgroundContainer = Container.expand(function () {
+	var self = Container.call(this);
+});
 
 /**** 
 * Initialize Game
 ****/ 
 var game = new LK.Game({
-	backgroundColor: 0x000000 //Init game with black background 
+	backgroundColor: 0x000000 //Init game with black background
 });
 
 /**** 
 * Game Code
 ****/ 
+// Initialize BackgroundContainer, MidgroundContainer, and ForegroundContainer
+var backgroundContainer = new BackgroundContainer();
+var midgroundContainer = new MidgroundContainer();
+var foregroundContainer = new ForegroundContainer();
+// Add containers to the game in the correct order
+game.addChild(backgroundContainer);
+game.addChild(midgroundContainer);
+game.addChild(foregroundContainer);
 // Create a variable to keep track of the current level
 var currentLevel = 1;
 // Initialize score text
 var scoreTxt = new Text2(currentLevel.toString(), {
@@ -78,14 +98,14 @@
 	});
 }
 // Create a variable to keep track of the current level
 var currentLevel = 1;
-// Create the button1 and add it to the game
-var button1 = game.addChild(new Button('Button_1'));
+// Create the button1 and add it to the midgroundContainer
+var button1 = midgroundContainer.addChild(new Button('Button_1'));
 button1.x = 2048 / 3;
 button1.y = 2732 / 2;
-// Create the button2 and add it to the game
-var button2 = game.addChild(new Button('Button_2'));
+// Create the button2 and add it to the midgroundContainer
+var button2 = midgroundContainer.addChild(new Button('Button_2'));
 button2.x = 2 * 2048 / 3;
 button2.y = 2732 / 2;
 // Update function for the game
 game.update = function () {
@@ -94,9 +114,9 @@
 		currentLevel++;
 		scoreTxt.setText(currentLevel.toString());
 		// Introduce a new button at each level until level 11
 		if (currentLevel <= 11) {
-			var button = game.addChild(new Button('Button_' + currentLevel));
+			var button = midgroundContainer.addChild(new Button('Button_' + currentLevel));
 			button.x = Math.random() * (2048 - button.width) + button.width / 2;
 			button.y = Math.random() * (2732 - button.height) + button.height / 2;
 		}
 		// Randomize the location of all existing buttons

Creation History

Images

Sounds & Music