/**** 
* Classes
****/ 
/***********************************************************************************/ 
/********************************** CAMERA HUD CLASS ************************************/
/***********************************************************************************/ 
var CameraHUD = Container.expand(function () {
	var self = Container.call(this);
	function createCorner(x, y, rotation) {
		var corner = new Container();
		var line1 = LK.getAsset('line', {
			width: 100,
			height: 20,
			anchorX: 0,
			anchorY: 0
		});
		var line2 = LK.getAsset('line', {
			width: 100,
			height: 20,
			anchorX: 0,
			anchorY: 0
		});
		line2.rotation = Math.PI / 2;
		line1.alpha = 0.5;
		line2.alpha = 0.5;
		corner.addChild(line1);
		corner.addChild(line2);
		corner.x = x;
		corner.y = y;
		corner.rotation = rotation;
		return corner;
	}
	var topLeft = createCorner(256, 700, 0);
	var topRight = createCorner(2048 - 256, 700, Math.PI / 2);
	var bottomLeft = createCorner(256, 2732 - 700, -Math.PI / 2);
	var bottomRight = createCorner(2048 - 256, 2732 - 700, Math.PI);
	self.addChild(topLeft);
	self.addChild(topRight);
	self.addChild(bottomLeft);
	self.addChild(bottomRight);
});
/***********************************************************************************/ 
/********************************** MOVING TARGET CLASS ************************************/
/***********************************************************************************/ 
var MovingTarget = Container.expand(function () {
	var self = Container.call(this);
	var birdAssets = ['bird1', 'bird2', 'bird3'];
	currentTargetAsset = birdAssets[Math.floor(Math.random() * birdAssets.length)];
	var targetGraphics = self.attachAsset(currentTargetAsset, {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.speedX = 10;
	self.update = function () {
		if (!isPlaying) {
			return;
		}
		self.x += self.speedX;
		self.y = Math.max(yMin, Math.min(self.y, yMax));
		if (self.x > 2048 + self.width) {
			self.destroy();
			cleanPlayingState();
			initResultState();
		}
	};
});
/***********************************************************************************/ 
/********************************** PHOTOFRAME CLASS ************************************/
/***********************************************************************************/ 
var PhotoFrame = Container.expand(function () {
	var self = Container.call(this);
	var frameBackground = self.attachAsset('background', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: xMax - xMin,
		height: yMax - yMin,
		x: (xMax + xMin) / 2,
		y: (yMax + yMin) / 2
	});
	var frameBorderTop = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	frameBorderTop.width = xMax - xMin;
	frameBorderTop.height = 10;
	frameBorderTop.alpha = 0.8;
	frameBorderTop.x = (xMax + xMin) / 2;
	frameBorderTop.y = yMin;
	var frameBorderBottom = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	frameBorderBottom.width = xMax - xMin;
	frameBorderBottom.height = 10;
	frameBorderBottom.alpha = 0.8;
	frameBorderBottom.x = (xMax + xMin) / 2;
	frameBorderBottom.y = yMax;
	var frameBorderLeft = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	frameBorderLeft.width = 10;
	frameBorderLeft.height = yMax - yMin;
	frameBorderLeft.alpha = 0.8;
	frameBorderLeft.x = xMin;
	frameBorderLeft.y = (yMax + yMin) / 2;
	var frameBorderRight = self.attachAsset('line', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	frameBorderRight.width = 10;
	frameBorderRight.height = yMax - yMin;
	frameBorderRight.alpha = 0.8;
	frameBorderRight.x = xMax;
	frameBorderRight.y = (yMax + yMin) / 2;
});
/***********************************************************************************/ 
/********************************** SHOTBUTTON CLASS ************************************/
/***********************************************************************************/ 
var ShotButton = Container.expand(function () {
	var self = Container.call(this);
	var circle1 = self.attachAsset('shotButton', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var circle2 = self.attachAsset('shotButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		tint: 0x000000,
		scaleX: 0.9,
		scaleY: 0.9
	});
	var circle3 = self.attachAsset('shotButton', {
		anchorX: 0.5,
		anchorY: 0.5,
		scaleX: 0.85,
		scaleY: 0.85
	});
});

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

/**** 
* Game Code
****/ 
/****************************************************************************************** */ 
/************************************** GLOBAL VARIABLES ********************************** */
/****************************************************************************************** */ 
// Enumeration for game states
var GAME_STATE = {
	INIT: 'INIT',
	NEW_ROUND: 'NEW_ROUND',
	PLAYING: 'PLAYING',
	RESULT: 'RESULT',
	SCORE: 'SCORE'
};
// Game state variables
var gameState = GAME_STATE.INIT;
var isPlaying = false;
var score = 0;
var hasShot = false;
var targetShotX = 0;
var targetShotY = 0;
// Photo limits variables
var xMin = 256;
var xMax = 2048 - 256;
var yMin = 700;
var yMax = 2732 - 700;
// Game elements variables
var photoFrame;
var background;
var cameraHUD;
var currentTarget;
var currentTargetAsset;
var shotButton;
// UI variables
var scoreTxt;
var readyText;
// Debug variables
var isDebug = true;
var debugMarker;
var debugText;
/****************************************************************************************** */ 
/*********************************** UTILITY FUNCTIONS ************************************ */
/****************************************************************************************** */ 
function log() {
	if (isDebug) {
		var _console;
		(_console = console).log.apply(_console, arguments);
	}
}
/****************************************************************************************** */ 
/************************************** INPUT HANDLERS ************************************ */
/****************************************************************************************** */ 
game.down = function (x, y, obj) {
	switch (gameState) {
		case GAME_STATE.NEW_ROUND:
			gameNewRoundDown(x, y, obj);
			break;
		case GAME_STATE.PLAYING:
			gamePlayingDown(x, y, obj);
			break;
		case GAME_STATE.RESULT:
			gameResultDown(x, y, obj);
		case GAME_STATE.SCORE:
			gameScoreDown(x, y, obj);
			break;
	}
};
function gameNewRoundDown(x, y, obj) {
	log("gameNewRoundDown...");
	cleanNewRoundState();
	initPlayingState();
}
function gamePlayingDown(x, y, obj) {
	if (hasShot) {
		return;
	}
	hasShot = true;
	log("gamePlayingDown...");
	LK.getSound('cameraShot').play();
	targetShotX = currentTarget.x;
	targetShotY = currentTarget.y;
	// Add a black flash effect
	LK.effects.flashScreen(0x000000, 1000); // Flash duration of 1000ms
}
function gameResultDown(x, y, obj) {
	log("gameResultDown...");
	cleanResultState();
}
function gameScoreDown(x, y, obj) {
	log("gameScoreDown...");
	cleanScoreState();
}
/****************************************************************************************** */ 
/************************************* GAME STATES **************************************** */
/****************************************************************************************** */ 
function gameInitialize() {
	log("Game initialize...");
	background = LK.getAsset('background', {
		anchorX: 0,
		anchorY: 0,
		x: 0,
		y: 0
	});
	game.addChild(background);
	cameraHUD = new CameraHUD();
	photoFrame = new PhotoFrame();
	game.addChild(photoFrame);
	game.addChild(cameraHUD);
	// UI Elements
	score = 0;
	scoreTxt = new Text2('Score: ' + score, {
		size: 100,
		fill: "#ffffff"
	});
	scoreTxt.anchor.set(0.5, 0);
	LK.gui.top.addChild(scoreTxt);
	shotButton = new ShotButton();
	shotButton.x = 1024;
	shotButton.y = 2500;
	game.addChild(shotButton);
	if (isDebug) {
		debugMarker = LK.getAsset('debugMarker', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: 2048 / 2,
			y: 2732 - 50
		});
		game.addChild(debugMarker);
		debugText = new Text2('Debug Info', {
			size: 50,
			fill: "#ffffff"
		});
		debugText.anchor.set(0.5, 1); // Anchor to the bottom-right
		LK.gui.bottom.addChild(debugText);
	}
	initNewRoundState();
}
/**************************************** NEW ROUND STATE  *********************************/
function initNewRoundState() {
	log("initNewRoundState...");
	background.visible = true;
	gameState = GAME_STATE.NEW_ROUND;
	// TODO : handle Level change and target change
	currentTarget = new MovingTarget();
	currentTarget.x = -currentTarget.width; // Spawn out of the screen on the left
	currentTarget.y = 1366 - 256 + 512 * Math.random(); // Random vertical position
	game.addChild(currentTarget);
	if (!readyText) {
		readyText = new Text2('Listen...', {
			size: 200,
			fill: "#ffffff"
		});
		readyText.anchor.set(0.5, 0.5); // Center the text horizontally and vertically
		readyText.x = 2048 / 2; // Center horizontally
		readyText.y = 2732 / 2; // Center vertically
		game.addChild(readyText);
	}
	readyText.visible = true;
	photoFrame.visible = false;
	LK.getSound('forestSound').play();
	LK.setTimeout(function () {
		cleanNewRoundState();
		initPlayingState();
	}, 3000);
}
function handleNewRoundLoop() {
	// Update New round elements
}
function cleanNewRoundState() {
	log("cleanNewRoundState...");
	// Remove New round elements
	readyText.visible = false;
}
/**************************************** PLAYING STATE  *********************************/
function initPlayingState() {
	log("initPlayingState...");
	gameState = GAME_STATE.PLAYING;
	isPlaying = true;
	hasShot = false;
}
function handlePlayingLoop() {
	// Update game elements
}
function cleanPlayingState() {
	log("cleanPlayingState...");
	isPlaying = false;
	// Remove game elements
	background.visible = false;
	cameraHUD.visible = false;
}
/**************************************** RESULT STATE  *********************************/
function initResultState() {
	log("initResultState...");
	gameState = GAME_STATE.RESULT;
	photoFrame.visible = true;
	background.tint = 0x00008B; // Set background to a darker blue
	// Show the target again at the shot position if within limits
	if (targetShotX >= xMin - currentTarget.width / 2 && targetShotX <= xMax + currentTarget.width / 2 && targetShotY >= yMin - currentTarget.height / 2 && targetShotY <= yMax + currentTarget.height / 2) {
		var resultTarget = new Container();
		var resultTargetGraphics = resultTarget.attachAsset(currentTargetAsset, {
			anchorX: 0.5,
			anchorY: 0.5
		});
		resultTarget.x = targetShotX;
		resultTarget.y = targetShotY;
		// Create a mask to clip the target
		var mask = new Container();
		var maskGraphics = mask.attachAsset('background', {
			anchorX: 0,
			anchorY: 0,
			width: xMax - xMin,
			height: yMax - yMin,
			x: xMin,
			y: yMin
		});
		resultTarget.mask = maskGraphics;
		game.addChild(resultTarget);
		game.addChild(mask);
	}
	// Calculate the center of the photo frame
	var centerX = (xMin + xMax) / 2;
	var centerY = (yMin + yMax) / 2;
	// Calculate the distance between the target shot and the center
	var distance = Math.sqrt(Math.pow(targetShotX - centerX, 2) + Math.pow(targetShotY - centerY, 2));
	// Calculate the maximum possible distance (from center to any corner)
	var maxDistance = Math.sqrt(Math.pow((xMax - xMin) / 2, 2) + Math.pow((yMax - yMin) / 2, 2));
	// Calculate the score (0 to 100)
	var shotScore = Math.max(0, 100 - distance / maxDistance * 100);
	// Update the score
	score += Math.round(shotScore);
	scoreTxt.setText('Score: ' + score);
}
function handleResultLoop() {
	// Update result elements
}
function cleanResultState() {
	log("cleanResultState...");
	// Remove result elements
	initNewRoundState();
}
/**************************************** SCORE STATE  *********************************/
function initScoreState() {
	log("initScoreState...");
	gameState = GAME_STATE.SCORE;
}
function handleScoreLoop() {
	// Update score elements
}
function cleanScoreState() {
	log("cleanScoreState...");
	scoreTxt.setText('Score: ' + score);
	LK.showGameOver();
}
/***********************************************************************************/ 
/******************************** MAIN GAME LOOP ***********************************/
/***********************************************************************************/ 
game.update = function () {
	currentTarget.update();
	switch (gameState) {
		case GAME_STATE.NEW_ROUND:
			handleNewRoundLoop();
			break;
		case GAME_STATE.PLAYING:
			handlePlayingLoop();
			break;
		case GAME_STATE.SCORE:
			handleScoreLoop();
			break;
	}
};
gameInitialize(); // Initialize the game

===================================================================
--- original.js
+++ change.js
@@ -349,9 +349,21 @@
 			anchorY: 0.5
 		});
 		resultTarget.x = targetShotX;
 		resultTarget.y = targetShotY;
+		// Create a mask to clip the target
+		var mask = new Container();
+		var maskGraphics = mask.attachAsset('background', {
+			anchorX: 0,
+			anchorY: 0,
+			width: xMax - xMin,
+			height: yMax - yMin,
+			x: xMin,
+			y: yMin
+		});
+		resultTarget.mask = maskGraphics;
 		game.addChild(resultTarget);
+		game.addChild(mask);
 	}
 	// Calculate the center of the photo frame
 	var centerX = (xMin + xMax) / 2;
 	var centerY = (yMin + yMax) / 2;