User prompt
Now add another set of backgrounds for the bottom part of the screen, these will be street
User prompt
Move them down another 300 pixels
User prompt
Now move the player and enemies down about 100 pixels
User prompt
Ok, do it
User prompt
The player and enemies should be at about 45% of the height from the bottom.
User prompt
Make the background only occupy the top half of the screen
User prompt
Speed up the background scroll just a bit.
User prompt
Okay, let's start this remix by creating three different backgrounds for variety and have them scroll in the background. ↪💡 Consider importing and using the following plugins: @upit/tween.v1
Remix started
Copy Mario vs Monsters
/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ // Define a class for scrolling backgrounds var Background = Container.expand(function () { var self = Container.call(this); self.speed = 3; self.asset = null; self.init = function (assetName, startX) { self.asset = self.attachAsset(assetName, { anchorX: 0, anchorY: 0, scaleY: 0.5 // Make the background half height }); self.x = startX; self.y = 0; }; self.update = function () { self.x -= self.speed; // If background has moved completely off screen to the left, reposition it to the right if (self.x <= -2048) { self.x = 2048 * 2 - self.speed; } }; return self; }); // Define a class for enemies var Enemy = Container.expand(function () { var self = Container.call(this); var enemyGraphics = self.attachAsset('enemy', { anchorX: 0.5, anchorY: 0.5 }); self.speed = 5; self.update = function () { self.x -= self.speed; if (self.x < -50) { self.destroy(); } }; }); //<Assets used in the game will automatically appear here> // Define a class for the player character var Player = Container.expand(function () { var self = Container.call(this); var playerGraphics = self.attachAsset('player', { anchorX: 0.5, anchorY: 0.5 }); self.speed = 5; self.jumpHeight = 40; self.isJumping = false; self.velocityY = 0; self.update = function () { if (self.isJumping) { self.y += self.velocityY; self.velocityY += 0.7; // Decreased gravity effect by 30% if (self.y >= 2732 * 0.55 + 400) { // Ground level at 55% of screen height (45% from bottom) + 400px down self.y = 2732 * 0.55 + 400; self.isJumping = false; self.velocityY = 0; } } }; self.jump = function () { if (!self.isJumping) { self.isJumping = true; self.velocityY = -self.jumpHeight; } }; }); // Define a class for street backgrounds (bottom part) var StreetBackground = Container.expand(function () { var self = Container.call(this); self.speed = 3; self.asset = null; self.init = function (assetName, startX) { self.asset = self.attachAsset(assetName, { anchorX: 0, anchorY: 0, scaleY: 0.5 // Make the background half height }); self.x = startX; self.y = 2732 * 0.5; // Position in the bottom half of the screen }; self.update = function () { self.x -= self.speed; // If background has moved completely off screen to the left, reposition it to the right if (self.x <= -2048) { self.x = 2048 * 2 - self.speed; } }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x87CEEB // Sky blue background }); /**** * Game Code ****/ // Create three scrolling backgrounds for the top part var backgrounds = []; // Create three scrolling backgrounds for the bottom part (street) var streetBackgrounds = []; // Create each background and position them for (var i = 0; i < 3; i++) { var bg = new Background(); bg.init('background' + (i + 1), i * 2048); // Make the first background (top one) 20% bigger if (i === 0) { bg.asset.scale.y = 0.6; // 0.5 + 20% = 0.6 } backgrounds.push(bg); game.addChild(bg); // Create street backgrounds using the same assets var streetBg = new StreetBackground(); streetBg.init('background' + (i + 1), i * 2048); streetBackgrounds.push(streetBg); game.addChild(streetBg); } // Initialize player var player = game.addChild(new Player()); player.x = 2048 / 2; player.y = 2732 * 0.55 + 400; // Position player at 45% from bottom of screen + 400px down // Initialize enemies var enemies = []; var enemySpawnInterval = 100; var enemySpawnCounter = 0; // Create a new Text2 object to display the score var scoreText = new Text2('0', { size: 100, fill: 0xFFFFFF }); // Add the score text to the game GUI at the top center of the screen LK.gui.top.addChild(scoreText); scoreText.x = 2048 / 2; scoreText.y = 0; // Handle game updates game.update = function () { // Update scrolling backgrounds for (var i = 0; i < backgrounds.length; i++) { backgrounds[i].update(); } // Update street backgrounds for (var i = 0; i < streetBackgrounds.length; i++) { streetBackgrounds[i].update(); } player.update(); // Spawn enemies enemySpawnCounter++; if (enemySpawnCounter >= enemySpawnInterval) { var enemy = new Enemy(); enemy.x = 2048; enemy.y = 2732 * 0.55 + 400; // Spawn enemies at 45% from bottom of screen + 400px down enemies.push(enemy); game.addChild(enemy); // Randomize the spawn interval for the next enemy enemySpawnInterval = Math.floor(Math.random() * 150) + 50; enemySpawnCounter = 0; } // Update enemies for (var j = enemies.length - 1; j >= 0; j--) { enemies[j].update(); if (player.intersects(enemies[j])) { LK.effects.flashScreen(0xff0000, 1000); LK.showGameOver(); } else if (player.x > enemies[j].x && !enemies[j].passed) { enemies[j].passed = true; LK.setScore(LK.getScore() + 1); scoreText.setText(LK.getScore()); } } }; // Handle player jump game.down = function (x, y, obj) { player.jump(); }; // Import tween library for animations
===================================================================
--- original.js
+++ change.js
@@ -74,8 +74,31 @@
self.velocityY = -self.jumpHeight;
}
};
});
+// Define a class for street backgrounds (bottom part)
+var StreetBackground = Container.expand(function () {
+ var self = Container.call(this);
+ self.speed = 3;
+ self.asset = null;
+ self.init = function (assetName, startX) {
+ self.asset = self.attachAsset(assetName, {
+ anchorX: 0,
+ anchorY: 0,
+ scaleY: 0.5 // Make the background half height
+ });
+ self.x = startX;
+ self.y = 2732 * 0.5; // Position in the bottom half of the screen
+ };
+ self.update = function () {
+ self.x -= self.speed;
+ // If background has moved completely off screen to the left, reposition it to the right
+ if (self.x <= -2048) {
+ self.x = 2048 * 2 - self.speed;
+ }
+ };
+ return self;
+});
/****
* Initialize Game
****/
@@ -85,10 +108,12 @@
/****
* Game Code
****/
-// Create three scrolling backgrounds
+// Create three scrolling backgrounds for the top part
var backgrounds = [];
+// Create three scrolling backgrounds for the bottom part (street)
+var streetBackgrounds = [];
// Create each background and position them
for (var i = 0; i < 3; i++) {
var bg = new Background();
bg.init('background' + (i + 1), i * 2048);
@@ -97,8 +122,13 @@
bg.asset.scale.y = 0.6; // 0.5 + 20% = 0.6
}
backgrounds.push(bg);
game.addChild(bg);
+ // Create street backgrounds using the same assets
+ var streetBg = new StreetBackground();
+ streetBg.init('background' + (i + 1), i * 2048);
+ streetBackgrounds.push(streetBg);
+ game.addChild(streetBg);
}
// Initialize player
var player = game.addChild(new Player());
player.x = 2048 / 2;
@@ -121,8 +151,12 @@
// Update scrolling backgrounds
for (var i = 0; i < backgrounds.length; i++) {
backgrounds[i].update();
}
+ // Update street backgrounds
+ for (var i = 0; i < streetBackgrounds.length; i++) {
+ streetBackgrounds[i].update();
+ }
player.update();
// Spawn enemies
enemySpawnCounter++;
if (enemySpawnCounter >= enemySpawnInterval) {
cyberpunk pixel art asphalt street. In-Game asset. 2d. High contrast. No shadows, street debris
cyberpunk pixel art asphalt street. In-Game asset. 2d. High contrast. No shadows, street debris
digital explosion, burnt orange neon blue, pixels, sparks. In-Game asset. 2d. High contrast. No shadows
digital explosion. squares. pixels. chaos. neon. sparks. In-Game asset. 2d. High contrast. No shadows
Make it pixel art style
Make it pixel art style
Make this pixel art style
Make this pixel art style and give it a bit of a tail on the top as if it is flying downwards.
Make this look like pixel art
Neon pink heart. Pixel art style. Slight neon blue outer glow. In-Game asset. 2d. High contrast. No shadows
Pixel font in yellow that says "Tap to Jump". In-Game asset. 2d. High contrast. No shadows
Pixel font in yellow that says "Tap Again to Attack". In-Game asset. 2d. High contrast. No shadows