User prompt
add dollar sing for all puraches price
User prompt
can you make upgrade buttons bigger, same for the text inside of them and rearaagne them
User prompt
can you add an icon to the upgrades for each ball to know which oe it is
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 we increase the size of the buttons for the upgrades
User prompt
more
User prompt
size of buttons is not increasing.
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
all progress of game should be stored in local storage ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
Progress is not being savesd in local sgtoras. Allshoudl be stored, level, upgrades, balls, evertyhig ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
save points, level, balls purchased, and upgrades purchased in local storage so you continue next level from where you last playerd ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
local storage is not working
User prompt
Please fix the bug: 'storage.load is not a function' in or related to this line: 'storage.load();' Line Number: 132 ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
do not reste points, level, upgrades costs on game start
User prompt
Please fix the bug: 'Cannot read properties of undefined (reading 'splashBallCost')' in or related to this line: 'var splashCostText = new Text2('$' + upgrades.splashBallCost.toString(), {' Line Number: 229
User prompt
make background marine blue
User prompt
add local storage to the game ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
remove hardcoding of points
User prompt
reset points, player should start with 0 points unless they have points in storage ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
create a home screen with the game title and a start game button
User prompt
can we make bricks bigger and adjust the grid accordingly. double their size
User prompt
now some pricks are out of the screen. adjust columns and rows to adapt to thenew size of each brick
User prompt
make numbers in brick bigge
/****
* 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: 80,
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: 80,
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 Current Value Display
function createUpgradeButton(labelPrefix, x, costKey, upgradeKey, baseCost) {
var button = LK.getAsset('BuyBall50', {
size: 80,
fill: 0xFFFFFF,
anchorX: 0.5,
anchorY: 0,
x: x,
y: 0
});
var costText = new Text2((baseCost * upgrades[upgradeKey]).toString(), {
size: 50,
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: 20,
fill: 0xFFFFFF
});
labelText.anchor.set(0.5, -0.5);
button.addChild(labelText);
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 base costs
createUpgradeButton('Speed', GAME_WIDTH / 2 - 480, 'normalSpeedCost', 'normalSpeed', 50);
createUpgradeButton('Power', GAME_WIDTH / 2 - 360, 'normalPowerCost', 'normalPower', 75);
createUpgradeButton('Speed', GAME_WIDTH / 2 - 240, 'splashSpeedCost', 'splashSpeed', 50);
createUpgradeButton('Power', GAME_WIDTH / 2 - 120, 'splashPowerCost', 'splashPower', 75);
createUpgradeButton('Click', GAME_WIDTH / 2, 'clickCost', 'clickDamage', 25);
// 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) {
for (var i = balls.length - 1; i >= 0; i--) {
balls[i].destroy();
balls.splice(i, 1);
}
if (level === Object.keys(levelConfig).length) {
LK.showGameOver();
} else {
level += 1;
levelTxt.setText('Level: ' + level);
createBricks();
createBall();
}
}
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();