/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");
var storage = LK.import("@upit/storage.v1");

/**** 
* Classes
****/ 
//Make a Bubble class by using the LK expand method to extend Container.
var Bubble = Container.expand(function () {
	var self = Container.call(this);
	//Get and automatically addChild to self asset with id 'bubble' with the anchor point set to .5, .5
	var bubbleGraphics = self.attachAsset('bubble', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	//Event handler called when a press happens on element. This is automatically called on press if bubble is attached.
	//Do not call this from the game source code as well. 
	self.down = function (x, y, obj) {
		// Play pop sound
		LK.getSound('pop').play();
		// Increase score
		LK.setScore(LK.getScore() + 1);
		// Remove bubble from array and destroy it
		bubbles.splice(bubbles.indexOf(self), 1);
		self.destroy();
	};
	self.lastX = self.x;
	self.lastY = self.y;
	return self; //You must return self if you want other classes to be able to inherit from this class
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x000000 //Init game with black background
});

/**** 
* Game Code
****/ 
//Storage library which should be used for persistent game data
//Minimalistic tween library which should be used for animations over time, including tinting / colouring an object, scaling, rotating, or changing any game object property.
//Only include the plugins you need to create the game.
//We have access to the following plugins. (Note that the variable names used are mandetory for each plugin)
// Initialize assets used in this game. Scale them according to what is needed for the game.
// or via static code analysis based on their usage in the code.
// Assets are automatically created and loaded either dynamically during gameplay 
/* 
Supported Types:
1. Shape:
	- Simple geometric figures with these properties:
		* width: (required) pixel width of the shape.
		* height: (required) pixel height of the shape.
		* color: (required) color of the shape.
		* shape: (required) type of shape. Valid options: 'box', 'ellipse'.
2. Image:
	- Imported images with these properties:
		* width: (required) pixel resolution width.
		* height: (required) pixel resolution height.
		* id: (required) identifier for the image.
		* flipX: (optional) horizontal flip. Valid values: 0 (no flip), 1 (flip).
		* flipY: (optional) vertical flip. Valid values: 0 (no flip), 1 (flip).
		* orientation: (optional) rotation in multiples of 90 degrees, clockwise. Valid values:
			- 0: No rotation.
			- 1: Rotate 90 degrees.
			- 2: Rotate 180 degrees.
			- 3: Rotate 270 degrees.
			Note: Width and height remain unchanged upon flipping.
3. Sound:
	- Sound effects with these properties:
			* id: (required) identifier for the sound.
			* volume: (optional) custom volume. Valid values are a float from 0 to 1.
4. Music:
- In contract to sound effects, only one music can be played at a time
- Music is using the same API to initilize just like sound.
- Music loops by default
- Music with these config options:
		* id: (required) identifier for the sound.
	* volume: (optional) custom volume. Valid values are a float from 0 to 1.
	* start: (optional) a float from 0 to 1 used for cropping and indicates the start of the cropping
	* end: (optional) a float from 0 to 1 used for cropping and indicates the end of the cropping
*/
//Note game dimensions are 2048x2732
// Attach background shape to the game
var background = LK.getAsset('background', {
	anchorX: 0.0,
	anchorY: 0.0,
	x: 0,
	y: 0
});
game.addChild(background);
// Create an array to hold all bubbles
var bubbles = [];
// Function to create bubbles
function createBubbles(num) {
	var rows = Math.ceil(num / 12) + 2; // Calculate number of rows needed and add more rows
	for (var row = 0; row < rows; row++) {
		// Loop through each row
		for (var i = 0; i < 12; i++) {
			// Create 12 bubbles per row
			var bubble = new Bubble();
			var colors = [0x00bfff, 0xff6347, 0x32cd32, 0xffd700, 0x8a2be2]; // Array of different colors
			var randomColor = colors[Math.floor(Math.random() * colors.length)];
			bubble.children[0].tint = randomColor; // Apply random color to bubble
			bubble.x = i * 180 + 100; // Increase horizontal spacing for better separation
			bubble.y = row * 200 + 300; // Increase vertical spacing for better separation 
			bubbles.push(bubble);
			game.addChild(bubble);
		}
	}
}
// Create initial bubbles
createBubbles(30); // Start with 30 bubbles for the first level
// Score display
var scoreTxt = new Text2('0', {
	size: 150,
	fill: 0xFFFFFF
});
scoreTxt.setText(LK.getScore());
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
// Update score display
function updateScore() {
	scoreTxt.setText(LK.getScore());
}
// Ask LK engine to update game every game tick
game.update = function () {
	// Check if all bubbles are popped
	if (bubbles.length === 0) {
		// Display 'GOOD JOB' message
		var goodJobTxt = new Text2('GOOD JOB', {
			size: 200,
			fill: 0xFFFFFF
		});
		goodJobTxt.anchor.set(0.5, 0.5);
		goodJobTxt.x = 2048 / 2;
		goodJobTxt.y = 2732 / 2;
		game.addChild(goodJobTxt);
		// Make bubbles disappear for a few seconds
		bubbles.forEach(function (bubble) {
			bubble.visible = false;
		});
		// Set a timeout to remove the 'GOOD JOB' message and make bubbles reappear
		LK.setTimeout(function () {
			game.removeChild(goodJobTxt);
			bubbles.forEach(function (bubble) {
				bubble.visible = true;
			});
			// Advance to next level
			createBubbles(40); // Start level 2 with 40 bubbles
		}, 2000); // 2000 milliseconds = 2 seconds
	}
	updateScore();
};

===================================================================
--- original.js
+++ change.js
@@ -83,10 +83,16 @@
 	* start: (optional) a float from 0 to 1 used for cropping and indicates the start of the cropping
 	* end: (optional) a float from 0 to 1 used for cropping and indicates the end of the cropping
 */
 //Note game dimensions are 2048x2732
-//Change background color
-game.setBackgroundColor(0x87ceeb); //Change background color to sky blue
+// Attach background shape to the game
+var background = LK.getAsset('background', {
+	anchorX: 0.0,
+	anchorY: 0.0,
+	x: 0,
+	y: 0
+});
+game.addChild(background);
 // Create an array to hold all bubbles
 var bubbles = [];
 // Function to create bubbles
 function createBubbles(num) {