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) { // Ground level at 55% of screen height (45% from bottom) self.y = 2732 * 0.55; self.isJumping = false; self.velocityY = 0; } } }; self.jump = function () { if (!self.isJumping) { self.isJumping = true; self.velocityY = -self.jumpHeight; } }; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x87CEEB // Sky blue background }); /**** * Game Code ****/ // Create three scrolling backgrounds var backgrounds = []; // 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); } // Initialize player var player = game.addChild(new Player()); player.x = 2048 / 2; player.y = 2732 * 0.55; // Position player at 45% from bottom of screen // 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(); } player.update(); // Spawn enemies enemySpawnCounter++; if (enemySpawnCounter >= enemySpawnInterval) { var enemy = new Enemy(); enemy.x = 2048; enemy.y = 2732 * 0.55; // Spawn enemies at 45% from bottom of screen 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
@@ -91,8 +91,12 @@
// 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);
}
// Initialize player
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
Neon pink techno heart. In-Game asset. 2d. High contrast. No shadows
Side view, angry cyberpunk robot, looking left. full body, cute but aggro In-Game asset. 2d. High contrast. No shadows
Side view, cute female cyberpunk robot, looking right, full body, chibi, riding in a hover sphere with energy glow at bottom, hands on controls In-Game asset. 2d. High contrast. No shadows
cyberpunk explosion with the word "ouch" in the middle. sparks. In-Game asset. 2d. High contrast. No shadows
Glowing energy sphere. Spherical. Yellow and blue. In-Game asset. 2d. High contrast. No shadows
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