Upit | Learn about creating the game to be deleted with gen AI

Play

to be deleted

octo

8LevelsTest175

3mo

Playit

Your phone has been hacked! Encryption walls, firewalls, and deadly traps stand between you and your phone. Can you solve the hacker's algorithms and reclaim control?

#UpitPuzzleContest

#escape the room

#puzzle

#strategy

#hacking

#hacker

#simulation

Creation History

Code edit (2 edits merged)

Please save this source code

User prompt

ensure the parts of the code like y: 2832 + 500 // Start below the screen or y: 1900 + 500 // Start below the screen use the global variables to call their positions, rather than using direct numbers

Code edit (3 edits merged)

Please save this source code

User prompt

consolidate the animation values into global variables that can be accessed fro ma single place. for example the tutorial_face and tutorial_text_box assets should be called from their own individual global variables

Code edit (1 edits merged)

Please save this source code

User prompt

Updated Logic Initial State in Level 0: When the game starts or the player returns to Level 0, the tutorial assets (tutorialFace and tutorialTextBox) are reset to their starting positions (off-screen). The animation does not play in Level 0. Triggering the Animation: The animation only starts when the player selects one of the levels (1 through 8) from the main menu (Level 0). Upon entering a level, the tutorial assets begin their animation cycle. Animation Cycle: Intro Animation: The asset moves from its starting position (off-screen) to its designated resting position (on-screen). This movement takes a defined duration, such as 100 milliseconds. Rest Duration: Once at the resting position, the asset stays visible for 5 seconds. Outro Animation: After the rest duration, the asset moves back to its starting position (off-screen) over the same duration as the intro. Remain Hidden: After completing the outro, the asset remains hidden off-screen for the rest of the level. Behavior Upon Returning to Level 0: If the player presses the Back Button and returns to Level 0: The tutorial assets reset to their starting positions (off-screen). The animation does not play again in Level 0. Replaying the Animation: If the player selects another level (1 through 8) from Level 0: The tutorial assets reset and replay the full animation cycle (intro → rest → outro) upon entering the new level. Consistency: The animation cycle must always play in the same way upon entering any level (1 through 8) from Level 0, regardless of how many times the player returns to Level 0. Summary The animation only begins when the player enters a level (1 through 8) from Level 0. The cycle consists of: Intro: Move on-screen (100 ms). Rest: Stay visible for 5 seconds. Outro: Move off-screen (100 ms). Stop: Remain hidden for the rest of the level. Returning to Level 0 resets the assets to their starting positions but does not play the animation. Re-entering a level from Level 0 restarts the animation from the beginning.

User prompt

Updated Animation Cycle Intro: The asset (tutorialFace, tutorialTextBox) starts below the screen (startingPosition) and moves to its visible location (restingPosition). This takes ANIMATION_DURATION (100 milliseconds). Rest: Once in the resting position, the asset stays visible for 5 seconds (REST_DURATION). Outro: After resting, the asset moves back to its starting position using the same ANIMATION_DURATION (100 milliseconds). Remain Hidden: After the outro, the asset stays at the starting position for the remainder of the level. Reset Behavior: Pressing the Back Button resets the animation. When the player enters any level, the animation restarts from the beginning (intro → rest → outro).

User prompt

Implement the Logic Here’s the corrected sequence: Intro Animation: Move tutorialFace and tutorialTextBox from startingPosition to restingPosition using a tween animation. Rest Timer: Use LK.setTimeout() to hold the assets at their resting position for REST_DURATION (e.g., 5000 ms). Outro Animation: Move the assets back to their startingPosition using the same ANIMATION_DURATION. Repeat on Revisit: Trigger the entire sequence again when the level is revisited.

User prompt

Structure the Tween Animations Use a clear sequence: Intro Animation: Start below the screen and tween to the resting position. Rest Timer: Pause at the resting position for the defined duration. Outro Animation: Tween back to the starting position.

User prompt

Centralize Timing with Global Variables Use a global variable, e.g., ANIMATION_DURATION, to control both the intro and outro animation times. Add another global variable, REST_DURATION, to control how long the assets stay in the resting position (e.g., 5000 ms).

User prompt

