Upit | Learn about creating the game Sand Wars

===================================================================
--- original.js
+++ change.js
@@ -115,20 +115,8 @@
 	self.load = function (data) {
 		// Load map data from a file
 	};
 });
-// Command Panel class
-var CommandPanel = Container.expand(function () {
-	var self = Container.call(this);
-	self.graphics = self.attachAsset('boardBackground', {
-		width: game.width,
-		height: game.height * 0.22,
-		color: 0x333333
-	});
-	// Set the center box position to the center of the screen
-	self.x = game.width / 2 - self.graphics.width / 2;
-	self.y = game.height - self.height + game.height * 0.01;
-});
 var Sand = Container.expand(function (x, y) {
 	var self = Container.call(this);
 	self.asset = LK.getAsset('sand', {
 		x: x * 100,
@@ -179,8 +167,20 @@
 	// Initialize player-specific properties here
 	// ...
 	return self;
 });
+// Command Panel class
+var CommandPanel = Container.expand(function () {
+	var self = Container.call(this);
+	self.graphics = self.attachAsset('boardBackground', {
+		width: game.width,
+		height: game.height * 0.22,
+		color: 0x333333
+	});
+	// Set the center box position to the center of the screen
+	self.x = game.width / 2 - self.graphics.width / 2;
+	self.y = game.height - self.height + game.height * 0.01;
+});
 
 /**** 
 * Initialize Game
 ****/
@@ -192,62 +192,62 @@
 
 /**** 
 * Game Code
 ****/
-var currentSelection = null;
 var getPlayerTint = function getPlayerTint(id) {
 	return player1.playerId === id ? player1.tint : player2.tint;
 };
-var player1 = new Player(1, 0xAAAAff);
-var player2 = new Player(2, 0xffAAAA);
-// Initialize assets used in this game.
-// Event listeners
-// Event listeners
-// Instantiate and initialize the Map
+var gameIsRunning = false;
 var mapXSize = 50;
 var mapYSize = 30;
-// Prepare the terrain
-var globalTerrain = new Array(mapXSize).fill(0).map(function () {
-	return new Array(mapYSize).fill(0);
-});
-var gameMap = new Map();
-gameMap.init(mapXSize, mapYSize); // Initialize with a 20x20 grid
-// Define a fixed rock ilot near the center left of the map
-var rockIlot1Center = {
-	x: Math.floor(mapXSize * 0.15),
-	y: Math.floor(mapYSize * 0.5)
-};
-var rockIlot1Radius = 4;
-for (var x = rockIlot1Center.x - rockIlot1Radius; x <= rockIlot1Center.x + rockIlot1Radius; x++) {
-	for (var y = rockIlot1Center.y - rockIlot1Radius; y <= rockIlot1Center.y + rockIlot1Radius; y++) {
-		if (x >= 0 && x < mapXSize && y >= 0 && y < mapYSize) {
-			globalTerrain[x][y] = 1;
+var gameMap = null;
+var globalTerrain = null;
+var player1 = null;
+var player2 = null;
+var currentSelection = null;
+// Prepare the map
+function prepareMap() {
+	globalTerrain = new Array(mapXSize).fill(0).map(function () {
+		return new Array(mapYSize).fill(0);
+	});
+	gameMap = new Map();
+	gameMap.init(mapXSize, mapYSize); // Initialize with a 20x20 grid
+	// Define a fixed rock ilot near the center left of the map
+	var rockIlot1Center = {
+		x: Math.floor(mapXSize * 0.15),
+		y: Math.floor(mapYSize * 0.5)
+	};
+	var rockIlot1Radius = 4;
+	for (var x = rockIlot1Center.x - rockIlot1Radius; x <= rockIlot1Center.x + rockIlot1Radius; x++) {
+		for (var y = rockIlot1Center.y - rockIlot1Radius; y <= rockIlot1Center.y + rockIlot1Radius; y++) {
+			if (x >= 0 && x < mapXSize && y >= 0 && y < mapYSize) {
+				globalTerrain[x][y] = 1;
+			}
 		}
 	}
-}
-console.log("rockIlot2Center at " + rockIlot1Center.x + ',' + rockIlot1Center.y);
-gameMap.cells[rockIlot1Center.x][rockIlot1Center.y].building = new ConstructionYard(rockIlot1Center.x, rockIlot1Center.y, 1);
-// Define a fixed rock ilot near the center right of the map
-var rockIlot2Center = {
-	x: Math.floor(mapXSize * 0.85),
-	y: Math.floor(mapYSize * 0.5)
-};
-var rockIlot2Radius = 4;
-for (var x = rockIlot2Center.x - rockIlot2Radius; x <= rockIlot2Center.x + rockIlot2Radius; x++) {
-	for (var y = rockIlot2Center.y - rockIlot2Radius; y <= rockIlot2Center.y + rockIlot2Radius; y++) {
-		if (x >= 0 && x < mapXSize && y >= 0 && y < mapYSize) {
-			globalTerrain[x][y] = 1;
+	console.log("rockIlot2Center at " + rockIlot1Center.x + ',' + rockIlot1Center.y);
+	gameMap.cells[rockIlot1Center.x][rockIlot1Center.y].building = new ConstructionYard(rockIlot1Center.x, rockIlot1Center.y, 1);
+	// Define a fixed rock ilot near the center right of the map
+	var rockIlot2Center = {
+		x: Math.floor(mapXSize * 0.85),
+		y: Math.floor(mapYSize * 0.5)
+	};
+	var rockIlot2Radius = 4;
+	for (var x = rockIlot2Center.x - rockIlot2Radius; x <= rockIlot2Center.x + rockIlot2Radius; x++) {
+		for (var y = rockIlot2Center.y - rockIlot2Radius; y <= rockIlot2Center.y + rockIlot2Radius; y++) {
+			if (x >= 0 && x < mapXSize && y >= 0 && y < mapYSize) {
+				globalTerrain[x][y] = 1;
+			}
 		}
 	}
+	console.log("rockIlot2Center at " + rockIlot2Center.x + ',' + rockIlot2Center.y);
+	gameMap.cells[rockIlot2Center.x][rockIlot2Center.y].building = new ConstructionYard(rockIlot2Center.x, rockIlot2Center.y, 2);
+	console.log('ConstructionYard cell :', gameMap.cells[rockIlot2Center.x][rockIlot2Center.y]);
+	gameMap.initTerrain(mapXSize, mapYSize); // Initialize with a 20x20 grid
+	// Add the map to the game
+	game.addChild(gameMap);
 }
-console.log("rockIlot2Center at " + rockIlot2Center.x + ',' + rockIlot2Center.y);
-gameMap.cells[rockIlot2Center.x][rockIlot2Center.y].building = new ConstructionYard(rockIlot2Center.x, rockIlot2Center.y, 2);
-console.log('ConstructionYard cell :', gameMap.cells[rockIlot2Center.x][rockIlot2Center.y]);
-gameMap.initTerrain(mapXSize, mapYSize); // Initialize with a 20x20 grid
-// Add the map to the game
-// This should be done after the map is fully initialized and ready to render
-game.addChild(gameMap);
-var isPressing = false;
+//#region Event listeners
 var dragStart = null;
 function handleDragStart(obj) {
 	dragStart = obj.event.getLocalPosition(game);
 }
@@ -269,25 +269,39 @@
 }
 game.on('down', handleDragStart);
 game.on('move', handleDragMove);
 game.on('up', handleDragEnd);
+//#endregion Event listeners
 // Instantiate CommandPanel
 var commandPanel = game.addChild(new CommandPanel());
 // Global function to handle action board updates
 var updateActionBoard = function updateActionBoard() {
 	// Update logic for the action board
 	// This function can be called whenever the action board needs to be updated
 };
-// Create a Text2 object to display player1's spice level
-var player1SpiceText = new Text2(player1.spice.toString(), {
-	size: 50,
-	fill: '#000000',
-	font: "'GillSans-Bold',Impact,'Arial Black',Tahoma"
-});
-player1SpiceText.anchor.set(1.0, 0);
-// Add the spice level text to the GUI overlay
-LK.gui.topRight.addChild(player1SpiceText);
+function initGame() {
+	prepareMap();
+	// prepare players
+	player1 = new Player(1, 0xAAAAff);
+	player2 = new Player(2, 0xffAAAA);
+	// Create a Text2 object to display player1's spice level
+	var player1SpiceText = new Text2(player1.spice.toString(), {
+		size: 50,
+		fill: '#000000',
+		font: "'GillSans-Bold',Impact,'Arial Black',Tahoma"
+	});
+	player1SpiceText.anchor.set(1.0, 0);
+	// Add the spice level text to the GUI overlay
+	LK.gui.topRight.addChild(player1SpiceText);
+	gameIsRunning = true;
+}
 // Game tick
 LK.on('tick', function () {
 	// Render the map each tick
-	gameMap.render();
-});
\ No newline at end of file
+	if (gameIsRunning) {
+		gameMap.render();
+	}
+});
+// Start the game
+LK.setTimeout(function () {
+	initGame();
+}, 1000);
\ No newline at end of file
Creation History

Images
