User prompt
all progress of game should be stored in local storage ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
Increase the size of the upgrades button, the size of the asset of the button itself, and of course the spacign between them to fit correcly.
User prompt
size of buttons is not increasing.
User prompt
more
User prompt
Can we increase the size of the buttons for the upgrades
Code edit (1 edits merged)
Please save this source code
User prompt
on new level balls and upgrades shoudl not be reseted
Code edit (1 edits merged)
Please save this source code
User prompt
can you add an icon to the upgrades for each ball to know which oe it is
User prompt
can you make upgrade buttons bigger, same for the text inside of them and rearaagne them
User prompt
add dollar sing for all puraches price
User prompt
add a dollar sign in front of points
User prompt
keep level on its position but move points 200 pixels to the right on the hud
User prompt
add 200 pixels between level and points
User prompt
more
User prompt
a little more
User prompt
mmove points a little ot the rihg int he hud
User prompt
it is offscreen now, bring it closer
User prompt
Nice, now move the points to the right of the hud
User prompt
Cane we move the buttons to buy balls more to the left in the hud
User prompt
move the huud to the top of the screen, but in the same position in the withd
User prompt
recude it a littlemore
User prompt
reduce size of level and points
User prompt
lets put level next to points and not below it
User prompt
actually put it in the center please
/**** * Classes ****/ var Ball = Container.expand(function () { var self = Container.call(this); var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'normal'; var asset = type === 'splash' ? 'splashBall' : 'ball'; var ballGraphics = self.attachAsset(asset, { anchorX: 0.5, anchorY: 0.5 }); self.type = type; self.speed = type === 'splash' ? upgrades.splashSpeed : upgrades.normalSpeed; self.power = type === 'splash' ? upgrades.splashPower : upgrades.normalPower; self.direction = { x: 1, y: -1 }; self.update = function () { var gridSize = levelConfig[level] ? levelConfig[level].gridSize : 200; var stepSize = self.speed; var dx = self.direction.x * stepSize; var dy = self.direction.y * stepSize; self.x += dx; self.y += dy; if (self.x <= BALL_RADIUS || self.x >= GAME_WIDTH - BALL_RADIUS) { self.direction.x *= -1; self.x = Math.max(BALL_RADIUS, Math.min(GAME_WIDTH - BALL_RADIUS, self.x)); } if (self.y <= BALL_RADIUS || self.y >= GAME_HEIGHT - BALL_RADIUS) { self.direction.y *= -1; self.y = Math.max(BALL_RADIUS, Math.min(GAME_HEIGHT - BALL_RADIUS, self.y)); } if (!isNearBricks(self.x, self.y)) { return; } var gridXMin = Math.floor((self.x - BALL_RADIUS) / gridSize); var gridXMax = Math.floor((self.x + BALL_RADIUS) / gridSize); var gridYMin = Math.floor((self.y - BALL_RADIUS) / gridSize); var gridYMax = Math.floor((self.y + BALL_RADIUS) / gridSize); var hasCollided = false; for (var gx = gridXMin; gx <= gridXMax && !hasCollided; gx++) { for (var gy = gridYMin; gy <= gridYMax && !hasCollided; gy++) { var gridKey = "".concat(gx, ",").concat(gy); var cellBricks = brickGrid[gridKey]; if (!cellBricks || cellBricks.length === 0) { continue; } for (var j = cellBricks.length - 1; j >= 0; j--) { var brick = cellBricks[j]; if (!brick || brick.health <= 0 || !self.intersects(brick)) { continue; } handleBallBrickCollision(self, brick); brick.hit(self.power); if (self.type === 'splash' && brick.health > 0) { applySplashDamage(brick, gridSize); } if (brick.health <= 0) { cellBricks.splice(j, 1); } hasCollided = true; break; } } } }; }); var Brick = Container.expand(function () { var self = Container.call(this); var brickGraphics = self.attachAsset('brick', { anchorX: 0.5, anchorY: 0.5 }); self.health = 1; self.maxHealth = 1; self.healthText = new Text2(self.health.toString(), { size: 30, fill: 0xFFFFFF }); self.healthText.anchor.set(0.5, 0.5); self.addChild(self.healthText); self.updateTint = function () { var healthPercent = self.health / self.maxHealth; var colorIndex = Math.min(Math.floor((1 - healthPercent) * LEVEL_COLORS.length), LEVEL_COLORS.length - 1); brickGraphics.tint = LEVEL_COLORS[colorIndex]; }; self.updateTint(); self.hit = function () { var damage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1; self.health -= damage; if (self.health <= 0) { score += Math.max(1, Math.floor(self.maxHealth * 0.5)); scoreTxt.setText('$' + score.toString()); var brickIndex = bricks.indexOf(self); if (brickIndex !== -1) { bricks.splice(brickIndex, 1); } self.destroy(); } else { self.healthText.setText(self.health.toString()); self.updateTint(); } }; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ // Constants var GAME_WIDTH = 2048; var GAME_HEIGHT = 2632; var BALL_RADIUS = 50; var BRICK_WIDTH = 150; var BRICK_HEIGHT = 50; var BALL_COST = 50; var LEVEL_COLORS = [0xff00ff, 0x00ffcc, 0xccff00, 0xff6600, 0x66ffff, 0xff3366, 0xffcc00, 0x9966ff, 0x33cc33, 0xff0000]; // Game Variables var levelConfig = { 1: { totalBricks: 50, hitpoints: 1, gridSize: 200 }, 2: { totalBricks: 100, hitpoints: 2, gridSize: 180 }, 3: { totalBricks: 150, hitpoints: 3, gridSize: 160 }, 4: { totalBricks: 200, hitpoints: 4, gridSize: 140 }, 5: { totalBricks: 250, hitpoints: 5, gridSize: 120 } }; var upgrades = { normalSpeed: 1, normalPower: 1, splashSpeed: 1, splashPower: 1, clickDamage: 1, normalSpeedCost: 50, normalPowerCost: 75, splashSpeedCost: 50, splashPowerCost: 75, clickCost: 25, splashBallCost: 100 }; var balls = []; var bricks = []; var brickGrid = {}; var score = 10000; var level = 1; var brickGridBounds = null; // HUD Setup var hud = new Container(); LK.gui.top.addChild(hud); // Upper-Left: Score, Level, Ball Purchases var scoreTxt = new Text2('0', { size: 60, fill: 0xFFFFFF }); scoreTxt.anchor.set(0.3, 0); scoreTxt.x += 200; hud.addChild(scoreTxt); var levelTxt = new Text2('Level: ' + level, { size: 60, fill: 0xFFFFFF }); levelTxt.anchor.set(1, 0); levelTxt.x = scoreTxt.width + 20; hud.addChild(levelTxt); var buyNormalButton = LK.getAsset('BuyBall50', { size: 120, fill: 0xFFFFFF, anchorX: 0.5, anchorY: 0, y: 0, x: -400 }); var normalCostText = new Text2('$' + BALL_COST.toString(), { size: 50, fill: 0xFFFFFF }); normalCostText.anchor.set(0.5, 0); normalCostText.y = 100; buyNormalButton.addChild(normalCostText); buyNormalButton.addChild(buyNormalButton.attachAsset('ball', { anchorX: 0.5, anchorY: -0.5, scaleX: 0.5, scaleY: 0.5 })); buyNormalButton.down = function () { if (score >= BALL_COST) { score -= BALL_COST; scoreTxt.setText('$' + score.toString()); createBall('normal'); } }; hud.addChild(buyNormalButton); var buySplashButton = LK.getAsset('BuyBall50', { size: 120, fill: 0xFFFFFF, anchorX: 0.5, anchorY: 0, y: 0, x: -280 }); var splashCostText = new Text2('$' + upgrades.splashBallCost.toString(), { size: 50, fill: 0xFFFFFF }); splashCostText.anchor.set(0.5, 0); splashCostText.y = 100; buySplashButton.addChild(splashCostText); buySplashButton.addChild(buySplashButton.attachAsset('splashBall', { anchorX: 0.5, anchorY: -0.5, scaleX: 0.5, scaleY: 0.5 })); buySplashButton.down = function () { if (score >= upgrades.splashBallCost) { score -= upgrades.splashBallCost; scoreTxt.setText('$' + score.toString()); createBall('splash'); } }; hud.addChild(buySplashButton); // Bottom: Upgrade Buttons var bottomHud = new Container(); bottomHud.y = GAME_HEIGHT - 150; game.addChild(bottomHud); // Upgrade Button Factory with Icons function createUpgradeButton(labelPrefix, x, costKey, upgradeKey, baseCost, iconType) { var button = LK.getAsset('BuyBall50', { size: 140, fill: 0xFFFFFF, anchorX: 0.5, anchorY: 0, x: x, y: 0 }); var costText = new Text2((baseCost * upgrades[upgradeKey]).toString(), { size: 60, fill: 0xFFFFFF }); costText.anchor.set(0.5, 0); costText.y = 100; button.addChild(costText); var labelText = new Text2("".concat(labelPrefix, " x").concat(upgrades[upgradeKey]), { size: 30, fill: 0xFFFFFF }); labelText.anchor.set(0.5, -0.5); button.addChild(labelText); // Add icon if specified if (iconType) { button.addChild(button.attachAsset(iconType, { anchorX: 0.5, anchorY: -0.5, scaleX: 0.7, scaleY: 0.7 })); } button.down = function () { var cost = baseCost * upgrades[upgradeKey]; if (score >= cost) { score -= cost; upgrades[upgradeKey]++; costText.setText('$' + (baseCost * upgrades[upgradeKey]).toString()); labelText.setText("".concat(labelPrefix, " x").concat(upgrades[upgradeKey])); scoreTxt.setText('$' + score.toString()); balls.forEach(function (b) { if (b.type === 'normal' && upgradeKey.includes('normal')) { b[upgradeKey.includes('Speed') ? 'speed' : 'power'] = upgrades[upgradeKey]; } else if (b.type === 'splash' && upgradeKey.includes('splash')) { b[upgradeKey.includes('Speed') ? 'speed' : 'power'] = upgrades[upgradeKey]; } }); } }; bottomHud.addChild(button); } // Upgrade buttons with icons for ball-specific upgrades createUpgradeButton('Speed', GAME_WIDTH / 2 - 480, 'normalSpeedCost', 'normalSpeed', 50, 'ball'); createUpgradeButton('Power', GAME_WIDTH / 2 - 360, 'normalPowerCost', 'normalPower', 75, 'ball'); createUpgradeButton('Speed', GAME_WIDTH / 2 - 240, 'splashSpeedCost', 'splashSpeed', 50, 'splashBall'); createUpgradeButton('Power', GAME_WIDTH / 2 - 120, 'splashPowerCost', 'splashPower', 75, 'splashBall'); createUpgradeButton('Click', GAME_WIDTH / 2, 'clickCost', 'clickDamage', 25, null); // No icon for Click // Helper Functions function handleBallBrickCollision(ball, brick) { var relativeX = (ball.x - brick.x) / (brick.width / 2); var relativeY = (ball.y - brick.y) / (brick.height / 2); if (Math.abs(relativeX) > Math.abs(relativeY)) { ball.direction.x = -ball.direction.x + relativeX * 0.5; ball.x = brick.x + (relativeX > 0 ? brick.width / 2 + BALL_RADIUS : -brick.width / 2 - BALL_RADIUS); } else { ball.direction.y = -ball.direction.y; ball.y = brick.y + (relativeY > 0 ? brick.height / 2 + BALL_RADIUS : -brick.height / 2 - BALL_RADIUS); } ball.direction.x += (Math.random() - 0.5) * 0.1; var magnitude = Math.sqrt(ball.direction.x * ball.direction.x + ball.direction.y * ball.direction.y); ball.direction.x /= magnitude; ball.direction.y /= magnitude; } function applySplashDamage(brick, gridSize) { var gridX = Math.floor(brick.x / gridSize); var gridY = Math.floor(brick.y / gridSize); var adjacentKeys = ["".concat(gridX - 1, ",").concat(gridY), "".concat(gridX + 1, ",").concat(gridY), "".concat(gridX, ",").concat(gridY - 1), "".concat(gridX, ",").concat(gridY + 1)]; adjacentKeys.forEach(function (key) { if (brickGrid[key]) { brickGrid[key].forEach(function (adjBrick) { if (adjBrick && adjBrick.health > 0) { adjBrick.hit(Math.floor(upgrades.splashPower * 0.25)); } }); } }); } function isNearBricks(x, y) { if (!brickGridBounds) { return true; } var buffer = BALL_RADIUS * 2; return x >= brickGridBounds.minX - buffer && x <= brickGridBounds.maxX + buffer && y >= brickGridBounds.minY - buffer && y <= brickGridBounds.maxY + buffer; } function createBricks() { var config = levelConfig[level] || {}; var totalBricks = config.totalBricks || 50; var hitpoints = config.hitpoints || 1; var gridSize = config.gridSize || 200; var spacingX = 2; var spacingY = 2; var cols = 10; var rows = Math.ceil(totalBricks / cols); var totalWidth = cols * BRICK_WIDTH + (cols - 1) * spacingX; var totalHeight = rows * BRICK_HEIGHT + (rows - 1) * spacingY; var startX = (GAME_WIDTH - totalWidth) / 2 + BRICK_WIDTH / 2; var startY = (GAME_HEIGHT - totalHeight) / 3 + BRICK_HEIGHT / 2; brickGrid = {}; bricks = []; for (var i = 0; i < rows; i++) { for (var j = 0; j < cols && i * cols + j < totalBricks; j++) { var brick = new Brick(); brick.x = startX + j * (BRICK_WIDTH + spacingX); brick.y = startY + i * (BRICK_HEIGHT + spacingY); brick.health = hitpoints; brick.maxHealth = hitpoints; brick.healthText.setText(brick.health.toString()); brick.updateTint(); bricks.push(brick); game.addChild(brick); var gridX = Math.floor(brick.x / gridSize); var gridY = Math.floor(brick.y / gridSize); var gridKey = "".concat(gridX, ",").concat(gridY); if (!brickGrid[gridKey]) { brickGrid[gridKey] = []; } brickGrid[gridKey].push(brick); } } brickGridBounds = { minX: startX - BRICK_WIDTH / 2, maxX: startX + totalWidth - BRICK_WIDTH / 2, minY: startY - BRICK_HEIGHT / 2, maxY: startY + totalHeight - BRICK_HEIGHT / 2 }; } function createBall() { var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'normal'; var ball = new Ball(type); var gridBottom = brickGridBounds ? brickGridBounds.maxY + 150 : GAME_HEIGHT * 0.7; ball.x = GAME_WIDTH / 2 + (Math.random() * 200 - 100); ball.y = Math.min(gridBottom + 100, GAME_HEIGHT - BALL_RADIUS * 2); var angle = (Math.random() * 0.5 + 0.25) * Math.PI; ball.direction.x = Math.cos(angle); ball.direction.y = -Math.sin(angle); var magnitude = Math.sqrt(ball.direction.x * ball.direction.x + ball.direction.y * ball.direction.y); ball.direction.x /= magnitude; ball.direction.y /= magnitude; for (var i = 0; i < bricks.length; i++) { if (ball.intersects(bricks[i])) { ball.y = brickGridBounds.maxY + BALL_RADIUS + 10; break; } } balls.push(ball); game.addChild(ball); } game.update = function () { for (var i = balls.length - 1; i >= 0; i--) { var ball = balls[i]; ball.update(); if (ball.y > GAME_HEIGHT + BALL_RADIUS) { ball.destroy(); balls.splice(i, 1); } } if (bricks.length === 0) { if (level === Object.keys(levelConfig).length) { LK.showGameOver(); } else { level += 1; levelTxt.setText('Level: ' + level); createBricks(); } } if (balls.length === 0 && score >= BALL_COST) { score -= BALL_COST; scoreTxt.setText('$' + score.toString()); createBall(); } }; game.down = function (x, y, obj) { if (!bricks || !Array.isArray(bricks)) { return; } x = Number(x); y = Number(y); for (var i = 0; i < bricks.length; i++) { var brick = bricks[i]; if (!brick.x || !brick.y || !brick.width || !brick.height) { continue; } if (x >= brick.x - brick.width / 2 && x <= brick.x + brick.width / 2 && y >= brick.y - brick.height / 2 && y <= brick.y + brick.height / 2) { brick.hit(upgrades.clickDamage); return; } } }; // Initialize game elements createBricks(); createBall();
===================================================================
--- original.js
+++ change.js
@@ -187,9 +187,9 @@
levelTxt.anchor.set(1, 0);
levelTxt.x = scoreTxt.width + 20;
hud.addChild(levelTxt);
var buyNormalButton = LK.getAsset('BuyBall50', {
- size: 80,
+ size: 120,
fill: 0xFFFFFF,
anchorX: 0.5,
anchorY: 0,
y: 0,
@@ -216,9 +216,9 @@
}
};
hud.addChild(buyNormalButton);
var buySplashButton = LK.getAsset('BuyBall50', {
- size: 80,
+ size: 120,
fill: 0xFFFFFF,
anchorX: 0.5,
anchorY: 0,
y: 0,
@@ -251,9 +251,9 @@
game.addChild(bottomHud);
// Upgrade Button Factory with Icons
function createUpgradeButton(labelPrefix, x, costKey, upgradeKey, baseCost, iconType) {
var button = LK.getAsset('BuyBall50', {
- size: 100,
+ size: 140,
fill: 0xFFFFFF,
anchorX: 0.5,
anchorY: 0,
x: x,