Upit | Learn about creating the game A Journey through Time: A Zebra Puzzle Game with gen AI

Play

A Journey through Time: A Zebra Puzzle Game

Each time you play this game it has a different set of clues, and a different solution. The goal of this puzzle, is to find a solution where each element within a category is uniquely paired with an element from another category, satisfying all the given clues. Zebra Puzzles are often used as a benchmark for evaluating algorithms designed to solve constraint satisfaction problems.

#MusicalAdventure

#TimeTravel

#PuzzleGame

#HistoricalJourney

#RhythmGame

#ZebraPuzzle

#Puzzle

#EinsteinPuzzle

Creation History

User prompt

Show text in front of story asset

User prompt

Make text black

User prompt

Move intro text to be shown in story asset

User prompt

Show text in front of storybox

User prompt

Please fix the bug: 'Cannot read properties of undefined (reading 'width')' in or related to this line: 'introText.x = storyAsset.width / 2;' Line Number: 55

User prompt

Move text into story asset

User prompt

Add story asset to bottom of screen

User prompt

Add story to bottom of screen

User prompt

Add first scene

User prompt

Add first asset to game

User prompt

Remove dream and dream bubble

User prompt

Add zebra game after harp sound is played

User prompt

Click on ninth scene to transition to tenth scene

User prompt

Click on eighth scene to transition to ninth scene

User prompt

Click on seventh scene to transition to eighth scene

User prompt

After harp sound plays transition to seventh scene

User prompt

Add 5x4 scene in between scenes 3 and 4

User prompt

Add 5x4 scene to puzzle class

User prompt

Add puzzle scene after scene 3

User prompt

Add puzzle class

User prompt

Make the dream bubble and dream image invisible and then fade in in 3 seconds ↪💡 Consider importing and using the following plugins: @upit/tween.v1

User prompt

Make dream bubble fade in ↪💡 Consider importing and using the following plugins: @upit/tween.v1

User prompt

Change first scene text to say " The moon cast a glow over the sweet little town of Melodia..."

User prompt

Please fix the bug: 'Script error.' in or related to this line: 'tween(thirdSceneBg, {' Line Number: 309 ↪💡 Consider importing and using the following plugins: @upit/tween.v1

User prompt

Move all text down 100

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

/**** 
* Game Code
****/ 
// Add the first scene background image, scaled to fit the game area
var firstSceneBg = LK.getAsset('First', {
	anchorX: 0,
	anchorY: 0,
	x: 0,
	y: 0,
	width: 2048,
	height: 2732
});
game.addChild(firstSceneBg);
// Add introductory text for the first scene
var introText = new Text2("A Journey through Time\n\nLyra's adventure begins in her quiet village, where a mysterious melody echoes through the night...", {
	size: 90,
	fill: 0xFFFFFF,
	align: "center",
	wordWrap: true,
	wordWrapWidth: 1800
});
// Center the text horizontally, place it near the top but not in the top-left 100x100 area
introText.anchor.set(0.5, 0);
introText.x = 2048 / 2;
introText.y = 180;
game.addChild(introText);
;
// Add the story asset to the bottom of the screen, scaled to fit the width of the game
var storyAsset = LK.getAsset('Story', {
	anchorX: 0.5,
	anchorY: 1,
	x: 2048 / 2,
	y: 2732,
	width: 2048,
	height: 800 // Show a band at the bottom, adjust as needed for visibility
});
game.addChild(storyAsset);

===================================================================
--- original.js
+++ change.js
@@ -31,17 +31,14 @@
 introText.x = 2048 / 2;
 introText.y = 180;
 game.addChild(introText);
 ;
-// Add story text to the bottom of the screen
-var storyText = new Text2("As dawn breaks, Lyra feels the pull of destiny. The first notes of her journey await...", {
-	size: 80,
-	fill: 0xFFFFFF,
-	align: "center",
-	wordWrap: true,
-	wordWrapWidth: 1800
+// Add the story asset to the bottom of the screen, scaled to fit the width of the game
+var storyAsset = LK.getAsset('Story', {
+	anchorX: 0.5,
+	anchorY: 1,
+	x: 2048 / 2,
+	y: 2732,
+	width: 2048,
+	height: 800 // Show a band at the bottom, adjust as needed for visibility
 });
-// Center the story text horizontally, anchor at the center of the bottom edge
-storyText.anchor.set(0.5, 1);
-storyText.x = 2048 / 2;
-storyText.y = 2732 - 60;
-game.addChild(storyText);
\ No newline at end of file
+game.addChild(storyAsset);
\ No newline at end of file

Showing 401 to 425 of 575

1 ...15 16 17 18 19 ...23

Images

Make this scene more modern like in the present

A 4x5 grid in professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Saxophone in professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Harp in professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Drum in professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Flute in professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Question mark professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

12yo blonde girl in professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Cute little10yo girl brown hair in professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Cute little 7yo girl with blonde curly hair. Professor Layton game style
In-Game asset. 2d. High contrast. No shadows

15 yo boy with short scruffy blonde hair professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

18yo girl with short brown hair professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Cat in professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

White dog with brown patch on eyes professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Turtle in professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Frog in professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Goldfish in professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Basketball ball professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Lego bricks professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Video game console professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Teddy bear professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

These dolls in professor Layton game art style

Hot chips or fries in professor Layton game style artwork.
In-Game asset. 2d. High contrast. No shadows

Bowl of spaghetti in professor Layton game style artwork.
In-Game asset. 2d. High contrast. No shadows

Pizza in professor Layton game style artwork.
In-Game asset. 2d. High contrast. No shadows

Chocolate donut in professor Layton game style artwork.
In-Game asset. 2d. High contrast. No shadows

Ice cream cone in professor Layton game style artwork.
In-Game asset. 2d. High contrast. No shadows

The word "correct" in professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

The word " incorrect" in professor Layton game style.
In-Game asset. 2d. High contrast. No shadows

Green tick in professor Layton gamestyle.
In-Game asset. 2d. High contrast. No shadows

Button with RETRY PUZZLE on it in professor Layton game style artwork
In-Game asset. 2d. High contrast. No shadows

Information symbol in professor Layton game style artwork.
In-Game asset. 2d. High contrast. No shadows

Number 1 button professor Layton game style artwork.
In-Game asset. 2d. High contrast. No shadows

How to play button in professor Layton game style font.
In-Game asset. 2d. High contrast. No shadows

Make robe hang lower so you can't see it's feet

Sounds & Music

🎵

Harp

Sound effect

Used plugins

@upit/tween@upit/storage