User prompt
The balls should fall with a gravity acceleration emulating real fall behaviours
User prompt
Balls should bounce off the left and right margins
User prompt
The balls should start with some trajectory down-left or down-right, randomly calculated
User prompt
Remove the tween functionality of the bubbles. Let them fall straight.
User prompt
Ok I want another behaviour for the bubbles. Instead of having tweens, etc. I want them to behave as bubbles in the retro-arcade game "Pang". They will fall being able to bounce from the left and right corners of the screen, and also from the ground.
Code edit (1 edits merged)
Please save this source code
Remix started
Copy Lantern Splash
/****
* Plugins
****/
var tween = LK.import("@upit/tween.v1");
/****
* Classes
****/
// Box class
var Box = Container.expand(function () {
var self = Container.call(this);
var boxGraphics = self.attachAsset('box', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 1.2,
// Increase the scale to enlarge the bounding box
scaleY: 1.2
});
self.speed = 5;
self.update = function () {
self.y += self.speed;
if (self.y > 2732) {
self.destroy();
}
};
});
// Box1 class
var Box1 = Container.expand(function () {
var self = Container.call(this);
var boxGraphics = self.attachAsset('box1', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 1.2,
// Increase the scale to enlarge the bounding box
scaleY: 1.2
});
self.speed = 5;
self.update = function () {
self.y += self.speed;
if (self.y > 2732) {
self.destroy();
}
};
});
// Box2 class
var Box2 = Container.expand(function () {
var self = Container.call(this);
var boxGraphics = self.attachAsset('box2', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 1.2,
// Increase the scale to enlarge the bounding box
scaleY: 1.2
});
self.speed = 7;
self.update = function () {
self.y += self.speed;
if (self.y > 2732) {
self.destroy();
}
};
});
// Box3 class
var Box3 = Container.expand(function () {
var self = Container.call(this);
var boxGraphics = self.attachAsset('box3', {
anchorX: 0.5,
anchorY: 0.5,
scaleX: 1.2,
// Increase the scale to enlarge the bounding box
scaleY: 1.2
});
self.speed = 9;
self.update = function () {
self.y += self.speed;
if (self.y > 2732) {
self.destroy();
}
};
});
// The assets will be automatically created and loaded by the LK engine.
// Bubble class
var Bubble = Container.expand(function () {
var self = Container.call(this);
var bubbleGraphics = self.attachAsset('bubble', {
anchorX: 0.5,
anchorY: 0.5,
alpha: 1 // Start fully visible instead of transparent
});
self.speed = 10;
// Track last position for collision detection
self.lastY = 0;
self.lastIntersecting = false;
self.update = function () {
// Track last position before moving
self.lastY = self.y;
self.lastIntersecting = self.intersects(player);
self.speed += 0.5; // Add gravity acceleration
self.y += self.speed;
self.x += self.speedX; // Update horizontal position based on speedX
// Bounce off the left and right margins
if (self.x <= 0 && self.speedX < 0 || self.x >= 2048 && self.speedX > 0) {
self.speedX *= -1; // Reverse horizontal direction
}
// No tweening - just change tint directly when reaching threshold
if (self.y > 1532) {
bubbleGraphics.tint = 0xFF0000;
}
if (self.y > 2732 || !self.lastIntersecting && self.intersects(player)) {
self.destroy();
lives -= 1;
// Remove a heart icon when a life is lost
if (hearts.length > lives) {
var heartToRemove = hearts.pop();
if (heartToRemove) {
tween(heartToRemove.scale, {
x: 0,
y: 0
}, {
duration: 1000,
easing: tween.easeInOut,
onFinish: function onFinish() {
heartToRemove.destroy();
}
});
}
}
if (lives < 0) {
LK.showGameOver();
}
}
};
});
// Explosion class
var Explosion = Container.expand(function () {
var self = Container.call(this);
var explosionGraphics = self.attachAsset('explosion', {
anchorX: 0.5,
anchorY: 0.5
});
tween(explosionGraphics, {
scaleX: explosionGraphics.scaleX + 1,
scaleY: explosionGraphics.scaleY + 1
}, {
duration: 1000,
easing: tween.bounceOut,
onFinish: function onFinish() {
self.destroy();
}
});
self.update = function () {
// The explosion will disappear after a while
if (self.alpha > 0) {
self.alpha -= 0.02;
} else {
self.destroy();
}
};
});
// Harpoon class
var Harpoon = Container.expand(function () {
var self = Container.call(this);
var harpoonGraphics = self.attachAsset('harpoon', {
anchorX: 0.5,
anchorY: 0.5
});
self.speed = -20;
self.trail = game.addChild(new Trail());
self.update = function () {
self.y += self.speed;
self.trail.height = 2732 - self.y;
self.trail.y = self.y + self.trail.height / 2;
if (self.y < 0 || self.y < 2732 * (1 / 3)) {
self.destroy();
self.trail.destroy();
}
};
});
// Player class
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.update = function () {
if (self.direction && self.direction === 'left') {
self.x -= self.speed;
} else if (self.direction === 'right') {
self.x += self.speed;
}
};
self.shoot = function () {
var harpoon = new Harpoon();
harpoon.x = player.x;
harpoon.y = player.y - 200;
harpoon.trail.x = player.x;
harpoon.trail.y = player.y - 200;
game.addChild(harpoon);
LK.getSound('crossbow').play();
};
});
// PowerUpText class
var PowerUpText = Container.expand(function () {
var self = Container.call(this);
var textGraphics = self.attachAsset('PowerUpText', {
anchorX: 0.5,
anchorY: 0.5
});
self.update = function () {
self.y -= 2;
if (self.y < 0) {
self.destroy();
}
};
});
// Trail class
var Trail = Container.expand(function () {
var self = Container.call(this);
var trailGraphics = self.attachAsset('line', {
anchorX: 0.5,
anchorY: 0.5,
width: 18
});
self.update = function () {
self.y += 10;
if (self.y > 2732) {
self.destroy();
}
};
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0xFFFFFFFF // Init game with black background
});
/****
* Game Code
****/
var background = game.attachAsset('Landscape', {
anchorX: 0,
anchorY: 0,
x: 0,
y: 0
});
game.setChildIndex(background, 0);
var player = new Player();
player.x = 2048 / 2;
player.y = 2732 - 180;
game.addChild(player); // Add player after trail to ensure correct rendering order
game.move = function (x, y, obj) {
player.x = x;
if (x < 2048 / 2 && player.scaleX > 0 || x >= 2048 / 2 && player.scaleX < 0) {
player.scaleX *= -1; // Mirror the player image
}
};
var score = 0;
var lives = 3;
var scoreBackground = new Container();
var scoreBgGraphics = scoreBackground.attachAsset('scoreBg', {
anchorX: 0.5,
anchorY: 0.1,
scaleX: 5,
scaleY: 5,
alpha: 1
});
scoreBackground.addChild(scoreBgGraphics);
scoreBackground.x = 0;
scoreBackground.y = 0;
LK.gui.top.addChild(scoreBackground);
var scoreTxt = new Text2('Balloons popped: 0', {
size: 30,
fill: 0xFF3659,
font: "'Comic Sans MS', cursive, sans-serif"
});
scoreTxt.anchor.set(0.5, -0.1);
scoreBackground.addChild(scoreTxt);
var hearts = [];
for (var i = 0; i < lives; i++) {
var heart = LK.getAsset('heart', {
anchorX: 0.5,
anchorY: 0.5,
x: -1 * (i + 1) * 50,
// Position hearts with some spacing
y: 50
});
LK.gui.topRight.addChild(heart);
hearts.push(heart);
}
var lastShot = -999;
game.down = function (x, y, obj) {
if (LK.ticks - lastShot > 30) {
player.shoot();
lastShot = LK.ticks;
}
};
// Start the music 'chinese' upon starting the game
LK.playMusic('arcade');
game.update = function () {
if (LK.ticks % 50 == 0) {
var newBubble = new Bubble();
newBubble.x = Math.random() * 2048;
newBubble.y = 0;
newBubble.speedX = Math.random() < 0.5 ? -5 : 5; // Randomly set initial horizontal speed
// Initialize tracking properties for the bubble
newBubble.lastY = newBubble.y;
newBubble.lastIntersecting = false;
game.addChild(newBubble);
// No tweening for horizontal movement - bubbles now fall straight down
}
var bubbles = game.children.filter(function (child) {
return child instanceof Bubble;
});
var harpoons = game.children.filter(function (child) {
return child instanceof Harpoon;
});
for (var i = 0; i < bubbles.length; i++) {
var bubble = bubbles[i];
// Check for collision only if there wasn't one in the previous frame
if (!bubble.lastIntersecting && bubble.intersects(player)) {
bubble.destroy();
lives -= 1;
// Remove a heart icon when a life is lost
if (hearts.length > lives) {
var heartToRemove = hearts.pop();
if (heartToRemove) {
tween(heartToRemove.scale, {
x: 0,
y: 0
}, {
duration: 1000,
easing: tween.easeInOut,
onFinish: function onFinish() {
heartToRemove.destroy();
}
});
}
}
if (lives < 0) {
LK.showGameOver();
}
}
for (var j = 0; j < harpoons.length; j++) {
var harpoon = harpoons[j];
if (bubble.intersects(harpoon)) {
bubble.destroy();
LK.getSound('explosion').play();
harpoon.trail.destroy(); // Destroy the harpoon trail
harpoon.destroy();
bubbles.splice(i, 1); // Remove bubble from the array
score += 1;
scoreTxt.setText("Balloons popped: " + score.toString());
tween(scoreTxt.scale, {
x: 2,
y: 2
}, {
duration: 500,
easing: tween.easeInOut,
onFinish: function onFinish() {
tween(scoreTxt.scale, {
x: 1,
y: 1
}, {
duration: 500,
easing: tween.easeInOut
});
}
});
harpoons.splice(j, 1); // Remove harpoon from the array
// Create an explosion at the intersection point
var explosion = new Explosion();
explosion.x = bubble.x;
explosion.y = bubble.y;
game.addChild(explosion);
// Create a box at the intersection point with a 10% probability
if (!game.children.some(function (child) {
return child instanceof Box || child instanceof Box1 || child instanceof Box2 || child instanceof Box3;
})) {
if (Math.random() < 1) {
var boxType = Math.floor(Math.random() * 4);
var box;
switch (boxType) {
case 0:
box = new Box();
break;
case 1:
box = new Box1();
break;
case 2:
box = new Box2();
break;
case 3:
box = new Box3();
break;
}
box.x = bubble.x;
box.y = bubble.y;
game.addChild(box);
}
}
}
}
var boxes = game.children.filter(function (child) {
return child instanceof Box || child instanceof Box1 || child instanceof Box2 || child instanceof Box3;
});
for (var k = 0; k < boxes.length; k++) {
var box = boxes[k];
for (var l = 0; l < harpoons.length; l++) {
var harpoon = harpoons[l];
if (box.intersects(harpoon)) {
box.destroy();
LK.getSound('powerup').play();
harpoon.trail.destroy();
harpoon.destroy();
// Display toast text based on the type of box destroyed
var toastText = new Text2('', {
size: 250,
fill: 0xFFC0CB,
font: "'Comic Sans MS', cursive, sans-serif"
});
var toastTextBg = new Text2('', {
size: 255,
fill: 0xFF00AA,
font: "'Comic Sans MS', cursive, sans-serif"
});
toastText.anchor.set(0.5, 0.5);
toastText.x = 2048 / 2;
toastText.y = 2732 / 2;
toastTextBg.anchor.set(0.5, 0.5);
toastTextBg.x = 2048 / 2;
toastTextBg.y = 2732 / 2;
game.addChild(toastText);
game.addChild(toastTextBg);
if (box instanceof Box1) {
toastText.setText("Smash!");
toastTextBg.setText("Smash!");
} else if (box instanceof Box2) {
toastText.setText("Destruction!");
toastTextBg.setText("Destruction!");
} else if (box instanceof Box) {
toastText.setText("Less madness!");
toastTextBg.setText("Less madness!");
} else if (box instanceof Box3) {
toastText.setText("Life up!");
toastTextBg.setText("Life up!");
}
// Tween the toast text to fade out and destroy after 2 seconds
tween(toastText, {
alpha: 0
}, {
duration: 500,
onFinish: function onFinish() {
toastText.destroy();
}
});
tween(toastTextBg, {
alpha: 0
}, {
duration: 500,
onFinish: function onFinish() {
toastTextBg.destroy();
}
});
boxes.splice(k, 1);
harpoons.splice(l, 1);
// Check if the destroyed box is an instance of Box1
if (box instanceof Box1) {
// Create six additional harpoons and trails
for (var i = 1; i <= 3; i++) {
var leftHarpoon = new Harpoon();
leftHarpoon.x = player.x - i * 150;
leftHarpoon.y = player.y;
leftHarpoon.trail.x = player.x - i * 150;
leftHarpoon.trail.y = player.y;
game.addChild(leftHarpoon);
var rightHarpoon = new Harpoon();
rightHarpoon.x = player.x + i * 150;
rightHarpoon.y = player.y;
rightHarpoon.trail.x = player.x + i * 150;
rightHarpoon.trail.y = player.y;
game.addChild(rightHarpoon);
// Set a timeout to remove the additional harpoons after 5 seconds
LK.setTimeout(function (lh, rh) {
lh.destroy();
lh.trail.destroy();
rh.destroy();
rh.trail.destroy();
}.bind(null, leftHarpoon, rightHarpoon), 5000);
}
}
// Check if the destroyed box is an instance of Box and reduce bubble speed
if (box instanceof Box) {
var bubbles = game.children.filter(function (child) {
return child instanceof Bubble;
});
bubbles.forEach(function (bubble) {
bubble.speed /= 2;
});
LK.setTimeout(function () {
bubbles.forEach(function (bubble) {
bubble.speed *= 2;
});
}, 5000);
}
// Check if the destroyed box is an instance of Box3 and lives are less than 3
if (box instanceof Box3 && lives < 3) {
lives += 1;
var heart = LK.getAsset('heart', {
anchorX: 0.5,
anchorY: 0.5,
x: -1 * lives * 50,
y: 50
});
LK.gui.topRight.addChild(heart);
hearts.push(heart);
}
// Check if the destroyed box is an instance of Box2
if (box instanceof Box2) {
var bubbles = game.children.filter(function (child) {
return child instanceof Bubble;
});
var bubblesDestroyed = bubbles.length;
bubbles.forEach(function (bubble) {
bubble.destroy();
});
score += bubblesDestroyed;
scoreTxt.setText("Balloons popped: " + score.toString());
tween(scoreTxt.scale, {
x: 2,
y: 2
}, {
duration: 500,
easing: tween.easeInOut,
onFinish: function onFinish() {
tween(scoreTxt.scale, {
x: 1,
y: 1
}, {
duration: 500,
easing: tween.easeInOut
});
}
});
}
break;
}
}
}
}
}; ===================================================================
--- original.js
+++ change.js
@@ -94,8 +94,9 @@
self.update = function () {
// Track last position before moving
self.lastY = self.y;
self.lastIntersecting = self.intersects(player);
+ self.speed += 0.5; // Add gravity acceleration
self.y += self.speed;
self.x += self.speedX; // Update horizontal position based on speedX
// Bounce off the left and right margins
if (self.x <= 0 && self.speedX < 0 || self.x >= 2048 && self.speedX > 0) {
a green cross, icon, pixel style. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
a sand clock pixel style.. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
a bomb, pixel style. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
a pixel harpoon, vertical and looking up, retro like in pang games.. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
A banner to show a message, pixel art. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
two harpoons looking up, retro, pixel. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows.
A Mount fuji background with a big rainbow crossing from side to side in the sky, pixel style, colourful. Single Game Texture. In-Game asset. 2d. Blank background. High contrast. No shadows
A Boom! explosion, pixel retro style. In-Game asset. 2d. High contrast. No shadows