Upit | Learn about creating the game Bike Rider with gen AI

/**** * Classes ****/ // Create a Background class var Background = Container.expand(function () { var self = Container.call(this); // Attach background asset var backgroundGraphics = self.attachAsset('background', { anchorX: 0.5, anchorY: 0.5 }); // Set background speed self.speed = 5; // This is automatically called every game tick, if the background is attached! self.update = function () { // Move background to the left self.x -= self.speed; // If the background has moved off screen to the left, reset its position to the right if (self.x <= -2048) { self.x = 2048; } }; }); // Create a Bike class var Bike = Container.expand(function () { var self = Container.call(this); // Attach bike asset var bikeGraphics = self.attachAsset('bike', { anchorX: 0.5, anchorY: 0.5 }); // Set bike speed self.speed = 5; // This is automatically called every game tick, if the bike is attached! self.update = function () { // No movement }; }); /**** * Initialize Game ****/ // Initialize bike asset var game = new LK.Game({ backgroundColor: 0x000000 //Init game with black background }); /**** * Game Code ****/ // Initialize and add background to the game var background = game.addChild(new Background()); // Position background at the center of the screen background.x = 2048 / 2; // Middle of the screen horizontally background.y = 2732 / 2; // Middle of the screen vertically var bike = game.addChild(new Bike()); // Initialize and add a second background to the game for a seamless loop var background2 = game.addChild(new Background()); // Position the second background to the right of the first background background2.x = 2048 / 2 + 2048; // Right of the first background background2.y = 2732 / 2; // Middle of the screen vertically // Position bike at the center horizontally and at the lower end of the screen vertically bike.x = 2048 / 2; // Middle of the screen horizontally bike.y = 2732 * 0.8; // Lower end of the screen vertically // Move bike bike.update(); // Check if bike has reached the finish line if (bike.x >= 2048) { // Bike has reached the finish line, show game over LK.showGameOver(); }

===================================================================
--- original.js
+++ change.js
@@ -1,7 +1,27 @@
 /**** 
 * Classes
 ****/ 
+// Create a Background class
+var Background = Container.expand(function () {
+	var self = Container.call(this);
+	// Attach background asset
+	var backgroundGraphics = self.attachAsset('background', {
+		anchorX: 0.5,
+		anchorY: 0.5
+	});
+	// Set background speed
+	self.speed = 5;
+	// This is automatically called every game tick, if the background is attached!
+	self.update = function () {
+		// Move background to the left
+		self.x -= self.speed;
+		// If the background has moved off screen to the left, reset its position to the right
+		if (self.x <= -2048) {
+			self.x = 2048;
+		}
+	};
+});
 // Create a Bike class
 var Bike = Container.expand(function () {
 	var self = Container.call(this);
 	// Attach bike asset
@@ -12,10 +32,9 @@
 	// Set bike speed
 	self.speed = 5;
 	// This is automatically called every game tick, if the bike is attached!
 	self.update = function () {
-		// Move the bike upwards
-		self.y -= self.speed;
+		// No movement
 	};
 });
 
 /**** 
@@ -28,24 +47,24 @@
 
 /**** 
 * Game Code
 ****/ 
-// Initialize bike asset
-// Add bike to the game
-var background = game.addChild(LK.getAsset('background', {
-	anchorX: 0.5,
-	anchorY: 0.5
-}));
+// Initialize and add background to the game
+var background = game.addChild(new Background());
+// Position background at the center of the screen
 background.x = 2048 / 2; // Middle of the screen horizontally
 background.y = 2732 / 2; // Middle of the screen vertically
 var bike = game.addChild(new Bike());
+// Initialize and add a second background to the game for a seamless loop
+var background2 = game.addChild(new Background());
+// Position the second background to the right of the first background
+background2.x = 2048 / 2 + 2048; // Right of the first background
+background2.y = 2732 / 2; // Middle of the screen vertically
 // Position bike at the center horizontally and at the lower end of the screen vertically
 bike.x = 2048 / 2; // Middle of the screen horizontally
 bike.y = 2732 * 0.8; // Lower end of the screen vertically
 // Move bike
-LK.setInterval(function () {
-	bike.update();
-}, 1000 / 60); // 60 times per second
+bike.update();
 // Check if bike has reached the finish line
 if (bike.x >= 2048) {
 	// Bike has reached the finish line, show game over
 	LK.showGameOver();

Creation History

Images

Sounds & Music