Code edit (6 edits merged)
Please save this source code
User prompt
Set the StartX in the game class to be based on the window width instead of assuming 2048.
Code edit (1 edits merged)
Please save this source code
User prompt
We need to spread the upgrade buttons horizontally by a bit more
User prompt
Let's lower the block of upgrade buttons by 200 px. Also increase the font by a small amount.
User prompt
Remove the x and y elements in the upgradesConfig array.
User prompt
Let's remove the x and y components from the upgrade button initialization.
User prompt
Instead of setting the x and y positions for each upgrade button, we should set those values dynamically based on the order of the buttons in that array. It should still be three buttons across and then wrap to the next line for each new set of 3.
User prompt
We need to spread them out horizontally a bit more, and the whole block needs to shift to the right 200px and down 100px
User prompt
Let's spread out the upgrade buttons to have 100px between them horizontally and vertically
User prompt
Let's spread out the upgrade buttons by 200 px horizontally and 100px vertically
User prompt
The upgrade buttons are getting on top of each other. They need to spread out to take up the full 80% of the width of the window.
User prompt
Fix Bug: 'Uncaught ReferenceError: upgradeGraphics is not defined' in this line: 'var upgradeHeight = upgradeGraphics.height;' Line Number: 193
User prompt
Fix Bug: 'Uncaught ReferenceError: upgradeGraphics is not defined' in this line: 'var upgradeWidth = upgradeGraphics.width;' Line Number: 192
User prompt
Let's set the width and height of the upgrade buttons to be equal to the asset size.
User prompt
Let's get the block of upgrade buttons centered in the window width
User prompt
Let's lower the upgrade buttons by 200px
User prompt
Move the top of the block of upgrade buttons down by 200px
User prompt
I meant to move it down, not up
User prompt
Let's move the top of the block of upgrade buttons by 100 px
User prompt
Fix Bug: 'Uncaught ReferenceError: columns is not defined' in this line: 'var upgradeWidth = screenWidth * 0.8 / columns;' Line Number: 191
User prompt
Let's spread out the upgrade buttons horizontally to use up 80% of the screen width. Also, let's detect the dimensions instead of assuming the window size.
User prompt
Let's add 3 more upgrades. Each one should double the score per second.
User prompt
Let's create a manual array that allows us to store and adjust the configuration for upgrades easily.
User prompt
It should only add 1 of the upgrade that adds 1 to the score per second.
var Upgrade = Container.expand(function (cost, effectType, effectMode, effectValue) { var self = Container.call(this); var upgradeGraphics = self.createAsset('upgrade', 'Upgrade Graphics', .5, .5); var costText = new Text2('Cost: ' + (cost < 10000 ? Math.round(cost) : cost.toPrecision(2)), { size: 35, fill: '#ffffff', anchor: { x: 0.5, y: 0.5 } }); costText.y = -35; costText.x = -costText.width / 2; self.addChild(costText); var effectDescription = effectType === 'click' ? 'Per Click: ' : 'Per Second: '; effectDescription += effectMode === 'add' ? '+' : 'x'; effectDescription += effectValue !== undefined ? effectValue.toString() : '0'; var effectText = new Text2(effectDescription, { size: 35, fill: '#ffffff', anchor: { x: 0.5, y: 0.5 } }); effectText.y = 35; effectText.x = -effectText.width / 2; self.addChild(effectText); self.cost = cost; self.effectType = effectType; self.effectMode = effectMode; self.effectValue = effectValue; self.purchased = false; self.on('down', function () { if (!self.purchased && LK.getScore() >= self.cost) { LK.setScore(LK.getScore() - self.cost); if (self.effectType === 'click') { if (self.effectMode === 'add') { cloud.clickValue += self.effectValue; } else { cloud.clickValue *= self.effectValue; } } else { if (self.effectMode === 'add') { scorePerSec += self.effectValue; } else { scorePerSec *= self.effectValue; } } self.purchased = true; self.removeChild(self); self.parent.children.forEach(function (upgrade, index) { if (upgrade.purchased) { self.parent.removeChild(upgrade); } else { upgrade.y -= 150; } }); } }); }); var TabButton = Container.expand(function (label, onClick) { var self = Container.call(this); var buttonGraphics = self.createAsset('tabButton', 'Tab Button Graphics', 0, 0.5); buttonGraphics.tint = 0x777777; var buttonText = new Text2(label, { size: 50, fill: '#ffffff', anchor: { x: 0.5, y: 0.5 }, align: 'center' }); self.addChild(buttonText); self.on('down', function () { onClick(); }); }); var TabSystem = Container.expand(function () { var self = Container.call(this); self.tabs = {}; self.currentTab = ''; self.addTab = function (name, content) { self.tabs[name] = content; content.visible = false; self.addChild(content); }; self.switchTab = function (name) { if (self.tabs[self.currentTab]) { self.tabs[self.currentTab].visible = false; self.tabs[self.currentTab].children.forEach(function (child) { child.visible = false; }); } self.currentTab = name; self.tabs[name].visible = true; self.tabs[name].children.forEach(function (child) { child.visible = true; if (child instanceof TabButton) { child.children[0].tint = 0xFFFFFF; } }); Object.values(self.tabs).forEach(function (content) { if (content !== self.tabs[name]) { content.children.forEach(function (child) { if (child instanceof TabButton) { child.children[0].tint = 0x777777; } }); } }); }; }); var Snowflake = Container.expand(function () { var self = Container.call(this); var snowflakeGraphics = self.createAsset('snowflake', 'Snowflake Graphics', .5, .5); self.rotationSpeed = (Math.random() - 0.5) * 0.02; self.swayMagnitude = Math.random() * 10; self.swaySpeed = (Math.random() - 0.5) * 0.03; self.sizeFactor = Math.random() * 0.75 + 0.25; self.scale.set(self.sizeFactor); self.swayMagnitude = self.sizeFactor * 5; self.swayOffset = Math.random() * Math.PI * 2; self.update = function () { self.y += 1 + Math.random() * 2; self.rotation += self.rotationSpeed; self.x += Math.sin(LK.ticks * self.swaySpeed * 2 + self.swayOffset) * (self.swayMagnitude * 0.25); }; self.collect = function () { LK.setScore(Math.round(LK.getScore() + 1)); scoreTxt.setText(LK.getScore().toString()); self.destroy(); }; }); var Cloud = Container.expand(function () { var self = Container.call(this); self.visible = true; var cloudGraphics = self.createAsset('cloud', 'Cloud Graphics', .5, .5); cloudGraphics.alpha = 1; self.spawnRate = 1; self.clickValue = 1; self.spawnSnowflake = function () { var snowflake = new Snowflake(); var cloudWidth = cloudGraphics.width; snowflake.x = self.x - cloudWidth / 2 + Math.random() * cloudWidth; snowflake.y = self.y + cloudGraphics.height / 2; snowflake.rotation = Math.random() * Math.PI * 2; return snowflake; }; }); var Game = Container.expand(function () { var self = Container.call(this); var scorePerSec = 0; LK.stageContainer.setBackgroundColor(0x000000); var tabSystem = new TabSystem(); var upgradesTab = new Container(); var upgradesConfig = [{ cost: 10, effectType: 'perSecond', effectMode: 'add', effectValue: 1 }, { cost: 100, effectType: 'perSecond', effectMode: 'multiply', effectValue: 2 }, { cost: 1000, effectType: 'perSecond', effectMode: 'multiply', effectValue: 2 }, { cost: 10000, effectType: 'perSecond', effectMode: 'multiply', effectValue: 2 }]; var columns = 3; var upgradeWidth = 400; var upgradeHeight = 200; var upgradeSpacing = 200; var upgradePadding = 200; var startX = LK.stageContainer.width - (upgradeWidth * columns + upgradeSpacing * (columns - 1)); var startY = 800; upgradesConfig.forEach(function (config, index) { var upgrade = upgradesTab.addChild(new Upgrade(config.cost, config.effectType, config.effectMode, config.effectValue)); var column = index % columns; var row = Math.floor(index / columns); upgrade.x = startX + column * (upgradeWidth + upgradeSpacing); upgrade.y = startY + row * (upgradeHeight + upgradePadding); }); var scoreTxt = new Text2('', { size: 150, fill: '#ffffff', anchor: { x: 0.5, y: 0.5 } }); scoreTxt.x = -scoreTxt.width / 2; LK.gui.topCenter.addChild(scoreTxt); scoreTxt.y = LK.gui.topCenter.height / 2; var cloudTabButton = new TabButton('Cloud', function () { tabSystem.switchTab('Cloud'); }); var upgradesTabButton = new TabButton('Upgrades', function () { tabSystem.switchTab('Upgrades'); }); cloudTabButton.x = -cloudTabButton.width; cloudTabButton.y = scoreTxt.y + scoreTxt.height + 50; upgradesTabButton.x = 10; upgradesTabButton.y = cloudTabButton.y; LK.gui.topCenter.addChild(cloudTabButton); LK.gui.topCenter.addChild(upgradesTabButton); self.addChild(tabSystem); var snowflakes = []; var cloudTab = new Container(); var cloud = cloudTab.addChild(new Cloud()); cloud.x = 2048 / 2; cloud.y = 2732 / 2; tabSystem.addTab('Upgrades', upgradesTab); tabSystem.addTab('Cloud', cloudTab); tabSystem.switchTab('Cloud'); var scoreTxt = new Text2('0', { size: 150, fill: '#ffffff', anchor: { x: 0.5, y: 0 } }); LK.gui.topCenter.addChild(scoreTxt); scoreTxt.y = 100; cloud.on('down', function (obj) { for (var i = 0; i < cloud.spawnRate; i++) { var snowflake = cloud.spawnSnowflake(); snowflakes.push(snowflake); self.addChild(snowflake); } LK.setScore(Math.round(LK.getScore() + cloud.clickValue)); scoreTxt.setText(Math.round(LK.getScore()).toString()); }); var tickCount = 0; LK.setInterval(function () { LK.setScore(Math.round(LK.getScore() + scorePerSec)); scoreTxt.setText(LK.getScore().toString()); }, 1000); LK.on('tick', function () { for (var i = snowflakes.length - 1; i >= 0; i--) { snowflakes[i].update(); if (snowflakes[i].y > 2732 + snowflakes[i].height) { snowflakes[i].destroy(); snowflakes.splice(i, 1); } } scoreTxt.setText(LK.getScore().toString()); }); });
===================================================================
--- original.js
+++ change.js
@@ -180,9 +180,9 @@
var upgradeWidth = 400;
var upgradeHeight = 200;
var upgradeSpacing = 200;
var upgradePadding = 200;
- var startX = (LK.stageContainer.width - (upgradeWidth * columns + upgradeSpacing * (columns - 1))) / 2;
+ var startX = LK.stageContainer.width - (upgradeWidth * columns + upgradeSpacing * (columns - 1));
var startY = 800;
upgradesConfig.forEach(function (config, index) {
var upgrade = upgradesTab.addChild(new Upgrade(config.cost, config.effectType, config.effectMode, config.effectValue));
var column = index % columns;