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

Please fix the bug: 'tween is not defined' in or related to this line: 'tween.to(self, {' Line Number: 31 ↪💡 Consider importing and using the following plugins: @upit/tween.v1

User prompt

Add stars to top of screen

User prompt

Make stars flicker

User prompt

Make stars sparkle

User prompt

I can't see the stars

User prompt

Move stars to top of scene

User prompt

Make sure stars are in front of backdrop

User prompt

Increase star size

User prompt

Reduce story size so it is visible in scene

User prompt

Make the stars sparkle in the sky

User prompt

Make images high definition

User prompt

Make image hd

User prompt

Change text font to new time Roman

User prompt

Make text bold

User prompt

Make text black

User prompt

Move narrative text down 50

User prompt

Add narrative text to first scene using story asset as a backdrop

User prompt

Make graphics high definition

User prompt

Move story to bottom of scene

User prompt

Add story to first scene

User prompt

Add first scene to game

User prompt

Delete all code

Code edit (1 edits merged)

Please save this source code

User prompt

A Journey through Time

Initial prompt

Create a detailed concept and storyline for a musical adventure game titled "A Journey through Time." The game should combine engaging narrative elements with musical gameplay mechanics that enhance the player's experience as they explore different historical eras. Include the setting, main characters, key plot points, and how music integrates into gameplay, such as puzzles, battles, or exploration. Consider a progression system tied to musical achievements and how time travel influences both story and gameplay elements. # Steps 1. Define the historical time periods featured in the game and the reason the player travels through them. 2. Develop the protagonist and any key supporting characters, outlining their motivations and backgrounds. 3. Outline the main plot or quest that drives the adventure. 4. Describe how music is used in gameplay: for example, solving puzzles by playing melodies, rhythm-based challenges, or unlocking new areas by mastering musical themes. 5. Explain the progression and reward system tied to musical performance or discovery. 6. Illustrate how time travel alters game environments and impacts the story. # Output Format Present the concept in a structured format with sections for: - Title - Setting and Historical Periods - Characters - Plot Summary - Gameplay Mechanics (musical integration) - Progression and Rewards - Unique Features Related to Time Travel and Music Use clear, concise, and engaging language suitable for a game design pitch. # Examples Title: "A Journey through Time" Setting and Historical Periods: Ancient Egypt, Medieval Europe, and Futuristic Space Colonies. Characters: Protagonist is a young musician named Lyra who discovers a magical instrument enabling time travel. Supporting characters include historical figures and a mysterious antagonist seeking to alter history. Plot Summary: Lyra must collect lost musical relics across eras to restore the timeline and prevent chaos. Gameplay Mechanics: Players solve rhythm puzzles to unlock doors, participate in musical battles to defeat enemies, and compose tunes to influence characters and environments. Progression and Rewards: Unlock new instruments, abilities, and musical styles tied to each era as players advance. Unique Features: The soundtrack dynamically changes based on the era and player choices, affecting story outcomes.

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

/**** 
* Classes
****/ 
// Star class for sparkling stars at the top of the screen
var Star = Container.expand(function () {
	var self = Container.call(this);
	// Create a small white ellipse to represent the star
	var starAsset = self.attachAsset('starShape', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 18 + Math.floor(Math.random() * 10),
		// randomize size a bit
		height: 18 + Math.floor(Math.random() * 10),
		color: 0xffffff,
		shape: 'ellipse'
	});
	// Randomize initial alpha for twinkling effect
	self.alpha = 0.7 + Math.random() * 0.3;
	// Animate the star's alpha to create a sparkling effect
	function sparkle() {
		var targetAlpha = 0.5 + Math.random() * 0.5;
		var duration = 600 + Math.random() * 800;
		tween.to(self, {
			alpha: targetAlpha
		}, duration).onComplete(sparkle);
	}
	sparkle();
	return self;
});

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

/**** 
* Game Code
****/ 
//Minimalistic tween library which should be used for animations over time, including tinting / colouring an object, scaling, rotating, or changing any game object property.
// Add the first scene background image, centered and covering the game area in high definition
// Add the first scene background image, centered and covering the game area
var firstSceneBg = LK.getAsset('First', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 2048 / 2,
	y: 2732 / 2,
	// Use the full game area, but let the engine render the high-res image natively
	width: 2048,
	height: 2732
});
game.addChild(firstSceneBg);
;
// Add stars to the top of the screen
var numStars = 24;
for (var i = 0; i < numStars; i++) {
	var star = new Star();
	// Distribute stars randomly along the top 300px of the screen
	star.x = 60 + Math.random() * (2048 - 120); // leave margin at edges
	star.y = 40 + Math.random() * 220;
	game.addChild(star);
}
// Add the story image overlay at the bottom of the first scene in high definition
var storyOverlay = LK.getAsset('Story', {
	anchorX: 0.5,
	anchorY: 1,
	x: 2048 / 2,
	y: 2732,
	// Use the full width, but let the engine render the high-res image natively
	width: 2048,
	height: 800
});
game.addChild(storyOverlay);
;
// The assets are now initialized at higher resolution for high definition display.;
// Add narrative text over the story overlay at the bottom of the first scene
var narrativeText = new Text2("In the beginning, the world was silent.\nBut tonight, everything changes...", {
	size: 90,
	fill: 0x000000,
	align: "center",
	wordWrap: true,
	wordWrapWidth: 1800,
	fontWeight: "bold",
	font: "Times New Roman"
});
// Center the text horizontally, anchor at the middle-top of the text
narrativeText.anchor.set(0.5, 0);
// Position the text above the bottom edge, inside the story overlay
narrativeText.x = 2048 / 2;
narrativeText.y = 2732 - 800 + 80 + 50; // 80px padding from the top of the overlay, plus 50px down
game.addChild(narrativeText);

===================================================================
--- original.js
+++ change.js
@@ -1,5 +1,10 @@
 /**** 
+* Plugins
+****/ 
+var tween = LK.import("@upit/tween.v1");
+
+/**** 
 * Classes
 ****/ 
 // Star class for sparkling stars at the top of the screen
 var Star = Container.expand(function () {
@@ -37,8 +42,9 @@
 
 /**** 
 * Game Code
 ****/ 
+//Minimalistic tween library which should be used for animations over time, including tinting / colouring an object, scaling, rotating, or changing any game object property.
 // Add the first scene background image, centered and covering the game area in high definition
 // Add the first scene background image, centered and covering the game area
 var firstSceneBg = LK.getAsset('First', {
 	anchorX: 0.5,

Showing 551 to 575 of 575

1 ...17 18 19 20 21 22 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