Please fix the bug: 'tutorialTextBox.addChild is not a function' in or related to this line: 'tutorialTextBox.addChild(tutorialText);' Line Number: 190

User prompt

Please fix the bug: 'tutorialTextBox.addChild is not a function' in or related to this line: 'tutorialTextBox.addChild(tutorialText);' Line Number: 188

User prompt

Define Clear Positions Create global variables or properties for the startingPosition (below the screen) and restingPosition (current visible position). Example: tutorialFace.startingPosition = 2832; tutorialFace.restingPosition = 2732; Use these variables consistently in both the intro and outro animations. 2. Centralize Timing with Global Variables Use a global variable, e.g., ANIMATION_DURATION, to control both the intro and outro animation times. Add another global variable, REST_DURATION, to control how long the assets stay in the resting position (e.g., 5000 ms). 3. Structure the Tween Animations Use a clear sequence: Intro Animation: Start below the screen and tween to the resting position. Rest Timer: Pause at the resting position for the defined duration. Outro Animation: Tween back to the starting position. 4. Implement the Logic Here’s the corrected sequence: Intro Animation: Move tutorialFace and tutorialTextBox from startingPosition to restingPosition using a tween animation. Rest Timer: Use LK.setTimeout() to hold the assets at their resting position for REST_DURATION (e.g., 5000 ms). Outro Animation: Move the assets back to their startingPosition using the same ANIMATION_DURATION. Repeat on Revisit: Trigger the entire sequence again when the level is revisited. 5. Ensure Consistency Use the same ANIMATION_DURATION for both intro and outro animations. Use the onFinish callback of the tween plugin to ensure each step of the sequence triggers smoothly. 6. Apply to Both Assets Replicate the logic for tutorialFace and tutorialTextBox with their respective positions.

User prompt

Code edit (3 edits merged)

Please save this source code

User prompt

so ensure the animation starts with the assets very low, so they are actually under the screen area, so they are not visible, then after 100 miliseconds afetr enetering the level, the assets rise to their corrent lcoation so they become visible witihin the screen area, and after 5 seconds of this, they go back t otheir original location udner the screen where they are not visible to the human eye

User prompt

ensure the tutorial animation has both an intro, a pause and an outro sequence

User prompt

The tutorial assets should not remain permanently visible on the screen. Instead, they should follow this specific animation sequence when the player enters the level: Tutorial Face Animation: Intro Animation: tutorial_face starts below the screen. It animates upward to its designated static position currently defined in the game, using a tween animation. The intro animation duration is defined by a global variable (e.g., ANIMATION_DURATION) and takes exactly 100 milliseconds. Rest Position: Once at its static position, tutorial_face remains visible in this location for 5 seconds. Outro Animation: After the 5-second rest, it animates downward back to its starting position below the screen using the same tween animation and duration as the intro (100 milliseconds, defined by the same ANIMATION_DURATION variable). Tutorial Text Box Animation: Intro Animation: tutorial_text_box also begins below the screen and animates upward to its designated static position, currently defined in the game, using the same tween animation. The intro duration is also controlled by the same global variable (ANIMATION_DURATION, 100 milliseconds). Rest Position: It stays visible in this position for 5 seconds. Outro Animation: After 5 seconds, it animates downward back to its starting position below the screen. The outro duration matches the intro duration (100 milliseconds, using ANIMATION_DURATION). Repeat Behavior: If the player returns to the level after going back to Level 0, the entire animation sequence for both tutorial_face and tutorial_text_box (intro, rest, and outro) should play again. Additional Note: To ensure consistency and smooth animation, consider importing and using the @upit/tween.v1 plugin. ↪💡 Consider importing and using the following plugins: @upit/tween.v1

User prompt

the tutorial assets should not stay permanently on the screen. rather, they need to have a tween intro animation when the player enters the level. so tutorial_face needs to appear from under the screen and stop at it's current location, and this animation takes 100 miliseconds. then it stays in this current position for 5 seconds, and then it goes back udner the screen where it came from and they stays there for the duration of the level. if the levels goes back to level 0 and returns to the level, this animation plays again. the same goes for the tutorial_text_box which has a similar intro of the same duration, also stays on screen for same duration of 5 seconds then also after 100 miliseconds it outro's back at the bottom of the screen using a tween animaion ↪💡 Consider importing and using the following plugins: @upit/tween.v1

