Upit | Learn about creating the game Defend the garden from monsters LIKE IN PLANTS VS ZOMBIES with gen AI

/**** * Classes ****/ // Defense class representing the player's defense mechanism var Defense = Container.expand(function () { var self = Container.call(this); var defenseGraphics = self.attachAsset('defense', { anchorX: 0.5, anchorY: 0.5 }); // Event handler for when the defense is pressed self.down = function (x, y, obj) { // Logic to shoot or activate defense shootDefense(x, y); }; }); //<Assets used in the game will automatically appear here> //<Write imports for supported plugins here> // Monster class representing enemies trying to eat pancakes var Monster = Container.expand(function () { var self = Container.call(this); var monsterGraphics = self.attachAsset('monster', { anchorX: 0.5, anchorY: 0.5 }); self.speed = 2; // Speed at which the monster moves towards the pancakes // Update function to move the monster self.update = function () { self.y += self.speed; }; }); // Pancake class representing the target to protect var Pancake = Container.expand(function () { var self = Container.call(this); var pancakeGraphics = self.attachAsset('pancake', { anchorX: 0.5, anchorY: 0.5 }); }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 //Init game with black background }); /**** * Game Code ****/ // Initialize game variables var soles = 50; // Initial resources var costoPlanta = 50; // Cost of a plant var filas = 3; // Number of rows in the grid var columnas = 5; // Number of columns in the grid // Initialize arrays to keep track of game objects var monsters = []; var pancakes = []; var defenses = []; // Create the game grid function crearGrid() { for (var i = 0; i < filas; i++) { for (var j = 0; j < columnas; j++) { var cell = document.createElement("div"); cell.classList.add("cell"); cell.dataset.fila = i; cell.dataset.columna = j; cell.addEventListener("click", colocarPlanta); // Allow placing plants with a click grid.appendChild(cell); } } } // Function to shoot defense mechanism function shootDefense(x, y) { // Create a new defense object and add it to the game var newDefense = new Defense(); newDefense.x = x; newDefense.y = y; defenses.push(newDefense); game.addChild(newDefense); } // Function to place a plant function colocarPlanta(event) { var cell = event.target; var fila = parseInt(cell.dataset.fila); var columna = parseInt(cell.dataset.columna); // Check if there are enough soles and if the cell is empty if (soles >= costoPlanta && !cell.querySelector(".plant")) { soles -= costoPlanta; // Subtract the cost of the plant actualizarSoles(); // Update the UI for soles // Create the plant visually var plant = document.createElement("div"); plant.classList.add("plant"); cell.appendChild(plant); // Add the plant to the list of active plants plantas.push({ fila: fila, columna: columna, daño: 10, intervalo: 2000 }); iniciarAtaquePlanta(plantas.length - 1); // Start the plant's attack } } // Function to spawn monsters at random positions function spawnMonster() { var newMonster = new Monster(); newMonster.x = Math.random() * 2048; // Random x position newMonster.y = 0; // Start at the top of the screen monsters.push(newMonster); game.addChild(newMonster); } // Function to check for collisions between monsters and pancakes function checkCollisions() { for (var i = monsters.length - 1; i >= 0; i--) { var monster = monsters[i]; for (var j = pancakes.length - 1; j >= 0; j--) { var pancake = pancakes[j]; if (monster.intersects(pancake)) { // Monster reached a pancake, game over LK.effects.flashScreen(0xff0000, 1000); LK.showGameOver(); return; } } } } // Game update function called every tick game.update = function () { // Update all monsters for (var i = 0; i < monsters.length; i++) { monsters[i].update(); } // Check for collisions checkCollisions(); // Update and display soles in the UI function actualizarSoles() { solesElement.textContent = soles; } // Spawn a new monster every 60 ticks if (LK.ticks % 60 === 0) { spawnMonster(); } }; // Initialize pancakes at the bottom of the screen for (var i = 0; i < 5; i++) { var pancake = new Pancake(); pancake.x = (i + 1) * 400; // Spread pancakes evenly pancake.y = 2500; // Near the bottom of the screen pancakes.push(pancake); game.addChild(pancake); } // Initialize the game grid crearGrid(); // Add event listener for defense mechanism game.down = function (x, y, obj) { shootDefense(x, y); };

