Upit | Learn about creating the game Maze with gen AI

/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ // Class for the maze var Maze = Container.expand(function () { var self = Container.call(this); // Generate maze var maze = self.generateMaze(20, 20); // 20x20 maze // Draw maze self.drawMaze(maze); }); // Class for the player character var Player = Container.expand(function () { var self = Container.call(this); var playerGraphics = self.attachAsset('player', { anchorX: 1.9, anchorY: 1.9 }); }); // Class for the wall var Wall = Container.expand(function () { var self = Container.call(this); var wallGraphics = self.attachAsset('wall1', { anchorX: 0.05, anchorY: 0.05 }); }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 //Init game with black background }); /**** * Game Code ****/ // Add background to the game Maze.prototype.generateMaze = function (width, height) { // Maze generation algorithm goes here // Return a 2D array representing the maze }; Maze.prototype.drawMaze = function (maze) { // Draw the maze using the 2D array // Use LK.getAsset to get the wall asset and add it to the maze container }; var background = game.attachAsset('Background1', { anchorX: 0.5, anchorY: 1, x: 2048 / 2, y: 2732, scaleX: 2048 / 1000, scaleY: (2732 - LK.gui.top.height - 200) / 1000 // Scale down from the top by 200 pixels }); // Set level to 1 game.level = 1; // Initialize player var player = new Player(); player.x = 2048; player.y = 2732; game.addChild(player); // Initialize maze var maze = new Maze(); game.addChild(maze); // Initialize wall2 var wall2 = new Wall(); wall2.x = 100; // Move wall2 a little bit more to the right wall2.y = 0; // Position wall2 at the top of the screen wall2.width = 2048; // Make wall2 as wide as the screen wall2.height = 200; // Make wall2 taller horizontally game.addChild(wall2); // Add Level 1 text on the top right var levelText = new Text2('Level 1', { size: 100, fill: 0xFFFFFF, font: "'Time new roman'" }); levelText.anchor.set(1, 0); // Sets anchor to the top right edge of the text. LK.gui.topRight.addChild(levelText); // Handle player movement // Import tween plugin game.down = function (x, y, obj) {}; game.move = function (x, y, obj) { // Save the current position var oldX = player.x; var oldY = player.y; // Move the player to the new position player.x = x; player.y = y; // Check if the player is colliding with the maze if (player.intersects(maze)) { // If the player is colliding, move them back to the old position player.x = oldX; player.y = oldY; } };

===================================================================
--- original.js
+++ change.js
@@ -5,24 +5,24 @@
 
 /**** 
 * Classes
 ****/ 
+// Class for the maze
+var Maze = Container.expand(function () {
+	var self = Container.call(this);
+	// Generate maze
+	var maze = self.generateMaze(20, 20); // 20x20 maze
+	// Draw maze
+	self.drawMaze(maze);
+});
 // Class for the player character
 var Player = Container.expand(function () {
 	var self = Container.call(this);
 	var playerGraphics = self.attachAsset('player', {
 		anchorX: 1.9,
 		anchorY: 1.9
 	});
 });
-// Class for the small walls
-var SmallWall = Container.expand(function () {
-	var self = Container.call(this);
-	var wallGraphics = self.attachAsset('wall1', {
-		anchorX: 0.05,
-		anchorY: 0.05
-	});
-});
 // Class for the wall
 var Wall = Container.expand(function () {
 	var self = Container.call(this);
 	var wallGraphics = self.attachAsset('wall1', {
@@ -41,8 +41,16 @@
 /**** 
 * Game Code
 ****/ 
 // Add background to the game
+Maze.prototype.generateMaze = function (width, height) {
+	// Maze generation algorithm goes here
+	// Return a 2D array representing the maze
+};
+Maze.prototype.drawMaze = function (maze) {
+	// Draw the maze using the 2D array
+	// Use LK.getAsset to get the wall asset and add it to the maze container
+};
 var background = game.attachAsset('Background1', {
 	anchorX: 0.5,
 	anchorY: 1,
 	x: 2048 / 2,
@@ -56,57 +64,18 @@
 var player = new Player();
 player.x = 2048;
 player.y = 2732;
 game.addChild(player);
-// Initialize wall1
-var wall1 = new Wall();
-wall1.x = 2048 - wall1.width; // Move wall1 to the right edge of the screen
-// Initialize wall2 first to get its height
-var wall2 = new Wall();
-wall2.x = 100; // Move wall2 a little bit more to the right
-wall2.y = 0; // Position wall2 at the top of the screen
-wall2.width = 100; // Make wall2 thinner
-wall2.height = 200; // Keep wall2's height the same
-game.addChild(wall2);
-// Now we can use wall2.height
-wall1.y = wall2.height; // Position wall1 below the top wall
-wall1.width = 200; // Make wall1 thin vertically
-wall1.height = 2732; // Make wall1 as tall as the screen
-game.addChild(wall1);
-// Initialize wall3 on the left side of the screen
-var wall3 = new Wall();
-wall3.x = 0; // Position wall3 at the left edge of the screen
-wall3.y = wall2.height; // Position wall3 below the top wall
-wall3.width = 100; // Make wall3 thinner
-wall3.height = 2732; // Keep wall3's height the same
-game.addChild(wall3);
-// Initialize wall4 at the bottom of the screen
-var wall4 = new Wall();
-wall4.x = 0; // Position wall4 at the left edge of the screen
-wall4.y = 2732 - wall4.height; // Position wall4 at the bottom of the screen
-wall4.width = 2048; // Make wall4 as wide as the screen
-wall4.height = 200; // Make wall4 taller horizontally
-game.addChild(wall4);
+// Initialize maze
+var maze = new Maze();
+game.addChild(maze);
 // Initialize wall2
 var wall2 = new Wall();
 wall2.x = 100; // Move wall2 a little bit more to the right
 wall2.y = 0; // Position wall2 at the top of the screen
 wall2.width = 2048; // Make wall2 as wide as the screen
 wall2.height = 200; // Make wall2 taller horizontally
 game.addChild(wall2);
-// Generate a small maze by adding small walls between the 4 walls
-var smallWalls = [];
-for (var i = 0; i < 10; i++) {
-	for (var j = 0; j < 10; j++) {
-		var smallWall = new SmallWall();
-		smallWall.x = wall2.x + i * 100;
-		smallWall.y = wall2.y + j * 100;
-		smallWall.width = 50;
-		smallWall.height = 50;
-		smallWalls.push(smallWall);
-		game.addChild(smallWall);
-	}
-}
 // Add Level 1 text on the top right
 var levelText = new Text2('Level 1', {
 	size: 100,
 	fill: 0xFFFFFF,
@@ -123,10 +92,10 @@
 	var oldY = player.y;
 	// Move the player to the new position
 	player.x = x;
 	player.y = y;
-	// Check if the player is colliding with any of the walls
-	if (player.intersects(wall1) || player.intersects(wall2) || player.intersects(wall3) || player.intersects(wall4)) {
+	// Check if the player is colliding with the maze
+	if (player.intersects(maze)) {
 		// If the player is colliding, move them back to the old position
 		player.x = oldX;
 		player.y = oldY;
 	}

Creation History

Images

Used plugins