Code edit (2 edits merged)

Please save this source code

User prompt

align the tutorial text to the center of the tutorial_text box so it's perfectly aligned to the center, right now iwhile it's centered to the x axis, it's not on the y axis, the text is actually much lower than the text box area

User prompt

align the tutorial text to the center of the tutorial_text box so it's perfectly aligned to the center, right now it's anchored to the bottom left edge of the text box which looks ugly

Code edit (3 edits merged)

Please save this source code

User prompt

move the tutorial text box 200 pixels higher and 300 to the right

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

/**** 
* Classes
****/ 
var BackButton = Container.expand(function () {
	var self = Container.call(this);
	var buttonGraphics = self.attachAsset('Button_Back', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	self.down = function (x, y, obj) {
		for (var i = 0; i < levels.length; i++) {
			levels[i].visible = false;
			if (i < levelButtons.length) {
				levelButtons[i].visible = true;
			}
		}
		levels[0].visible = true;
	};
});
var Button = Container.expand(function (levelNumber) {
	var self = Container.call(this);
	var buttonGraphics = self.attachAsset('button', {
		anchorX: 0.5,
		anchorY: 0.5
	});
	var buttonText = new Text2(levelNumber.toString(), {
		size: 50,
		fill: 0xFFFFFF
	});
	buttonText.anchor.set(0.5, 0.5);
	self.addChild(buttonText);
	self.down = function (x, y, obj) {
		for (var i = 0; i < levels.length; i++) {
			levels[i].visible = false;
			if (i < levelButtons.length) {
				levelButtons[i].visible = false;
			}
		}
		levels[levelNumber].visible = true;
		// Trigger tutorial animation if entering levels 1-8
		if (levelNumber >= 1 && levelNumber <= 8) {
			levels[levelNumber]._animateTutorialAssets();
		}
	};
});
var Door = Container.expand(function (levelNumber) {
	var self = Container.call(this);
	var doorGraphics = self.attachAsset('Door_' + levelNumber, {
		anchorX: 0.5,
		anchorY: 0.5,
		alpha: 0
	});
	self.down = function (x, y, obj) {
		for (var i = 0; i < levels.length; i++) {
			levels[i].visible = false;
		}
		var nextLevel = levels[self.levelToGo - 1];
		nextLevel.visible = true;
		if (nextLevel instanceof GameOverState) {
			nextLevel.startTimer();
		}
	};
});
var GameOverState = Container.expand(function () {
	var self = Container.call(this);
	self.timer = null;
	self.startTimer = function () {
		self.timer = LK.setTimeout(function () {
			LK.showGameOver();
		}, 2000);
	};
	self.stopTimer = function () {
		if (self.timer) {
			LK.clearTimeout(self.timer);
			self.timer = null;
		}
	};
	// Attach the level 9 asset as the background of the game over state
	var levelBackground = self.attachAsset('level9', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 2048,
		height: 2732,
		x: 2048 / 2,
		y: 2732 / 2
	});
});
var Level = Container.expand(function (levelNumber) {
	var self = Container.call(this);
	// Attach the corresponding level asset as the background of the level
	var levelBackground = self.attachAsset('level' + levelNumber, {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 2048,
		height: 2732,
		x: 2048 / 2,
		y: 2732 / 2
	});
	if (levelNumber >= 1 && levelNumber <= 8) {
		var _animateTutorialAssets = function animateTutorialAssets() {
			// Intro animation for tutorialFace
			tween(tutorialFace, {
				y: 2732 // Resting position
			}, {
				duration: ANIMATION_DURATION,
				easing: tween.easeInOut,
				onFinish: function onFinish() {
					// Rest position for 5 seconds
					LK.setTimeout(function () {
						// Outro animation for tutorialFace
						tween(tutorialFace, {
							y: 2832 + 500 // Starting position
						}, {
							duration: ANIMATION_DURATION,
							easing: tween.easeInOut
						});
					}, REST_DURATION);
				}
			});
			// Intro animation for tutorialTextBox
			tween(tutorialTextBox, {
				y: 1900 // Resting position
			}, {
				duration: ANIMATION_DURATION,
				easing: tween.easeInOut,
				onFinish: function onFinish() {
					// Rest position for 5 seconds
					LK.setTimeout(function () {
						// Outro animation for tutorialTextBox
						tween(tutorialTextBox, {
							y: 2400 + 500 // Starting position
						}, {
							duration: ANIMATION_DURATION,
							easing: tween.easeInOut
						});
					}, REST_DURATION);
				}
			});
		};
		var tutorialFace = self.attachAsset('Tutorial_Face', {
			anchorX: 0.0,
			anchorY: 1.0,
			x: 0,
			y: 2832 + 500 // Start below the screen
		});
		var tutorialTextBox = new Container();
		var tutorialTextBoxGraphics = tutorialTextBox.attachAsset('Tutorial_Text_Box', {
			anchorX: 0.0,
			anchorY: 1.0,
			x: 700,
			y: 1900 + 500 // Start below the screen
		});
		self.addChild(tutorialTextBox);
		// Define animation duration
		var ANIMATION_DURATION = 1000;
		var REST_DURATION = 5000; // Duration for how long the assets stay in the resting position
		self._animateTutorialAssets = function () {
			// Intro animation for tutorialFace
			tween(tutorialFace, {
				y: tutorialFaceRestPosition // Resting position
			}, {
				duration: ANIMATION_DURATION,
				easing: tween.easeInOut,
				onFinish: function onFinish() {
					// Rest position for 5 seconds
					LK.setTimeout(function () {
						// Outro animation for tutorialFace
						tween(tutorialFace, {
							y: tutorialFaceStartPosition // Starting position
						}, {
							duration: ANIMATION_DURATION,
							easing: tween.easeInOut
						});
					}, REST_DURATION);
				}
			});
			// Intro animation for tutorialTextBox
			tween(tutorialTextBox, {
				y: tutorialTextBoxRestPosition // Resting position
			}, {
				duration: ANIMATION_DURATION,
				easing: tween.easeInOut,
				onFinish: function onFinish() {
					// Rest position for 5 seconds
					LK.setTimeout(function () {
						// Outro animation for tutorialTextBox
						tween(tutorialTextBox, {
							y: tutorialTextBoxStartPosition // Starting position
						}, {
							duration: ANIMATION_DURATION,
							easing: tween.easeInOut
						});
					}, REST_DURATION);
				}
			});
		};
		var tutorialText = new Text2('Tutorial text for level ' + levelNumber, {
			size: 50,
			fill: 0xFFFFFF
		});
		tutorialText.anchor.set(0.5, 0.5);
		tutorialText.x = tutorialTextBox.width / 2;
		tutorialText.y = tutorialTextBox.height / 2 - 400;
		tutorialTextBox.addChild(tutorialText);
	}
	if (levelNumber == 1) {
		var door1 = new Door(1);
		var door2 = new Door(2);
		door1.x = 2048 / 2 - 400;
		door1.y = 2732 / 2 + 750;
		door2.x = 2048 / 2 + 470;
		door2.y = 2732 / 2 + 750;
		self.addChild(door1);
		self.addChild(door2);
		var levelsToGo = [2, 9];
		levelsToGo.sort(function () {
			return 0.5 - Math.random();
		});
		door1.levelToGo = levelsToGo[0];
		door2.levelToGo = levelsToGo[1];
	}
	self.isPassed = function () {
		// Define the condition for the level to be considered as passed
		// This is a placeholder, replace with the actual condition
		return false;
	};
	self.update = function () {
		// Update logic for the level
		// Check if the level is passed
		if (self.isPassed()) {
			// Hide the current level
			self.visible = false;
			// Show the next level
			var nextLevelIndex = levels.indexOf(self) + 1;
			if (nextLevelIndex < levels.length) {
				levels[nextLevelIndex].visible = true;
			} else {
				// If there are no more levels, the game is won
				LK.showGameWon();
			}
		}
	};
});
//<Assets used in the game will automatically appear here>
// Define the Level class
var Level_0 = Container.expand(function () {
	var self = Container.call(this);
	// Attach the corresponding level asset as the background of the level
	var levelBackground = self.attachAsset('level0', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 2048,
		height: 2732,
		x: 2048 / 2,
		y: 2732 / 2
	});
	// Reset tutorial assets to starting positions
	var tutorialFace = self.attachAsset('Tutorial_Face', {
		anchorX: 0.0,
		anchorY: 1.0,
		x: 0,
		y: 2832 + 500 // Start below the screen
	});
	var tutorialTextBox = new Container();
	var tutorialTextBoxGraphics = tutorialTextBox.attachAsset('Tutorial_Text_Box', {
		anchorX: 0.0,
		anchorY: 1.0,
		x: 700,
		y: 1900 + 500 // Start below the screen
	});
	self.addChild(tutorialTextBox);
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x000000 //Init game with black background 
});

