/**** 
* Classes
****/ 
// Assets will be automatically generated based on usage in the code.
var Basketball = Container.expand(function () {
	var self = Container.call(this);
	self.ballGraphics = self.attachAsset('basketball', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.speedY = 0;
	self.gravity = 0.5;
	self.isThrown = false;
	self.scored = false; // Add a flag to track if the ball has scored
	self["throw"] = function (power, angle, horizontalSpeed) {
		self.speedY = -power / 2;
		self.speedX = horizontalSpeed;
		self.isThrown = true;
		self.scored = false; // Reset the scored flag when the ball is thrown
	};
	self.update = function () {
		if (self.isThrown) {
			self.y += self.speedY;
			self.x += self.speedX;
			self.speedY += self.gravity;
			self.ballGraphics.rotation -= 0.1;
		}
	};
});
var Character = Container.expand(function () {
	var self = Container.call(this);
	var characterGraphics = self.attachAsset('Character', {
		anchorX: 1,
		anchorY: 1
	});
});
var Cloud = Container.expand(function () {
	var self = Container.call(this);
	var cloudGraphics = self.attachAsset('Cloud', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.speedX = -2;
	self.scaleSpeed = 0.01;
	self.update = function () {
		self.x += self.speedX;
		self.scaleX += self.scaleSpeed;
		self.scaleY += self.scaleSpeed;
		if (self.scaleX > 1.5 || self.scaleX < 0.5) {
			self.scaleSpeed = -self.scaleSpeed;
		}
	};
});
var Hoop = Container.expand(function () {
	var self = Container.call(this);
	var hoopGraphics = self.attachAsset('hoop', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.moveSpeed = 2;
	self.update = function () {
		self.x = touchdown.x;
		self.y = touchdown.y;
	};
	self.parent = touchdown;
});
var Obstacle01 = Container.expand(function () {
	var self = Container.call(this);
	self.obstacleGraphics = self.attachAsset('Obstacle01', {
		anchorX: 0.8,
		anchorY: -0.35,
		alpha: 1
	});
	self.parent = touchdown;
});
var Touchdown = Container.expand(function () {
	var self = Container.call(this);
	var touchdownGraphics = self.attachAsset('Touchdown', {
		anchorX: 4.7,
		anchorY: -1.25,
		alpha: 1
	});
});
var Yarn = Container.expand(function () {
	var self = Container.call(this);
	var yarnGraphics = self.attachAsset('Yarn', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.speedX = -10;
	self.jumpHeight = 2 * self.height; // Twice its height
	self.originalY = 0; // To be set on spawn
	self.jumpIntervalMin = 5000; // Minimum jump interval in milliseconds
	self.jumpIntervalMax = 9000; // Maximum jump interval in milliseconds
	self.isJumping = false; // Track if currently jumping
	self.update = function () {
		self.x += self.speedX;
		// If the yarn hits the left or right edge of the screen, reverse its direction
		if (self.x < 100 || self.x > 2210 - self.width) {
			self.speedX = -self.speedX;
		}
		// Implement jump logic
		if (!self.isJumping) {
			self.isJumping = true;
			var jumpDuration = 500; // Reduced jump up and down duration for snappier movement
			var jumpDelay = Math.floor(Math.random() * (self.jumpIntervalMax - self.jumpIntervalMin + 1)) + self.jumpIntervalMin;
			LK.setTimeout(function () {
				// Jump up
				var jumpUp = LK.setInterval(function () {
					if (self.y > self.originalY - self.jumpHeight) {
						self.y -= 10;
					} else {
						LK.clearInterval(jumpUp);
						// Jump down
						var jumpDown = LK.setInterval(function () {
							if (self.y < self.originalY) {
								self.y += 10;
							} else {
								self.y = self.originalY;
								LK.clearInterval(jumpDown);
								self.isJumping = false;
							}
						}, jumpDuration / self.jumpHeight);
					}
				}, jumpDuration / self.jumpHeight);
			}, jumpDelay);
		}
		// Rotate the yarn depending on which X it's heading towards
		if (self.speedX > 0) {
			yarnGraphics.rotation += 0.1;
		} else {
			yarnGraphics.rotation -= 0.1;
		}
	};
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x87CEEB // Light blue background to simulate sky
});

/**** 
* Game Code
****/ 
var smiley, ciImage, catImage;
var basketball = game.addChild(new Basketball());
var character = game.addChild(new Character());
character.x = 550;
character.y = 2732;
var hoop = game.addChild(new Hoop());
basketball.x = 400;
basketball.y = 2732 - 450; // Start near the bottom
hoop.x = 2048 / 2;
hoop.y = 2732 / 4; // Position the hoop in the upper part of the screen
var score = 0;
// Create sky and position it at the top of the screen
var sky = LK.getAsset('Sky', {
	anchorX: 0.5,
	anchorY: 0.5
});
sky.x = 800 / 2;
sky.y = 300;
game.addChild(sky);
var scoreTxt = new Text2(score.toString(), {
	size: 100,
	fill: "#000000"
});
game.addChild(scoreTxt);
scoreTxt.x = sky.x - 10;
scoreTxt.y = sky.y - 0;
var touchdown = new Touchdown();
var obstacle01 = game.addChild(new Obstacle01());
obstacle01.x = 2048 / 2;
obstacle01.y = 2732 / 2;
touchdown.x = 2048 / 2;
touchdown.y = 2732 / 2;
game.addChild(touchdown);
// Draw and center the Board on the screen
var board = LK.getAsset('Board', {
	anchorX: 0.5,
	anchorY: 0.5
});
board.x = 2048 / 2;
board.y = 3532 / 2;
game.addChildAt(board, 0);
game.on('down', function (obj) {
	if (!basketball.isThrown) {
		var event = obj.event;
		var pos = event.getLocalPosition(game);
		// Calculate the arc between the ball and the hoop
		var dx = hoop.x - basketball.x;
		var dy = hoop.y - basketball.y;
		var distance = Math.sqrt(dx * dx + dy * dy);
		var angle = Math.atan2(dy, dx) / 2; // Reduce the angle of the throw
		var power = (2732 - pos.y) / 30;
		var horizontalSpeed = Math.abs(basketball.x - pos.x) / 100; // Calculate the horizontal speed based on the distance from the click to the basketball
		basketball["throw"](power, angle, horizontalSpeed);
		// Make the character hop a little bit vertically
		character.y -= 50;
		LK.setTimeout(function () {
			character.y += 50;
		}, 200);
	}
});
var clouds = [];
LK.on('tick', function () {
	if (LK.ticks % 360 == 0) {
		var newCloud = new Cloud();
		newCloud.x = 2048;
		newCloud.y = Math.random() * 800;
		newCloud.scaleX = newCloud.scaleY = Math.random() * 300 + 50; // Increase size variation
		clouds.push(newCloud);
		game.addChildAt(newCloud, 0);
	}
	for (var i = clouds.length - 1; i >= 0; i--) {
		clouds[i].update();
		if (clouds[i].x < -500) {
			clouds[i].destroy();
			clouds.splice(i, 1);
		}
	}
	game.setChildIndex(basketball, game.children.length - 1);
	basketball.update();
	hoop.update();
	// Check for scoring
	if (basketball.intersects(touchdown) && !basketball.scored) {
		score += 1;
		scoreTxt.setText(score.toString());
		basketball.scored = true; // Set the scored flag to true
		// Move basketball down slowly
		basketball.speedY = 2;
		basketball.speedX = 0;
		basketball.gravity = 0;
		// Fade out the ball progressively until it disappears
		var fadeOutInterval = LK.setInterval(function () {
			basketball.ballGraphics.alpha -= 0.05;
			if (basketball.ballGraphics.alpha <= 0) {
				LK.clearInterval(fadeOutInterval);
				basketball.destroy();
				basketball = game.addChild(new Basketball());
				basketball.x = 400;
				basketball.y = 2732 - 450;
				basketball.isThrown = false;
				basketball.ballGraphics.rotation = 0;
				basketball.ballGraphics.alpha = 1.0;
			}
		}, 100);
		// Stop the ball from moving down after 2 seconds
		LK.setTimeout(function () {
			basketball.speedY = 0;
		}, 2000);
		// Respawn touchdown
		LK.setTimeout(function () {
			touchdown.destroy(); // Destroy the previous instance of touchdown
			touchdown = new Touchdown();
			touchdown.x = Math.random() * 1024 + 1024; // Random x position in the middle or right side of the screen
			touchdown.y = Math.random() * 1366 + 1366 / 2; // Random y position in the middle or top side of the screen
			game.addChild(touchdown);
			// Move hoop and obstacle01 to the new touchdown position
			hoop.x = touchdown.x;
			hoop.y = Math.max(touchdown.y, 1366 / 2); // Ensure hoop doesn't go too low
			obstacle01.x = touchdown.x;
			obstacle01.y = Math.max(touchdown.y, 1366 / 2); // Ensure obstacle01 doesn't go too low
		}, 2000);
	}
	// Update Yarn instances
	game.children.forEach(function (child) {
		if (child instanceof Yarn) {
			child.update();
		}
	});
	// Implement game over if the basketball goes off-screen
	if (basketball.y > 2732) {
		LK.showGameOver();
	}
	// Trigger basketball throw when yarn or cat intersects with basketball
	game.children.forEach(function (child) {
		if ((child instanceof Yarn || child === catImage) && basketball.intersects(child) && !basketball.isThrown) {
			var dx = hoop.x - basketball.x;
			var dy = hoop.y - basketball.y;
			var distance = Math.sqrt(dx * dx + dy * dy);
			var angle = Math.atan2(dy, dx) / 2; // Reduce the angle of the throw
			var power = Math.abs(dy) / 30;
			var horizontalSpeed = Math.abs(dx) / 100; // Calculate the horizontal speed based on the distance from the intersecting object to the basketball
			basketball["throw"](power, angle, horizontalSpeed);
		}
	});
	// Spawn yarn inside the playspace when score equals to 0 or higher
	if (score >= 1 && !game.children.some(function (child) {
		return child instanceof Yarn;
	})) {
		var yarn = game.addChild(new Yarn());
		yarn.x = 1850; // Center of the playspace
		yarn.y = 2625; // Center of the playspace
		yarn.originalY = yarn.y; // Set the original Y position on spawn
	}
	// Check for collision with Obstacle01 only if the basketball has not scored
	if (!basketball.scored && basketball.intersects(obstacle01)) {
		// Bounce the basketball in the opposite direction
		basketball.speedY = -basketball.speedY;
		basketball.speedX = -basketball.speedX;
	}
	// Check if yarn exists
	var yarnExists = game.children.some(function (child) {
		return child instanceof Yarn;
	});
	// If yarn exists, destroy smiley_image
	if (yarnExists && smiley) {
		smiley.destroy();
		smiley = null;
	} else if (!smiley) {
		// Create smiley image and center it on the screen on the top layer
		smiley = LK.getAsset('smiley_image', {
			anchorX: 0.5,
			anchorY: 0.5
		});
		smiley.x = 1849;
		smiley.y = 2624;
		game.addChild(smiley);
	}
	// Create CI and Cat images and move them top right and add them to the top layer
	// Create CI and Cat images and move them top right and add them to the top layer
	if (score < 2) {
		if (!ciImage) {
			ciImage = LK.getAsset('CI', {
				anchorX: 0.5,
				anchorY: 0.5
			});
			ciImage.x = 175;
			ciImage.y = 1550;
			game.addChild(ciImage);
		}
		if (catImage) {
			catImage.destroy();
			catImage = null;
		}
	} else {
		if (ciImage) {
			ciImage.destroy(); // Correctly destroy ciImage using .destroy() method
			ciImage = null;
		}
		if (!catImage) {
			catImage = LK.getAsset('Cat', {
				anchorX: 0.5,
				anchorY: 0.5
			});
			catImage.x = 175;
			catImage.y = 1550; // Adjust y position to match initial setup
			game.addChild(catImage);
			// Initialize bounce count and state
			var bounceCount = 0;
			var isBouncingUp = true;
			var jumpTowardsBasketball = function jumpTowardsBasketball() {
				var dx = basketball.x - catImage.x;
				var dy = basketball.y - catImage.y;
				var distance = Math.sqrt(dx * dx + dy * dy);
				var jumpSpeedX = dx / (distance / 10); // Adjust horizontal speed based on distance
				var jumpSpeedY = dy / (distance / 10); // Adjust vertical speed based on distance
				// Gradual transition towards basketball
				var transitionToBasketball = function transitionToBasketball() {
					var transitionInterval = LK.setInterval(function () {
						var dx = basketball.x - catImage.x;
						var dy = basketball.y - catImage.y;
						var stepX = dx * 0.1; // Move 10% of the distance per tick
						var stepY = dy * 0.1; // Move 10% of the distance per tick
						catImage.x += stepX;
						catImage.y += stepY;
						// Check if close enough to consider as overlapped
						if (Math.abs(dx) < 5 && Math.abs(dy) < 5) {
							LK.clearInterval(transitionInterval);
							catImage.x = basketball.x; // Ensure exact overlap
							catImage.y = basketball.y; // Ensure exact overlap
						}
					}, 16); // Run every frame (assuming 60fps, 1000ms/60)
				};
				transitionToBasketball();
			};
			// Bounce animation
			var bounceAnimation = LK.setInterval(function () {
				if (isBouncingUp) {
					catImage.y -= 30; // Move up
				} else {
					catImage.y += 30; // Move down
				}
				// Change direction at the peak of the bounce
				if (catImage.y <= 1450 || catImage.y >= 1550) {
					isBouncingUp = !isBouncingUp;
					if (!isBouncingUp) {
						bounceCount++;
					}
				}
				// After 5 bounces, jump towards the basketball and initiate fade out
				if (bounceCount >= 8) {
					LK.clearInterval(bounceAnimation);
					jumpTowardsBasketball(); // Initiate jump towards basketball
					// Start fade out process after intersecting with basketball
					LK.setTimeout(function () {
						var fadeOutInterval = LK.setInterval(function () {
							catImage.alpha -= 0.05; // Decrease opacity
							if (catImage.alpha <= 0) {
								LK.clearInterval(fadeOutInterval);
								catImage.destroy(); // Destroy cat image after fade out
							}
						}, 100); // Fade out over 2 seconds
					}, 2000); // Start fade out 2 seconds after intersection
				}
			}, 50); // Adjust timing for bounce speed
		}
	}
});

===================================================================
--- original.js
+++ change.js
@@ -390,12 +390,22 @@
 					if (!isBouncingUp) {
 						bounceCount++;
 					}
 				}
-				// After 5 bounces, jump towards the basketball
+				// After 5 bounces, jump towards the basketball and initiate fade out
 				if (bounceCount >= 8) {
 					LK.clearInterval(bounceAnimation);
 					jumpTowardsBasketball(); // Initiate jump towards basketball
+					// Start fade out process after intersecting with basketball
+					LK.setTimeout(function () {
+						var fadeOutInterval = LK.setInterval(function () {
+							catImage.alpha -= 0.05; // Decrease opacity
+							if (catImage.alpha <= 0) {
+								LK.clearInterval(fadeOutInterval);
+								catImage.destroy(); // Destroy cat image after fade out
+							}
+						}, 100); // Fade out over 2 seconds
+					}, 2000); // Start fade out 2 seconds after intersection
 				}
 			}, 50); // Adjust timing for bounce speed
 		}
 	}