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

/**** 
* Classes
****/ 
// Car class
var Car = Container.expand(function () {
	var self = Container.call(this);
	// Attach car asset, anchor center
	var carSprite = self.attachAsset('car', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// For collision, store width/height
	self.carWidth = carSprite.width;
	self.carHeight = carSprite.height;
	// No update needed; car is moved by player
	return self;
});
// Crosswalk class (visual only)
var Crosswalk = Container.expand(function () {
	var self = Container.call(this);
	// Attach crosswalk asset, anchor center
	self.attachAsset('crosswalk', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	return self;
});
// Pedestrian class
var Pedestrian = Container.expand(function () {
	var self = Container.call(this);
	// Attach pedestrian asset, anchor center
	var pedSprite = self.attachAsset('pedestrian', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	// For collision, store width/height
	self.pedWidth = pedSprite.width;
	self.pedHeight = pedSprite.height;
	// Speed in px per frame (set on spawn)
	self.speed = 0;
	// Update: move right
	self.update = function () {
		// If assigned to a crosswalk, always follow its Y position
		if (typeof self.crosswalkIdx === "number" && crosswalks && crosswalks[self.crosswalkIdx]) {
			self.y = crosswalks[self.crosswalkIdx].y;
		}
		self.x += self.speed;
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x444444
});

/**** 
* Game Code
****/ 
// Crosswalk asset: white box, 900x40
// Road asset: dark gray box, 900x2732
// Pedestrian asset: yellow ellipse, 120x120
// Car asset: blue box, 200x300
// Road setup
// Widen game area: use 3000px width, but keep road/crosswalks at 1300px centered
var GAME_WIDTH = 3000;
var GAME_HEIGHT = 2732;
var ROAD_WIDTH = 1300;
var ROAD_X = GAME_WIDTH / 2;
// Center road horizontally in new wide area
var road = LK.getAsset('road', {
	anchorX: 0.5,
	anchorY: 0
});
road.x = ROAD_X;
road.y = 0;
game.addChild(road);
// Crosswalk Y positions (4 crosswalks, extremely wide spacing)
var crosswalkSpacing = 1800; // MUCH wider spacing between crosswalks
var crosswalkStartY = 600;
var crosswalkCount = 4;
var crosswalkYs = [];
var crosswalks = [];
for (var i = 0; i < crosswalkCount; i++) {
	var y = crosswalkStartY + i * crosswalkSpacing;
	crosswalkYs.push(y);
	var cw = new Crosswalk();
	cw.x = ROAD_X;
	cw.y = y;
	game.addChild(cw);
	crosswalks.push(cw);
}
// --- Houses setup ---
// House asset: colored box, 180x180, different color for each house
var houseColors = [0xff5e57, 0x57c7ff, 0xffe066, 0x7dff57, 0xff57e3, 0x57ffd1, 0xffa857, 0x8e57ff];
var houseSize = 180;
var houseRows = [];
var houseMargin = 40; // margin from edge of game area
var houseGap = 20; // gap between houses
// Calculate left/right house X positions (fill from left edge to road, and from road right edge to right edge)
var leftHouseStart = houseMargin + houseSize / 2;
var leftHouseEnd = ROAD_X - ROAD_WIDTH / 2 - houseGap;
var rightHouseStart = ROAD_X + ROAD_WIDTH / 2 + houseGap;
var rightHouseEnd = GAME_WIDTH - houseMargin - houseSize / 2;
// For each crosswalk, add a row of houses at that Y
for (var i = 0; i < crosswalkCount; i++) {
	var y = crosswalkYs[i];
	// Left side houses
	var x = leftHouseStart;
	var colorIdx = 0;
	while (x + houseSize / 2 <= leftHouseEnd) {
		var house = LK.getAsset('house', {
			width: houseSize,
			height: houseSize,
			color: houseColors[colorIdx % houseColors.length],
			shape: 'box',
			anchorX: 0.5,
			anchorY: 0.5,
			x: x,
			y: y
		});
		house.x = x;
		house.y = y;
		game.addChild(house);
		x += houseSize + houseGap;
		colorIdx++;
	}
	// Right side houses
	x = rightHouseStart;
	colorIdx = 0;
	while (x + houseSize / 2 <= rightHouseEnd) {
		var house = LK.getAsset('house', {
			width: houseSize,
			height: houseSize,
			color: houseColors[(colorIdx + 3) % houseColors.length],
			shape: 'box',
			anchorX: 0.5,
			anchorY: 0.5,
			x: x,
			y: y
		});
		house.x = x;
		house.y = y;
		game.addChild(house);
		x += houseSize + houseGap;
		colorIdx++;
	}
}
// Pedestrian management
var pedestrians = [];
// Car setup
var car = new Car();
car.x = ROAD_X;
// We'll keep car.y fixed at this value (bottom area)
var carFixedY = 2732 - 400;
car.y = carFixedY;
game.addChild(car);
// Car movement variables
var dragCar = false;
var dragOffsetX = 0;
// Car forward movement speed (pixels per frame)
var carForwardSpeed = 13; // Faster road/crosswalk scroll for more action
// Road boundaries (car can't leave road)
var roadLeft = ROAD_X - ROAD_WIDTH / 2 + car.carWidth / 2;
var roadRight = ROAD_X + ROAD_WIDTH / 2 - car.carWidth / 2;
// Pedestrian management
var pedestrians = [];
// Pedestrian spawn timer
var pedSpawnInterval = 90; // frames (~1.5 sec, slower spawn for less crowding)
var pedSpawnTick = 0;
// Track which crosswalks have a pedestrian currently
var crosswalkHasPedestrian = [];
for (var i = 0; i < crosswalkCount; i++) crosswalkHasPedestrian[i] = false;
// --- Delay world movement and pedestrian spawn for 3 seconds after game start ---
var worldActive = false;
var carDistanceDriven = 0;
var worldReallyActive = false;
LK.setTimeout(function () {
	worldActive = true;
	carDistanceDriven = 0;
	worldReallyActive = false;
}, 3000);
// Score
var score = 0;
var scoreTxt = new Text2('0', {
	size: 120,
	fill: 0xFFFFFF
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
// Score timer: add 10 points every second
var scoreTimer = LK.setInterval(function () {
	score += 10;
	scoreTxt.setText(score);
}, 1000);
// Touch/mouse controls: press-and-hold left/right to move car continuously
var carMoveDirection = 0; // -1 for left, 1 for right, 0 for none
game.down = function (x, y, obj) {
	// Set direction based on which half of the screen is pressed
	if (x < GAME_WIDTH / 2) {
		carMoveDirection = -1;
	} else {
		carMoveDirection = 1;
	}
};
game.move = function (x, y, obj) {
	// If finger moves to other side, update direction
	if (carMoveDirection !== 0) {
		if (x < GAME_WIDTH / 2) {
			carMoveDirection = -1;
		} else {
			carMoveDirection = 1;
		}
	}
};
game.up = function (x, y, obj) {
	// Stop moving when released
	carMoveDirection = 0;
};
// Main update loop
game.update = function () {
	// Car stays at fixed Y (carFixedY), world scrolls instead
	car.y = carFixedY;
	// Move car left/right if holding
	var carMoveSpeed = 22; // px per frame, adjust for feel
	if (typeof carMoveDirection !== "undefined" && carMoveDirection !== 0) {
		var newX = car.x + carMoveDirection * carMoveSpeed;
		if (newX < roadLeft) newX = roadLeft;
		if (newX > roadRight) newX = roadRight;
		car.x = newX;
	}
	// Only scroll world and spawn pedestrians if worldActive (after 3s delay)
	// --- NEW: Only activate world after car has moved a certain distance ---
	if (worldActive) {
		// Track how much the car has "driven" before world starts
		if (typeof carDistanceDriven === "undefined") {
			carDistanceDriven = 0;
			worldReallyActive = false;
		}
		// Only count distance if car is moving forward (not just left/right)
		// We'll count every frame after worldActive, since car is always moving forward
		if (!worldReallyActive) {
			carDistanceDriven += carForwardSpeed;
			// Don't move road/crosswalks until car has driven enough
			if (carDistanceDriven < 400) {
				// Don't move road or crosswalks at all until car has driven 400px
				return;
			} else {
				worldReallyActive = true;
			}
		}
		// === Road and crosswalks scroll logic ===
		// The car stays at a fixed Y on screen, but the world scrolls down
		// We'll keep car.y fixed, and move road/crosswalks/pedestrians down by carForwardSpeed each frame
		// Amount to scroll everything (except car) down
		var scrollAmount = carForwardSpeed;
		// Move road
		road.y += scrollAmount;
		// Move crosswalks
		for (var i = 0; i < crosswalks.length; i++) {
			crosswalks[i].y += scrollAmount;
		}
		// Move pedestrians
		for (var i = 0; i < pedestrians.length; i++) {
			pedestrians[i].y += scrollAmount;
		}
		// When a crosswalk goes off the bottom, move it to the top (endless effect)
		for (var i = 0; i < crosswalks.length; i++) {
			if (crosswalks[i].y > 2732 + 40) {
				crosswalks[i].y -= crosswalkCount * crosswalkSpacing;
			}
		}
		// When road goes off the bottom, move it up (since it's as tall as screen, this is rare, but keeps it endless)
		if (road.y > 0) {
			road.y = -road.height + 2732;
		}
		// Spawn pedestrians
		pedSpawnTick++;
		if (pedSpawnTick >= pedSpawnInterval) {
			pedSpawnTick = 0;
			// Find crosswalks without a pedestrian
			var availableCrosswalks = [];
			for (var i = 0; i < crosswalks.length; i++) {
				if (!crosswalkHasPedestrian[i]) availableCrosswalks.push(i);
			}
			if (availableCrosswalks.length > 0) {
				// Pick a random available crosswalk
				var idx = availableCrosswalks[Math.floor(Math.random() * availableCrosswalks.length)];
				// Spawn pedestrian at the Y position of the chosen crosswalk, but just off the left edge
				var ped = new Pedestrian();
				ped.crosswalkIdx = idx;
				if (crosswalks && crosswalks[idx]) {
					ped.y = crosswalks[idx].y;
				} else {
					ped.y = 0 - ped.pedHeight / 2; // fallback
				}
				ped.x = ROAD_X - ROAD_WIDTH / 2 + ped.pedWidth / 2;
				// Random speed: 2-3 px/frame (slower for easier dodging)
				ped.speed = 2 + Math.floor(Math.random() * 2);
				pedestrians.push(ped);
				game.addChild(ped);
				// Mark this crosswalk as having a pedestrian
				crosswalkHasPedestrian[idx] = true;
			}
		}
	}
	// Update pedestrians
	for (var i = pedestrians.length - 1; i >= 0; i--) {
		var ped = pedestrians[i];
		ped.update();
		// Remove if off right edge or off bottom of screen
		if (ped.x > road.x + road.width / 2 + ped.pedWidth / 2 || ped.y > 2732 + ped.pedHeight / 2) {
			// Free up crosswalk slot
			if (typeof ped.crosswalkIdx === "number") {
				crosswalkHasPedestrian[ped.crosswalkIdx] = false;
			}
			ped.destroy();
			pedestrians.splice(i, 1);
			continue;
		}
		// Collision with car?
		if (ped.intersects(car)) {
			// Flash screen red
			LK.effects.flashScreen(0xff0000, 1000);
			// Game over
			LK.showGameOver();
			return;
		}
	}
};
// Center score text at top, avoid top left 100x100
scoreTxt.x = GAME_WIDTH / 2;
scoreTxt.y = 20;
// Clean up on game over (handled by LK, but clear timer)
game.onDestroy = function () {
	LK.clearInterval(scoreTimer);
};

===================================================================
--- original.js
+++ change.js
@@ -68,14 +68,19 @@
 // Road asset: dark gray box, 900x2732
 // Pedestrian asset: yellow ellipse, 120x120
 // Car asset: blue box, 200x300
 // Road setup
-// Center road horizontally
+// Widen game area: use 3000px width, but keep road/crosswalks at 1300px centered
+var GAME_WIDTH = 3000;
+var GAME_HEIGHT = 2732;
+var ROAD_WIDTH = 1300;
+var ROAD_X = GAME_WIDTH / 2;
+// Center road horizontally in new wide area
 var road = LK.getAsset('road', {
 	anchorX: 0.5,
 	anchorY: 0
 });
-road.x = 2048 / 2;
+road.x = ROAD_X;
 road.y = 0;
 game.addChild(road);
 // Crosswalk Y positions (4 crosswalks, extremely wide spacing)
 var crosswalkSpacing = 1800; // MUCH wider spacing between crosswalks
@@ -86,18 +91,74 @@
 for (var i = 0; i < crosswalkCount; i++) {
 	var y = crosswalkStartY + i * crosswalkSpacing;
 	crosswalkYs.push(y);
 	var cw = new Crosswalk();
-	cw.x = 2048 / 2;
+	cw.x = ROAD_X;
 	cw.y = y;
 	game.addChild(cw);
 	crosswalks.push(cw);
 }
+// --- Houses setup ---
+// House asset: colored box, 180x180, different color for each house
+var houseColors = [0xff5e57, 0x57c7ff, 0xffe066, 0x7dff57, 0xff57e3, 0x57ffd1, 0xffa857, 0x8e57ff];
+var houseSize = 180;
+var houseRows = [];
+var houseMargin = 40; // margin from edge of game area
+var houseGap = 20; // gap between houses
+// Calculate left/right house X positions (fill from left edge to road, and from road right edge to right edge)
+var leftHouseStart = houseMargin + houseSize / 2;
+var leftHouseEnd = ROAD_X - ROAD_WIDTH / 2 - houseGap;
+var rightHouseStart = ROAD_X + ROAD_WIDTH / 2 + houseGap;
+var rightHouseEnd = GAME_WIDTH - houseMargin - houseSize / 2;
+// For each crosswalk, add a row of houses at that Y
+for (var i = 0; i < crosswalkCount; i++) {
+	var y = crosswalkYs[i];
+	// Left side houses
+	var x = leftHouseStart;
+	var colorIdx = 0;
+	while (x + houseSize / 2 <= leftHouseEnd) {
+		var house = LK.getAsset('house', {
+			width: houseSize,
+			height: houseSize,
+			color: houseColors[colorIdx % houseColors.length],
+			shape: 'box',
+			anchorX: 0.5,
+			anchorY: 0.5,
+			x: x,
+			y: y
+		});
+		house.x = x;
+		house.y = y;
+		game.addChild(house);
+		x += houseSize + houseGap;
+		colorIdx++;
+	}
+	// Right side houses
+	x = rightHouseStart;
+	colorIdx = 0;
+	while (x + houseSize / 2 <= rightHouseEnd) {
+		var house = LK.getAsset('house', {
+			width: houseSize,
+			height: houseSize,
+			color: houseColors[(colorIdx + 3) % houseColors.length],
+			shape: 'box',
+			anchorX: 0.5,
+			anchorY: 0.5,
+			x: x,
+			y: y
+		});
+		house.x = x;
+		house.y = y;
+		game.addChild(house);
+		x += houseSize + houseGap;
+		colorIdx++;
+	}
+}
 // Pedestrian management
 var pedestrians = [];
 // Car setup
 var car = new Car();
-car.x = 2048 / 2;
+car.x = ROAD_X;
 // We'll keep car.y fixed at this value (bottom area)
 var carFixedY = 2732 - 400;
 car.y = carFixedY;
 game.addChild(car);
@@ -106,10 +167,10 @@
 var dragOffsetX = 0;
 // Car forward movement speed (pixels per frame)
 var carForwardSpeed = 13; // Faster road/crosswalk scroll for more action
 // Road boundaries (car can't leave road)
-var roadLeft = road.x - road.width / 2 + car.carWidth / 2;
-var roadRight = road.x + road.width / 2 - car.carWidth / 2;
+var roadLeft = ROAD_X - ROAD_WIDTH / 2 + car.carWidth / 2;
+var roadRight = ROAD_X + ROAD_WIDTH / 2 - car.carWidth / 2;
 // Pedestrian management
 var pedestrians = [];
 // Pedestrian spawn timer
 var pedSpawnInterval = 90; // frames (~1.5 sec, slower spawn for less crowding)
@@ -142,18 +203,18 @@
 // Touch/mouse controls: press-and-hold left/right to move car continuously
 var carMoveDirection = 0; // -1 for left, 1 for right, 0 for none
 game.down = function (x, y, obj) {
 	// Set direction based on which half of the screen is pressed
-	if (x < 2048 / 2) {
+	if (x < GAME_WIDTH / 2) {
 		carMoveDirection = -1;
 	} else {
 		carMoveDirection = 1;
 	}
 };
 game.move = function (x, y, obj) {
 	// If finger moves to other side, update direction
 	if (carMoveDirection !== 0) {
-		if (x < 2048 / 2) {
+		if (x < GAME_WIDTH / 2) {
 			carMoveDirection = -1;
 		} else {
 			carMoveDirection = 1;
 		}
@@ -239,9 +300,9 @@
 					ped.y = crosswalks[idx].y;
 				} else {
 					ped.y = 0 - ped.pedHeight / 2; // fallback
 				}
-				ped.x = road.x - road.width / 2 + ped.pedWidth / 2;
+				ped.x = ROAD_X - ROAD_WIDTH / 2 + ped.pedWidth / 2;
 				// Random speed: 2-3 px/frame (slower for easier dodging)
 				ped.speed = 2 + Math.floor(Math.random() * 2);
 				pedestrians.push(ped);
 				game.addChild(ped);
@@ -274,9 +335,9 @@
 		}
 	}
 };
 // Center score text at top, avoid top left 100x100
-scoreTxt.x = 2048 / 2;
+scoreTxt.x = GAME_WIDTH / 2;
 scoreTxt.y = 20;
 // Clean up on game over (handled by LK, but clear timer)
 game.onDestroy = function () {
 	LK.clearInterval(scoreTimer);