Upit | Learn about creating the game Bubble Tea Bedlam with gen AI

Play

Bubble Tea Bedlam

ludonarrativedisstrack

BubbleTeaBedlam

1.9K

11mo

Playit

Oh no! You dropped the customers boba! Catch it before it falls on the floor!

#bubbletea

#casualgame

#foodgame

#taptoplay

#mixandmatch

#drop

#catch

#boba

Creation History

User prompt

Remove Hello text

User prompt

Move the customer don't to the bottom of the screen

User prompt

Create speech bubble

User prompt

Implement suggestions above

User prompt

Level fail when ingredients fall to the bottom of screen. Game Over text appears

User prompt

Remove all code regarding customer order

User prompt

Fix Bug: 'TypeError: undefined is not an object (evaluating 'order.length')' in this line: 'if (self.ingredients.length != order.length) return false;' Line Number: 15

User prompt

Fail state is ingredients falling to the bottom of the screen

User prompt

Remove order array

User prompt

Stretch background image to fit screen

User prompt

Create background image

User prompt

Edge of the screen is the boundary

User prompt

1. In the `generateOrder` method, after generating the random order, call the `displayOrder` method to create and display the ingredient graphics. 2. In the `displayOrder` method, iterate over the `self.order` array, which contains the IDs of the ingredients for the order. 3. For each ingredient ID in the order, use `self.createAsset` to create a new ingredient asset. Set the anchor points to 0.5, 0.5 to center the ingredients. 4. Add each new ingredient asset as a child to the customer container using `self.addChild`. 5. Position each ingredient asset above the customer's head by setting the `x` property to the customer's `x` position plus an offset based on the ingredient's index and width (to avoid overlapping), and the `y` property to the customer's `y` position minus a fixed value that would place the ingredients visually above the customer's head. 6. Ensure that the ingredients are spaced out appropriately so that all three are visible and do not overlap. You can use the ingredient's width and a multiplier to space them out.

User prompt

Represent order with asset graphics above customer

User prompt

Make the customer order randomly generated. Represent it above customer

User prompt

Analyze the code for the following issues. Fix if found: 1. **Duplicate Methods**: There are two `generateOrder` and `displayOrder` methods defined within the `Customer` class. This could lead to confusion or override issues where the last defined method takes precedence, potentially causing the order not to display correctly. 2. **Asset Retrieval**: If the `LK.getAsset` method is not retrieving the correct assets for the ingredients due to incorrect IDs or descriptions, the ingredients will not display. It's important to ensure that the asset IDs match those available in the game's asset library. 3. **Positioning**: The positioning logic within the `displayOrder` method may be incorrect, causing the ingredients to be placed off-screen or in a location that is not visible to the player. 4. **Asset Visibility**: If the ingredient assets are not being added to the stage or their visibility is set to false, they will not appear on the screen. 5. **Z-Index**: The ingredients might be displaying behind other assets or the customer itself due to the rendering order, making them invisible to the player. 6. **Timing**: The order might be generated and displayed before the customer is properly positioned, leading to the ingredients being placed at incorrect coordinates. 7. **Errors**: There could be errors in the code that prevent the execution of the `displayOrder` method, such as syntax errors, reference errors, or logic errors within the method itself. 8. **Asset Loading**: If the assets for the ingredients have not been loaded properly before they are needed for display, they will not appear on the screen.

User prompt

1. Within the `Customer` class, create a method called `generateOrder` that will be responsible for creating a random order for the customer. This method should be called whenever you need to generate a new order, such as when a new customer appears or after a customer's order has been fulfilled. 2. Inside the `generateOrder` method, use a loop to generate a random sequence of ingredient IDs. The number of ingredients should match the size of the order, which in this case is three. Use `Math.random()` to generate random numbers and `Math.floor()` to round them to integers that correspond to the IDs of available ingredients. 3. Store the generated sequence of ingredient IDs in an array property of the `Customer` object, such as `self.order`. 4. Create another method within the `Customer` class called `displayOrder`. This method will be responsible for displaying the ingredients above the customer's head. 5. In the `displayOrder` method, loop through the `self.order` array and for each ingredient ID, retrieve the corresponding asset using `LK.getAsset`. Position these assets above the customer's head by setting their `x` and `y` properties. You might want to use a fixed vertical offset from the customer's `y` position and increment the `x` position based on the width of the ingredients to avoid overlap. 6. Call the `displayOrder` method at the end of the `generateOrder` method to ensure that the order is displayed as soon as it is generated. 7. In the `Game` class, where you manage the game logic, ensure that you call the `generateOrder` method for the customer at appropriate times, such as when initializing the game or after an order has been completed.

User prompt

Display order above the customer

User prompt

To represent the 3 ingredient combo above the customer in the game, you would create a visual representation of the customer's order. This could be done by displaying icons or images of the ingredients that make up the order, positioned above the customer's head or in a thought bubble. Each ingredient in the order would be represented by its corresponding asset, which you would retrieve using the `LK.getAsset` method. Here's how you might approach it in human language, without altering the source code: 1. Create a new class or method within the `Customer` class that will handle the display of the order. This could be called `displayOrder` or something similar. 2. Within this method, loop through the `self.order` array, which contains the IDs of the ingredients in the customer's order. 3. For each ingredient ID, retrieve the corresponding asset using `LK.getAsset`, passing in the appropriate ID and description. 4. Position these ingredient assets above the customer's head. You might use a fixed offset from the customer's `x` and `y` position to place them correctly. 5. Ensure that the ingredients are displayed in a way that is visually clear to the player, such as in a horizontal line or a thought bubble graphic. 6. Update the display whenever the customer's order changes, ensuring that the old order is cleared and the new one is displayed.