/**** 
* Game Code
****/ 
// Change the height to 200 to make the button square
var ANIMATION_DURATION = 100; // Duration for intro and outro animations
var REST_DURATION = 5000; // Duration for how long the assets stay in the resting position
var tutorialFaceStartPosition = 4000; // Starting position for tutorialFace
var tutorialFaceRestPosition = 2732; // Resting position for tutorialFace
var tutorialTextBoxStartPosition = 3000; // Starting position for tutorialTextBox
var tutorialTextBoxRestPosition = 1900; // Resting position for tutorialTextBox
var score = 0;
var level = 1;
var maxLevels = 9;
var hero = {
	x: 0,
	y: 0
}; // Define the hero object
var scoreTxt = new Text2('0', {
	size: 150,
	fill: 0xFFFFFF
});
scoreTxt.anchor.set(0.5, 0);
LK.gui.top.addChild(scoreTxt);
// Function to handle move events
function handleMove(x, y, obj) {
	hero.x = x;
	hero.y = y;
}
// Initialize the levels
var levels = [];
var level_0 = new Level_0();
levels.push(level_0);
game.addChild(level_0);
for (var i = 0; i < maxLevels; i++) {
	var level;
	if (i + 1 === 9) {
		level = new GameOverState();
	} else {
		level = new Level(i + 1);
	}
	levels.push(level);
	game.addChild(level);
}
// Hide all levels except the first one
for (var i = 1; i < levels.length; i++) {
	levels[i].visible = false;
}
// Create the debug menu buttons
var levelButtons = [];
for (var i = 0; i < maxLevels; i++) {
	var buttonGap = 600; // Define a global variable for the gap between buttons
	var button = new Button(i + 1);
	button.x = 1024 + (i % 3 - 1) * buttonGap; // Use the global variable for the gap between buttons horizontally
	button.y = 1366 - 200 + (Math.floor(i / 3) - 1) * buttonGap; // Use the global variable for the gap between buttons vertically
	game.addChild(button);
	levelButtons.push(button);
}
for (var i = 1; i < levels.length; i++) {
	// Start from 1 to skip level 0
	var backButton = new BackButton();
	backButton.x = 2048 / 2;
	backButton.y = 2732 - 200;
	levels[i].addChild(backButton);
}
// Set up event listeners
game.move = handleMove;
game.down = handleMove;
game.up = function (x, y, obj) {
	// No action needed on up event
};

===================================================================
--- original.js
+++ change.js
@@ -288,11 +288,11 @@
 ****/ 
 // Change the height to 200 to make the button square
 var ANIMATION_DURATION = 100; // Duration for intro and outro animations
 var REST_DURATION = 5000; // Duration for how long the assets stay in the resting position
-var tutorialFaceStartPosition = 2832 + 500; // Starting position for tutorialFace
+var tutorialFaceStartPosition = 4000; // Starting position for tutorialFace
 var tutorialFaceRestPosition = 2732; // Resting position for tutorialFace
-var tutorialTextBoxStartPosition = 1900 + 500; // Starting position for tutorialTextBox
+var tutorialTextBoxStartPosition = 3000; // Starting position for tutorialTextBox
 var tutorialTextBoxRestPosition = 1900; // Resting position for tutorialTextBox
 var score = 0;
 var level = 1;
 var maxLevels = 9;