===================================================================
--- original.js
+++ change.js
@@ -1,122 +1,284 @@
 /**** 
 * Classes
 ****/ 
-// Cheese class
-var Cheese = Container.expand(function () {
+// OnScreenController class encapsulating A, B buttons and D-pad
+var OnScreenController = Container.expand(function () {
 	var self = Container.call(this);
-	var cheeseGraphics = self.attachAsset('cheese', {
+	// Customizable controller button positions and colors
+	var yPosAdjustment = -100; // Customizable Y position adjustment for D-pad
+	var buttonYPosAdjustment = -273.2; // Customizable Y position adjustment for buttons
+	var aButtonColor = 0x00FF00; // Customizable A button color
+	var bButtonColor = 0xFF0000; // Customizable B button color
+	var aButtonPosition = {
+		x: 1400,
+		// Moved 100 pixels closer to the center
+		y: 2432 + buttonYPosAdjustment + 150
+	}; // Customizable A button position
+	var bButtonPosition = {
+		x: 1800,
+		// Adjusted X position to bring B button closer to A button
+		y: 2432 + buttonYPosAdjustment - 50
+	}; // Customizable B button position
+	var buttonSize = {
+		width: 400,
+		height: 400
+	}; // Shared variable for dpad buttons size
+	var aButton = self.attachAsset('aButton', {
 		anchorX: 0.5,
-		anchorY: 0.5
+		anchorY: 0.5,
+		x: aButtonPosition.x,
+		y: aButtonPosition.y,
+		width: buttonSize.width,
+		height: buttonSize.height,
+		tint: aButtonColor // Use customizable A button color
 	});
-});
-// Grid class
-var Grid = Container.expand(function () {
-	var self = Container.call(this);
-	self.grid = [];
-	self.gridSize = 100;
-	self.gridWidth = 2048 / self.gridSize;
-	self.gridHeight = 2732 / self.gridSize;
-	// Initialize the grid with empty cells
-	for (var i = 0; i < self.gridWidth; i++) {
-		self.grid[i] = new Array(self.gridHeight).fill(null);
-	}
-	// Method to add an object to the grid
-	self.addObject = function (obj, x, y) {
-		self.grid[x][y] = obj;
-		obj.x = x * self.gridSize;
-		obj.y = y * self.gridSize;
-	};
-	// Method to move an object in the grid
-	self.moveObject = function (obj, oldX, oldY, newX, newY) {
-		self.grid[oldX][oldY] = null;
-		self.addObject(obj, newX, newY);
-	};
-});
-// Hole class
-var Hole = Container.expand(function () {
-	var self = Container.call(this);
-	var holeGraphics = self.attachAsset('hole', {
+	var bButton = self.attachAsset('bButton', {
 		anchorX: 0.5,
-		anchorY: 0.5
+		anchorY: 0.5,
+		x: bButtonPosition.x,
+		y: bButtonPosition.y,
+		width: buttonSize.width,
+		height: buttonSize.height,
+		tint: bButtonColor // Use customizable B button color
 	});
-});
-// Assets will be automatically created based on usage in the code.
-// Mouse class
-var Mouse = Container.expand(function () {
-	var self = Container.call(this);
-	var mouseGraphics = self.attachAsset('mouse', {
+	// D-pad
+	var dpadBase = self.attachAsset('dpadBase', {
 		anchorX: 0.5,
-		anchorY: 0.5
+		anchorY: 0.5,
+		x: 500,
+		y: 2432 + yPosAdjustment,
+		scaleX: 3.0,
+		scaleY: 3.0
 	});
-	self.speed = 5;
-	self.move = function (direction) {
-		var oldX = self.x / grid.gridSize;
-		var oldY = self.y / grid.gridSize;
-		var newX = oldX;
-		var newY = oldY;
-		if (direction === 'left') {
-			newX--;
+	// Move dpad base to the top of the display list so it appears on top of the arrows
+	self.setChildIndex(dpadBase, self.children.length - 1);
+	var dpadLeft = self.attachAsset('dpadButton', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: dpadBase.x - 250,
+		y: dpadBase.y,
+		width: 450,
+		height: 450,
+		tint: 0xFFFF00,
+		// Change color to yellow
+		orientation: 3 // Correct orientation for left direction
+	});
+	dpadLeft.on('down', function () {
+		if (character) {
+			character.x -= 145.2; // Move character left by 145.2 pixels to match grid size
 		}
-		if (direction === 'right') {
-			newX++;
+	});
+	// A and B button event listeners
+	var dpadUp = self.attachAsset('dpadButton', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: dpadBase.x,
+		y: dpadBase.y - 250,
+		width: 450,
+		height: 450,
+		tint: 0xFFFF00,
+		// Change color to yellow
+		orientation: 0 // Correct orientation for up direction
+	});
+	dpadUp.on('down', function () {
+		if (character) {
+			character.y -= 145.2; // Move character up by 145.2 pixels to match grid size
 		}
-		if (direction === 'up') {
-			newY--;
+	});
+	aButton.on('down', function () {
+		console.log('A button pressed');
+		aButton.tint = 0xAAAAAA; // Tint A button to a darker color when pressed
+	});
+	aButton.on('up', function () {
+		aButton.tint = 0x00FF00; // Return A button to original green color when released
+	});
+	var dpadRight = self.attachAsset('dpadButton', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: dpadBase.x + 250,
+		y: dpadBase.y,
+		width: 450,
+		height: 450,
+		tint: 0xFFFF00,
+		// Change color to yellow
+		orientation: 1 // Correct orientation for right direction
+	});
+	dpadRight.on('down', function () {
+		if (character) {
+			character.x += 145.2; // Move character right by 145.2 pixels to match grid size
 		}
-		if (direction === 'down') {
-			newY++;
+	});
+	bButton.on('down', function () {
+		console.log('B button pressed');
+		bButton.tint = 0xAAAAAA; // Tint B button to a darker color when pressed
+	});
+	bButton.on('up', function () {
+		bButton.tint = 0xFF0000; // Return B button to original red color when released
+	});
+	var dpadDown = self.attachAsset('dpadButton', {
+		anchorX: 0.5,
+		anchorY: 0.5,
+		x: dpadBase.x,
+		y: dpadBase.y + 250,
+		width: 450,
+		height: 450,
+		tint: 0xFFFF00,
+		// Change color to yellow
+		orientation: 2 // Correct orientation for down direction
+	});
+	dpadDown.on('down', function () {
+		if (character) {
+			character.y += 145.2; // Move character down by 145.2 pixels to match grid size
 		}
-		// Check if the new position is within the grid and not occupied
-		if (newX >= 0 && newX < grid.gridWidth && newY >= 0 && newY < grid.gridHeight && grid.grid[newX][newY] === null) {
-			grid.moveObject(self, oldX, oldY, newX, newY);
-		}
-	};
+	});
 });
 
 /**** 
 * Initialize Game
 ****/ 
+// Instantiate and add OnScreenController to the game
 var game = new LK.Game({
-	backgroundColor: 0xF4D03F // Init game with a cheese-like background color
+	backgroundColor: 0x000000
 });
 
 /**** 
 * Game Code
 ****/ 
-var grid = game.addChild(new Grid());
-var mouse = new Mouse();
-grid.addObject(mouse, 1, grid.gridHeight / 2);
-var cheese = new Cheese();
-grid.addObject(cheese, grid.gridWidth / 2, grid.gridHeight / 2);
-var hole = new Hole();
-grid.addObject(hole, grid.gridWidth - 1, grid.gridHeight / 2);
-var dragNode = null;
-function handleMove(obj) {
-	var event = obj.event;
-	var pos = event.getLocalPosition(game);
-	if (dragNode) {
-		dragNode.x = pos.x;
-		dragNode.y = pos.y;
+function moveCharacter(dx, dy) {
+	var newX = character.x + dx * movementDistance;
+	var newY = character.y + dy * movementDistance;
+	// Check if new position is within bounds and if it's a wall tile
+	var newTile = getTileAtPosition(newX, newY);
+	if (newTile && wallTiles.indexOf(newTile) === -1) {
+		// Move character to new position
+		character.x = newX;
+		character.y = newY;
+		character.currentTile = newTile;
 	}
-	if (mouse.intersects(cheese)) {
-		// Mouse got the cheese, move cheese to mouse position
-		cheese.x = mouse.x;
-		cheese.y = mouse.y;
+}
+var onScreenController = game.addChild(new OnScreenController());
+// D-pad button event listeners moved inside OnScreenController class
+// Character movement function removed
+var touchStartPos = null;
+var touchEndPos = null;
+// Swipe movement 'down' event listener removed
+// Swipe movement 'up' event listener removed
+function initializeGame() {
+	return game;
+}
+var game = initializeGame();
+var gridSize = 10;
+var character;
+var wallTiles = [];
+var floorTiles = [];
+var selectedTile;
+var tileOriginalColor;
+var isGameStarted = false;
+var grid = new Array(gridSize * gridSize);
+var fadeEffect = {
+	alpha: 0,
+	speed: 0.01
+};
+function createTiles() {
+	for (var i = 0; i < gridSize * gridSize; i++) {
+		var x = i % gridSize;
+		var y = Math.floor(i / gridSize);
+		var tile;
+		if (x === 0 || y === 0 || x === gridSize - 1 || y === gridSize - 1) {
+			tile = LK.getAsset('wallTile', {
+				anchorX: 0.5,
+				anchorY: 0.5,
+				x: x * 145.2 + (2048 - gridSize * 145.2) / 2,
+				y: y * 145.2 + (2732 - gridSize * 145.2) / 2 - 300
+			});
+			wallTiles.push(tile);
+		} else {
+			tile = LK.getAsset('floorTile', {
+				anchorX: 0.5,
+				anchorY: 0.5,
+				x: x * 145.2 + (2048 - gridSize * 145.2) / 2,
+				y: y * 145.2 + (2732 - gridSize * 145.2) / 2 - 300
+			});
+			floorTiles.push(tile);
+		}
+		game.addChild(tile);
+		grid[i] = tile;
 	}
-	if (cheese.intersects(hole)) {
-		// Cheese delivered to the hole, show game win
-		LK.effects.flashScreen(0x00FF00, 1000);
-		LK.showGameOver();
-	}
 }
-game.on('down', function (obj) {
-	dragNode = mouse;
-	handleMove(obj);
+createTiles();
+// Function to check if a tile is in a corner
+function isTileInCorner(tile) {
+	var corners = [{
+		x: 0,
+		y: 0
+	}, {
+		x: 0,
+		y: (gridSize - 1) * 100
+	}, {
+		x: (gridSize - 1) * 100,
+		y: 0
+	}, {
+		x: (gridSize - 1) * 100,
+		y: (gridSize - 1) * 100
+	}];
+	return corners.some(function (corner) {
+		return tile.x === corner.x && tile.y === corner.y;
+	});
+}
+// Select a random wall tile and replace it with a hole tile, ensuring it's not in a corner
+var randomWallTileIndex;
+var randomWallTile;
+do {
+	randomWallTileIndex = Math.floor(Math.random() * wallTiles.length);
+	randomWallTile = wallTiles[randomWallTileIndex];
+} while (isTileInCorner(randomWallTile));
+var holeTile = LK.getAsset('holeTile', {
+	anchorX: 0.5,
+	anchorY: 0.5,
+	x: randomWallTile.x,
+	y: randomWallTile.y
 });
-game.on('move', handleMove);
-game.on('up', function (obj) {
-	dragNode = null;
-});
+game.addChild(holeTile);
+game.removeChild(randomWallTile);
+wallTiles[randomWallTileIndex] = holeTile;
 LK.on('tick', function () {
-	// Game logic to be executed each tick
-});
\ No newline at end of file
+	if (fadeEffect.alpha < 1) {
+		fadeEffect.alpha += fadeEffect.speed;
+		game.alpha = fadeEffect.alpha;
+	} else if (!isGameStarted) {
+		// Patrol points setup logic removed
+		isGameStarted = true; // Ensure game start logic is only triggered once
+		// Initialize game elements here after fade-in completes
+		// Spawn an instance of the character on the hole tile
+		character = LK.getAsset('character', {
+			anchorX: 0.5,
+			anchorY: 0.5,
+			x: holeTile.x,
+			y: holeTile.y - 50,
+			scaleX: 1.25,
+			scaleY: 1.25
+		});
+		var shadowOffsetY = 50; // Customizable shadow Y offset multiplier
+		// Optimized shadow ofset calculation
+		characterShadow.x = character.x;
+		characterShadow.y = character.y - shadowOffsetY; // Use customizable shadow Y offset multiplier
+		character.currentTile = getTileAtPosition(holeTile.x, holeTile.y); // Correctly initialize character's current tile
+		game.addChild(characterShadow);
+		game.addChild(character);
+	}
+	// Make the character's shadow follow the character on both x and y axis
+	if (character) {
+		var characterShadow = LK.getAsset('characterShadow', {
+			anchorX: 0.5,
+			anchorY: 0.5,
+			x: character.x,
+			y: character.y + character.height / 2
+		});
+	}
+});
+// Define a function to get the tile at a given position
+function getTileAtPosition(x, y) {
+	var index = Math.floor(y / 100) * gridSize + Math.floor(x / 100);
+	return grid[index];
+}
+// Character movement logic removed
\ No newline at end of file