User prompt

The cup graphic passes in front of the customer geaphic

User prompt

Fix Bug: 'TypeError: undefined is not an object (evaluating 'customer.x')' in this line: 'bubbleTea.x = customer.x;' Line Number: 50

User prompt

The cup is in front of the customer

User prompt

Move the customer 100 pixels down and 50 pixels right

User prompt

Move the customer 200 pixels down

User prompt

Move the customer 100 pixels down

var Customer = Container.expand(function () {
	var self = Container.call(this);
	var customerGraphics = self.createAsset('customer', 'Customer', .5, .5);
	self.order = [];
	self.generateOrder = function () {
		self.order = [];
		for (var i = 0; i < 3; i++) {
			self.order.push(Math.floor(Math.random() * 5));
		}
	};
});
var BubbleTea = Container.expand(function () {
	var self = Container.call(this);
	var teaGraphics = self.createAsset('bubbleTea', 'Bubble Tea', .5, .5);
	self.ingredients = [];
	self.speed = 10;
	self.catch = function (ingredient) {
		self.ingredients.push(ingredient);
	};
	self.checkOrder = function (order) {
		if (self.ingredients.length != order.length) return false;
		for (var i = 0; i < self.ingredients.length; i++) {
			if (self.ingredients[i].id != order[i]) return false;
		}
		return true;
	};
	self.move = function (direction) {
		self.x += self.speed * direction;
		if (self.x < 0) self.x = 0;
		if (self.x > 2048) self.x = 2048;
	};
});
var Ingredient = Container.expand(function (id) {
	var self = Container.call(this);
	self.id = id;
	self.speed = 5;
	var ingredientGraphics = self.createAsset('ingredient' + id, 'Ingredient', .5, .5);
	self.move = function () {
		self.y += self.speed;
		if (self.y > 2732) {
			self.y = 2732;
		}
	};
	self.add = function () {};
});
var Game = Container.expand(function () {
	var self = Container.call(this);
	var ingredients = [];
	var customer = self.addChild(new Customer());
	customer.x = 500;
	customer.y = 2732 - customer.height + 600;
	customer.generateOrder();
	var bubbleTea = self.addChild(new BubbleTea());
	bubbleTea.x = 2048 / 2;
	bubbleTea.y = 2732 - bubbleTea.height / 2;
	stage.on('move', function (obj) {
		var event = obj.event;
		var pos = event.getLocalPosition(self);
		bubbleTea.x = pos.x;
	});
	LK.on('tick', function () {
		for (var a = ingredients.length - 1; a >= 0; a--) {
			ingredients[a].move();
			if (ingredients[a].y > 2732) {
				ingredients[a].destroy();
				ingredients.splice(a, 1);
			} else if (bubbleTea.intersects(ingredients[a])) {
				bubbleTea.catch(ingredients[a]);
				ingredients[a].destroy();
				ingredients.splice(a, 1);
			}
		}
		if (LK.ticks % 60 == 0) {
			var newIngredient = new Ingredient(Math.floor(Math.random() * 5));
			newIngredient.x = Math.random() * 2048;
			newIngredient.y = -newIngredient.height;
			ingredients.push(newIngredient);
			self.addChild(newIngredient);
		}
		if (bubbleTea.checkOrder(customer.order)) {
			console.log('You win!');
		} else if (bubbleTea.ingredients.length > 3) {
			console.log('You lose!');
		}
	});
});

===================================================================
--- original.js
+++ change.js
@@ -50,10 +50,10 @@
 	customer.x = 500;
 	customer.y = 2732 - customer.height + 600;
 	customer.generateOrder();
 	var bubbleTea = self.addChild(new BubbleTea());
-	bubbleTea.x = customer.x;
-	bubbleTea.y = customer.y - customer.height / 2 - bubbleTea.height / 2;
+	bubbleTea.x = 2048 / 2;
+	bubbleTea.y = 2732 - bubbleTea.height / 2;
 	stage.on('move', function (obj) {
 		var event = obj.event;
 		var pos = event.getLocalPosition(self);
 		bubbleTea.x = pos.x;

Showing 76 to 100 of 206

1 2 3 4 5 6 7 8 9

Images

Fruit jelly boba pearls, no cup
Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

pile of Fruit jelly boba pearls, no cup
Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

kawaii harajuku customer, mask,
Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

fruit shiny anime, no face

Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

boba pearls, pile, no cup, shiny anime
Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

red bean, shiny anime, pile no cup

Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

shiny plastic cup, no lid, anime, empty
Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

whipped milk foam, creamy fluff, anime,
Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

flan pudding, shiny, anime

Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

anime angry lines, red cross
Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

Tea shop interior, anime cafe

Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

Speech bubble 💬, "don't drop!"
Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

UI point box, white square
Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.

Most played remixes

Main