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

/**** 
* Classes
****/ 
var PlayerCharacter = Container.expand(function () {
	var self = Container.call(this);
	var characterGraphics = self.attachAsset('playerCharacter', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Set brown transparent color
	characterGraphics.alpha = 0.7;
	return self;
});
//Storage library which should be used for persistent game data
// var storage = LK.import('@upit/storage.v1');
//Library for using the camera (the background becomes the user's camera video feed) and the microphone. It can access face coordinates for interactive play, as well detect microphone volume / voice interactions
// var facekit = LK.import('@upit/facekit.v1');
//Classes can only be defined here. You cannot create inline classes in the games code.
var TerrainBlock = Container.expand(function (color, speed, noteId) {
	var self = Container.call(this);
	self.color = color;
	self.speed = speed;
	self.noteId = noteId;
	var blockGraphics = self.attachAsset('terrainBlock' + self.color, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// Create vertical line extending from block
	self.line = new Container();
	// Get color hex value from colorMap
	var lineColor = 0xFFFFFF; // Default white
	if (color === 'Red') {
		lineColor = 0xFF0000;
	} else if (color === 'Orange') {
		lineColor = 0xFFA500;
	} else if (color === 'Yellow') {
		lineColor = 0xFFFF00;
	} else if (color === 'Green') {
		lineColor = 0x008000;
	} else if (color === 'Blue') {
		lineColor = 0x0000FF;
	} else if (color === 'Indigo') {
		lineColor = 0x4B0082;
	} else if (color === 'Violet') {
		lineColor = 0xEE82EE;
	}
	// Create thin vertical line shape
	var lineGraphics = LK.getAsset('line' + self.color, {
		width: 4,
		height: 3000,
		// Very tall to reach top
		color: lineColor,
		shape: 'box',
		anchorX: 0.5,
		anchorY: 1
	});
	self.line.addChild(lineGraphics);
	self.addChild(self.line);
	self.update = function () {
		self.y += self.speed;
		// Keep line positioned at block center extending upward
		if (self.line) {
			self.line.x = 0;
			self.line.y = 0;
		}
	};
	return self;
});

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

/**** 
* Game Code
****/ 
//Note game dimensions are 2048x2732
/*
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
*/
// Assets are automatically created and loaded either dynamically during gameplay
// or via static code analysis based on their usage in the code.
// Initialize assets used in this game. Scale them according to what is needed for the game.
//We have access to the following plugins. (Note that the variable names used are mandetory for each plugin)
//Only include the plugins you need to create the game.
//Minimalistic tween library which should be used for animations over time, including tinting / colouring an object, scaling, rotating, or changing any game object property.
var gameState = 'intro'; // Can be 'intro' or 'playing'
var introBackground;
var startButton;
var terrainBlocks = [];
var playerCharacter = null; // Will be initialized in startGame()
var scoreTxt = null; // Will be initialized in startGame()
var dragNode = null; // Remains global, used by input handlers
var spawnInterval = 1000; // Milliseconds between block spawns
var lastSpawnTime = 0; // Will be set in startGame() to control first spawn
var terrainSpeed = 9;
// Mapping colors to hex and sound IDs
var colorMap = {
	'Red': '#FF0000',
	'Orange': '#FFA500',
	'Yellow': '#FFFF00',
	'Green': '#008000',
	'Blue': '#0000FF',
	'Indigo': '#4B0082',
	'Violet': '#EE82EE'
};
var colorNoteMap = {
	'Red': 'noteC',
	'Orange': 'noteD',
	'Yellow': 'noteE',
	'Green': 'noteF',
	'Blue': 'noteG',
	'Indigo': 'noteA',
	'Violet': 'noteB'
};
game.setBackgroundColor(0x000000); // Set background color once
// Player character, score text, game-specific input handlers, and music
// will be initialized/started when the player starts the game via startGame().
// startGame function initializes all game-specific elements and transitions the game state.
function startGame() {
	gameState = 'playing';
	// Remove intro elements
	if (introBackground) {
		introBackground.destroy();
		introBackground = null;
	}
	if (startButton) {
		startButton.destroy();
		startButton = null;
	}
	// Initialize score text
	scoreTxt = new Text2('0', {
		size: 150,
		fill: 0xFFFFFF // White color for the score text
	});
	scoreTxt.setText(LK.getScore());
	scoreTxt.anchor.set(0.5, 0); // Anchor at top-center
	LK.gui.top.addChild(scoreTxt);
	// Initialize player character
	playerCharacter = new PlayerCharacter();
	playerCharacter.x = 2048 / 2; // Center horizontally
	playerCharacter.y = 2732 - playerCharacter.height - 100; // Position near bottom
	game.addChild(playerCharacter);
	// Setup game input handlers, active only during 'playing' state
	game.down = function (x, y, obj) {
		if (gameState !== 'playing' || !playerCharacter) return;
		// Simple drag initiation: if player exists, it becomes draggable.
		dragNode = playerCharacter;
	};
	game.move = function (x, y, obj) {
		if (gameState !== 'playing' || !dragNode || !playerCharacter) return;
		// Keep player character within screen bounds horizontally
		playerCharacter.x = Math.max(playerCharacter.width / 2, Math.min(2048 - playerCharacter.width / 2, x));
	};
	game.up = function (x, y, obj) {
		if (gameState !== 'playing') return;
		dragNode = null; // Release draggable node
	};
	// Set lastSpawnTime to ensure the first block spawns quickly after game starts
	lastSpawnTime = Date.now() - spawnInterval;
	// Start background music
	LK.playMusic('Gamemusic1');
}
// Setup Intro Screen Elements
introBackground = LK.getAsset('Introbackground', {
	anchorX: 0,
	// Top-left anchor
	anchorY: 0,
	x: 0,
	// Position at top-left
	y: 0,
	width: 2048,
	// Cover full game width
	height: 2732 // Cover full game height
});
game.addChild(introBackground);
// Create and position the start button
var startButtonAsset = LK.getAsset('Startbutton', {
	anchorX: 0.5,
	// Center anchor for easier positioning
	anchorY: 0.5
});
startButton = game.addChild(startButtonAsset); // Add the asset instance to the game stage
startButton.x = 2048 / 2; // Center horizontally
// Position button 100px from the bottom of the screen (its bottom edge)
startButton.y = 2732 - startButton.height / 2 - 100;
startButton.interactive = true; // Enable interaction
startButton.buttonMode = true; // Show hand cursor on hover (desktop)
// Assign action to start button press
startButton.down = function () {
	if (gameState === 'intro') {
		// Ensure action only triggers once from intro state
		startGame();
	}
};
// The original game.down handler (if any at this point) is effectively replaced by the setup in startGame.
// The following game.move and game.up handlers from the original code also need to be removed.
// Original global game.move and game.up handlers are removed.
// They are now defined within the startGame() function and are specific to the 'playing' state.
game.update = function () {
	if (gameState !== 'playing') {
		return; // Skip game logic if not in 'playing' state (e.g., during intro)
	}
	var currentTime = Date.now();
	// Spawn new terrain blocks
	if (currentTime - lastSpawnTime > spawnInterval) {
		var colors = Object.keys(colorMap);
		var randomColor = colors[Math.floor(Math.random() * colors.length)];
		var noteId = colorNoteMap[randomColor];
		var newBlock = new TerrainBlock(randomColor, terrainSpeed, noteId);
		// Position block randomly at the top within game width
		newBlock.x = Math.random() * (2048 - newBlock.width) + newBlock.width / 2;
		newBlock.y = -newBlock.height; // Start above the screen
		terrainBlocks.push(newBlock);
		game.addChild(newBlock);
		lastSpawnTime = currentTime;
		// Gradually increase game speed / difficulty
		// spawnInterval = Math.max(500, spawnInterval - 1);
		// terrainSpeed = Math.min(15, terrainSpeed + 0.05);
	}
	// Update and check collisions for terrain blocks
	// Update and check collisions for terrain blocks
	for (var i = terrainBlocks.length - 1; i >= 0; i--) {
		var block = terrainBlocks[i];
		if (block.lastY === undefined) {
			block.lastY = block.y;
		}
		// Check if block is off-screen
		if (block.lastY < 2732 + block.height && block.y >= 2732 + block.height) {
			// Missed block - game over
			LK.effects.flashScreen(0xff0000, 1000);
			LK.showGameOver();
			break; // Exit loop as game is over
		}
		// Check for intersection with player character
		var currentIntersecting = block.intersects(playerCharacter);
		if (currentIntersecting) {
			// Collect any color block
			LK.setScore(LK.getScore() + 10);
			scoreTxt.setText(LK.getScore());
			// Create animation effect based on block color
			var animationAsset = null;
			if (block.color === 'Red') {
				animationAsset = LK.getAsset('Redanimation1', {
					anchorX: 0.5,
					anchorY: 0.5
				});
			} else if (block.color === 'Orange') {
				animationAsset = LK.getAsset('Orangeanimation1', {
					anchorX: 0.5,
					anchorY: 0.5
				});
			} else if (block.color === 'Yellow') {
				animationAsset = LK.getAsset('Yellowanimation1', {
					anchorX: 0.5,
					anchorY: 0.5
				});
			} else if (block.color === 'Green') {
				animationAsset = LK.getAsset('Greenanimation1', {
					anchorX: 0.5,
					anchorY: 0.5
				});
			} else if (block.color === 'Blue') {
				animationAsset = LK.getAsset('Blueanimation1', {
					anchorX: 0.5,
					anchorY: 0.5
				});
			} else if (block.color === 'Indigo') {
				animationAsset = LK.getAsset('Purpleanimation1', {
					anchorX: 0.5,
					anchorY: 0.5
				});
			} else if (block.color === 'Violet') {
				animationAsset = LK.getAsset('Pinkanimation1', {
					anchorX: 0.5,
					anchorY: 0.5
				});
			}
			if (animationAsset) {
				// Position animation at block location
				animationAsset.x = block.x;
				animationAsset.y = block.y;
				game.addChild(animationAsset);
				// Animate the animation asset
				tween(animationAsset, {
					scaleX: 3,
					scaleY: 3,
					alpha: 0,
					rotation: Math.PI * 2
				}, {
					duration: 800,
					easing: tween.easeOut,
					onFinish: function onFinish() {
						animationAsset.destroy();
					}
				});
			}
			// Add visual feedback with scale animation on player
			tween(playerCharacter, {
				scaleX: 1.2,
				scaleY: 1.2
			}, {
				duration: 100,
				easing: tween.easeOut,
				onFinish: function onFinish() {
					tween(playerCharacter, {
						scaleX: 1,
						scaleY: 1
					}, {
						duration: 100,
						easing: tween.easeIn
					});
				}
			});
			// Flash effect on collected block
			tween(block, {
				alpha: 0,
				scaleX: 1.5,
				scaleY: 1.5
			}, {
				duration: 200,
				easing: tween.easeOut
			});
			// Also fade out the line
			if (block.line) {
				tween(block.line, {
					alpha: 0
				}, {
					duration: 200,
					easing: tween.easeOut
				});
			}
			// Play specific sound based on block color with smooth volume fade
			var sound = null;
			if (block.color === 'Red') {
				sound = LK.getSound('redsound1');
			} else if (block.color === 'Orange') {
				sound = LK.getSound('orangesound1');
			} else if (block.color === 'Yellow') {
				sound = LK.getSound('yellowsound1');
			} else if (block.color === 'Green') {
				sound = LK.getSound('greensound1');
			} else if (block.color === 'Blue') {
				sound = LK.getSound('bluesound1');
			} else if (block.color === 'Indigo') {
				sound = LK.getSound('purplesound1');
			} else if (block.color === 'Violet') {
				sound = LK.getSound('pinksound1');
			}
			if (sound) {
				// Set initial volume to 0 for fade-in effect
				sound.volume = 0;
				sound.play();
				// Tween volume from 0 to 1 over 200ms for smooth fade-in
				tween(sound, {
					volume: 1
				}, {
					duration: 200,
					easing: tween.easeOut
				});
			}
			block.destroy();
			terrainBlocks.splice(i, 1);
		}
		block.lastY = block.y;
	}
};

===================================================================
--- original.js
+++ change.js
@@ -81,14 +81,9 @@
 
 /**** 
 * Game Code
 ****/ 
-//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
+//Note game dimensions are 2048x2732
 /*
 Supported Types:
 1. Shape:
 	- Simple geometric figures with these properties:
@@ -122,14 +117,23 @@
 	* 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
+// Assets are automatically created and loaded either dynamically during gameplay
+// or via static code analysis based on their usage in the code.
+// Initialize assets used in this game. Scale them according to what is needed for the game.
+//We have access to the following plugins. (Note that the variable names used are mandetory for each plugin)
+//Only include the plugins you need to create the game.
+//Minimalistic tween library which should be used for animations over time, including tinting / colouring an object, scaling, rotating, or changing any game object property.
+var gameState = 'intro'; // Can be 'intro' or 'playing'
+var introBackground;
+var startButton;
 var terrainBlocks = [];
-var playerCharacter = null;
-var scoreTxt = null;
+var playerCharacter = null; // Will be initialized in startGame()
+var scoreTxt = null; // Will be initialized in startGame()
+var dragNode = null; // Remains global, used by input handlers
 var spawnInterval = 1000; // Milliseconds between block spawns
-var lastSpawnTime = 7;
+var lastSpawnTime = 0; // Will be set in startGame() to control first spawn
 var terrainSpeed = 9;
 // Mapping colors to hex and sound IDs
 var colorMap = {
 	'Red': '#FF0000',
@@ -139,10 +143,8 @@
 	'Blue': '#0000FF',
 	'Indigo': '#4B0082',
 	'Violet': '#EE82EE'
 };
-// Play background music
-LK.playMusic('Gamemusic1');
 var colorNoteMap = {
 	'Red': 'noteC',
 	'Orange': 'noteD',
 	'Yellow': 'noteE',
@@ -150,39 +152,96 @@
 	'Blue': 'noteG',
 	'Indigo': 'noteA',
 	'Violet': 'noteB'
 };
-game.setBackgroundColor(0x000000); // Change background color to black
-scoreTxt = new Text2('0', {
-	size: 150,
-	fill: 0xFFFFFF
+game.setBackgroundColor(0x000000); // Set background color once
+// Player character, score text, game-specific input handlers, and music
+// will be initialized/started when the player starts the game via startGame().
+// startGame function initializes all game-specific elements and transitions the game state.
+function startGame() {
+	gameState = 'playing';
+	// Remove intro elements
+	if (introBackground) {
+		introBackground.destroy();
+		introBackground = null;
+	}
+	if (startButton) {
+		startButton.destroy();
+		startButton = null;
+	}
+	// Initialize score text
+	scoreTxt = new Text2('0', {
+		size: 150,
+		fill: 0xFFFFFF // White color for the score text
+	});
+	scoreTxt.setText(LK.getScore());
+	scoreTxt.anchor.set(0.5, 0); // Anchor at top-center
+	LK.gui.top.addChild(scoreTxt);
+	// Initialize player character
+	playerCharacter = new PlayerCharacter();
+	playerCharacter.x = 2048 / 2; // Center horizontally
+	playerCharacter.y = 2732 - playerCharacter.height - 100; // Position near bottom
+	game.addChild(playerCharacter);
+	// Setup game input handlers, active only during 'playing' state
+	game.down = function (x, y, obj) {
+		if (gameState !== 'playing' || !playerCharacter) return;
+		// Simple drag initiation: if player exists, it becomes draggable.
+		dragNode = playerCharacter;
+	};
+	game.move = function (x, y, obj) {
+		if (gameState !== 'playing' || !dragNode || !playerCharacter) return;
+		// Keep player character within screen bounds horizontally
+		playerCharacter.x = Math.max(playerCharacter.width / 2, Math.min(2048 - playerCharacter.width / 2, x));
+	};
+	game.up = function (x, y, obj) {
+		if (gameState !== 'playing') return;
+		dragNode = null; // Release draggable node
+	};
+	// Set lastSpawnTime to ensure the first block spawns quickly after game starts
+	lastSpawnTime = Date.now() - spawnInterval;
+	// Start background music
+	LK.playMusic('Gamemusic1');
+}
+// Setup Intro Screen Elements
+introBackground = LK.getAsset('Introbackground', {
+	anchorX: 0,
+	// Top-left anchor
+	anchorY: 0,
+	x: 0,
+	// Position at top-left
+	y: 0,
+	width: 2048,
+	// Cover full game width
+	height: 2732 // Cover full game height
 });
-scoreTxt.setText(LK.getScore());
-scoreTxt.anchor.set(0.5, 0);
-LK.gui.top.addChild(scoreTxt);
-playerCharacter = new PlayerCharacter();
-// Position player character near the bottom center
-playerCharacter.x = 2048 / 2;
-playerCharacter.y = 2732 - playerCharacter.height - 100; // Offset from bottom
-game.addChild(playerCharacter);
-// The player character color will be set when the first block spawns.
-var dragNode = null; // Keep track of the element being dragged
-// Handle touch down on the game area
-game.down = function (x, y, obj) {
-	// Check if the touch is on the player character
-	dragNode = playerCharacter;
+game.addChild(introBackground);
+// Create and position the start button
+var startButtonAsset = LK.getAsset('Startbutton', {
+	anchorX: 0.5,
+	// Center anchor for easier positioning
+	anchorY: 0.5
+});
+startButton = game.addChild(startButtonAsset); // Add the asset instance to the game stage
+startButton.x = 2048 / 2; // Center horizontally
+// Position button 100px from the bottom of the screen (its bottom edge)
+startButton.y = 2732 - startButton.height / 2 - 100;
+startButton.interactive = true; // Enable interaction
+startButton.buttonMode = true; // Show hand cursor on hover (desktop)
+// Assign action to start button press
+startButton.down = function () {
+	if (gameState === 'intro') {
+		// Ensure action only triggers once from intro state
+		startGame();
+	}
 };
-// Handle touch move on the game area
-game.move = function (x, y, obj) {
-	// Move the player character horizontally based on the cursor's x position,
-	// ensuring it stays within the horizontal bounds of the screen.
-	playerCharacter.x = Math.max(playerCharacter.width / 2, Math.min(2048 - playerCharacter.width / 2, x));
-};
-// Handle touch up on the game area
-game.up = function (x, y, obj) {
-	dragNode = null; // Stop dragging
-};
+// The original game.down handler (if any at this point) is effectively replaced by the setup in startGame.
+// The following game.move and game.up handlers from the original code also need to be removed.
+// Original global game.move and game.up handlers are removed.
+// They are now defined within the startGame() function and are specific to the 'playing' state.
 game.update = function () {
+	if (gameState !== 'playing') {
+		return; // Skip game logic if not in 'playing' state (e.g., during intro)
+	}
 	var currentTime = Date.now();
 	// Spawn new terrain blocks
 	if (currentTime - lastSpawnTime > spawnInterval) {
 		var colors = Object.keys(colorMap);