User prompt
add a main menu screen with the game title and a game start button. game should not start until game start is touched. main menu should cover the whole screen and the game should not be displayed.
Code edit (1 edits merged)
Please save this source code
User prompt
add local storage module ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
add a button to delete local storage ↪💡 Consider importing and using the following plugins: @upit/storage.v1
User prompt
local storage button delete sholuld be next to the points ↪💡 Consider importing and using the following plugins: @upit/storage.v1
Code edit (1 edits merged)
Please save this source code
User prompt
Import of asset
User prompt
lets add somoe particle effect when a block is destroyed
User prompt
use a new asset for particle effect, not splash ball
Code edit (2 edits merged)
Please save this source code
User prompt
move points to 200 pixels to the right
User prompt
move level below points
User prompt
move level 100 pixels to the left
User prompt
sorry I meant to the right
User prompt
move points and level 200 pixles ot the right
User prompt
move points 50 pixels to the right
User prompt
normal ball should start unlocked
Code edit (1 edits merged)
Please save this source code
User prompt
upgrade buttons and text should be the same size as ball purchase buttons, and have the same space between each ther
User prompt
rename buyball50 to button
User prompt
increase the size parameter of the buttons for the upgrades to be the same as the buy balls ones
User prompt
create a new button for powerup buttons
User prompt
Powerup are using an asset for their background button. create a new asset to be used by all of them. should be powerupbutton
User prompt
powerups should use powerup asset
User prompt
upgrade buttons should have a little moroe space between them
/****
* 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: 50,
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();
}
};
});
var MainMenu = Container.expand(function () {
var self = Container.call(this);
// Create and attach a title text
var titleText = new Text2('Idle Breakout', {
size: 100,
fill: 0xFFFFFF
});
titleText.anchor.set(0.5, 0.5);
titleText.x = GAME_WIDTH / 2;
titleText.y = GAME_HEIGHT / 2 - 200;
self.addChild(titleText);
// Create and attach a start button
var startButton = LK.getAsset('BuyBall50', {
anchorX: 0.5,
anchorY: 0.5,
x: GAME_WIDTH / 2,
y: GAME_HEIGHT / 2
});
var buttonText = new Text2('Start Game', {
size: 50,
fill: 0xFFFFFF
});
buttonText.anchor.set(0.5, 0.5);
startButton.addChild(buttonText);
// Add event listener to start button
startButton.down = function () {
self.destroy();
startGame();
};
self.addChild(startButton);
});
/****
* Initialize Game
****/
var game = new LK.Game({
backgroundColor: 0x3b9c9c
});
/****
* Game Code
****/
// Function to start the game
function startGame() {
createBricks();
createBall();
}
// Create and display the main menu
var mainMenu = new MainMenu();
game.addChild(mainMenu);
// Constants
var GAME_WIDTH = 2048;
var GAME_HEIGHT = 2632;
var BALL_RADIUS = 50;
var BRICK_WIDTH = 300;
var BRICK_HEIGHT = 100;
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: 400
},
2: {
totalBricks: 100,
hitpoints: 2,
gridSize: 360
},
3: {
totalBricks: 150,
hitpoints: 3,
gridSize: 320
},
4: {
totalBricks: 200,
hitpoints: 4,
gridSize: 280
},
5: {
totalBricks: 250,
hitpoints: 5,
gridSize: 240
}
};
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 Icons
function createUpgradeButton(labelPrefix, x, costKey, upgradeKey, baseCost, iconType) {
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);
// Add icon if specified
if (iconType) {
button.addChild(button.attachAsset(iconType, {
anchorX: 0.5,
anchorY: -0.5,
scaleX: 0.5,
scaleY: 0.5
}));
}
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 = Math.floor(GAME_WIDTH / (BRICK_WIDTH + spacingX));
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();