===================================================================
--- original.js
+++ change.js
@@ -1,111 +1,158 @@
-/****
+/**** 
 * Classes
-****/
+****/ 
 // Defense class representing the player's defense mechanism
 var Defense = Container.expand(function () {
-  var self = Container.call(this);
-  var defenseGraphics = self.attachAsset('defense', {
-    anchorX: 0.5,
-    anchorY: 0.5
-  });
-  // Event handler for when the defense is pressed
-  self.down = function (x, y, obj) {
-    // Logic to shoot or activate defense
-    shootDefense(x, y);
-  };
+	var self = Container.call(this);
+	var defenseGraphics = self.attachAsset('defense', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	// Event handler for when the defense is pressed
+	self.down = function (x, y, obj) {
+		// Logic to shoot or activate defense
+		shootDefense(x, y);
+	};
 });
 //<Assets used in the game will automatically appear here>
 //<Write imports for supported plugins here>
 // Monster class representing enemies trying to eat pancakes
 var Monster = Container.expand(function () {
-  var self = Container.call(this);
-  var monsterGraphics = self.attachAsset('monster', {
-    anchorX: 0.5,
-    anchorY: 0.5
-  });
-  self.speed = 2; // Speed at which the monster moves towards the pancakes
-  // Update function to move the monster
-  self.update = function () {
-    self.y += self.speed;
-  };
+	var self = Container.call(this);
+	var monsterGraphics = self.attachAsset('monster', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	self.speed = 2; // Speed at which the monster moves towards the pancakes
+	// Update function to move the monster
+	self.update = function () {
+		self.y += self.speed;
+	};
 });
 // Pancake class representing the target to protect
 var Pancake = Container.expand(function () {
-  var self = Container.call(this);
-  var pancakeGraphics = self.attachAsset('pancake', {
-    anchorX: 0.5,
-    anchorY: 0.5
-  });
+	var self = Container.call(this);
+	var pancakeGraphics = self.attachAsset('pancake', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
 });
 
-/****
+/**** 
 * Initialize Game
-****/
+****/ 
 var game = new LK.Game({
-  backgroundColor: 0x000000 //Init game with black background 
+	backgroundColor: 0x000000 //Init game with black background 
 });
 
-/****
+/**** 
 * Game Code
-****/
+****/ 
+// Initialize game variables
+var soles = 50; // Initial resources
+var costoPlanta = 50; // Cost of a plant
+var filas = 3; // Number of rows in the grid
+var columnas = 5; // Number of columns in the grid
 // Initialize arrays to keep track of game objects
 var monsters = [];
 var pancakes = [];
 var defenses = [];
+// Create the game grid
+function crearGrid() {
+	for (var i = 0; i < filas; i++) {
+		for (var j = 0; j < columnas; j++) {
+			var cell = document.createElement("div");
+			cell.classList.add("cell");
+			cell.dataset.fila = i;
+			cell.dataset.columna = j;
+			cell.addEventListener("click", colocarPlanta); // Allow placing plants with a click
+			grid.appendChild(cell);
+		}
+	}
+}
 // Function to shoot defense mechanism
 function shootDefense(x, y) {
-  // Create a new defense object and add it to the game
-  var newDefense = new Defense();
-  newDefense.x = x;
-  newDefense.y = y;
-  defenses.push(newDefense);
-  game.addChild(newDefense);
+	// Create a new defense object and add it to the game
+	var newDefense = new Defense();
+	newDefense.x = x;
+	newDefense.y = y;
+	defenses.push(newDefense);
+	game.addChild(newDefense);
 }
+// Function to place a plant
+function colocarPlanta(event) {
+	var cell = event.target;
+	var fila = parseInt(cell.dataset.fila);
+	var columna = parseInt(cell.dataset.columna);
+	// Check if there are enough soles and if the cell is empty
+	if (soles >= costoPlanta && !cell.querySelector(".plant")) {
+		soles -= costoPlanta; // Subtract the cost of the plant
+		actualizarSoles(); // Update the UI for soles
+		// Create the plant visually
+		var plant = document.createElement("div");
+		plant.classList.add("plant");
+		cell.appendChild(plant);
+		// Add the plant to the list of active plants
+		plantas.push({
+			fila: fila,
+			columna: columna,
+			daño: 10,
+			intervalo: 2000
+		});
+		iniciarAtaquePlanta(plantas.length - 1); // Start the plant's attack
+	}
+}
 // Function to spawn monsters at random positions
 function spawnMonster() {
-  var newMonster = new Monster();
-  newMonster.x = Math.random() * 2048; // Random x position
-  newMonster.y = 0; // Start at the top of the screen
-  monsters.push(newMonster);
-  game.addChild(newMonster);
+	var newMonster = new Monster();
+	newMonster.x = Math.random() * 2048; // Random x position
+	newMonster.y = 0; // Start at the top of the screen
+	monsters.push(newMonster);
+	game.addChild(newMonster);
 }
 // Function to check for collisions between monsters and pancakes
 function checkCollisions() {
-  for (var i = monsters.length - 1; i >= 0; i--) {
-    var monster = monsters[i];
-    for (var j = pancakes.length - 1; j >= 0; j--) {
-      var pancake = pancakes[j];
-      if (monster.intersects(pancake)) {
-        // Monster reached a pancake, game over
-        LK.effects.flashScreen(0xff0000, 1000);
-        LK.showGameOver();
-        return;
-      }
-    }
-  }
+	for (var i = monsters.length - 1; i >= 0; i--) {
+		var monster = monsters[i];
+		for (var j = pancakes.length - 1; j >= 0; j--) {
+			var pancake = pancakes[j];
+			if (monster.intersects(pancake)) {
+				// Monster reached a pancake, game over
+				LK.effects.flashScreen(0xff0000, 1000);
+				LK.showGameOver();
+				return;
+			}
+		}
+	}
 }
 // Game update function called every tick
 game.update = function () {
-  // Update all monsters
-  for (var i = 0; i < monsters.length; i++) {
-    monsters[i].update();
-  }
-  // Check for collisions
-  checkCollisions();
-  // Spawn a new monster every 60 ticks
-  if (LK.ticks % 60 === 0) {
-    spawnMonster();
-  }
+	// Update all monsters
+	for (var i = 0; i < monsters.length; i++) {
+		monsters[i].update();
+	}
+	// Check for collisions
+	checkCollisions();
+	// Update and display soles in the UI
+	function actualizarSoles() {
+		solesElement.textContent = soles;
+	}
+	// Spawn a new monster every 60 ticks
+	if (LK.ticks % 60 === 0) {
+		spawnMonster();
+	}
 };
 // Initialize pancakes at the bottom of the screen
 for (var i = 0; i < 5; i++) {
-  var pancake = new Pancake();
-  pancake.x = (i + 1) * 400; // Spread pancakes evenly
-  pancake.y = 2500; // Near the bottom of the screen
-  pancakes.push(pancake);
-  game.addChild(pancake);
+	var pancake = new Pancake();
+	pancake.x = (i + 1) * 400; // Spread pancakes evenly
+	pancake.y = 2500; // Near the bottom of the screen
+	pancakes.push(pancake);
+	game.addChild(pancake);
 }
+// Initialize the game grid
+crearGrid();
 // Add event listener for defense mechanism
 game.down = function (x, y, obj) {
-  shootDefense(x, y);
+	shootDefense(x, y);
 };
\ No newline at end of file

Creation History