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.
User prompt
Set the effect of each button for now to be doubling the score per second, except the first one, which will add 1 to the score per second
User prompt
Fix Bug: 'Uncaught TypeError: Cannot read properties of undefined (reading 'toString')' in this line: 'effectDescription += effectValue.toString();' Line Number: 17
User prompt
The buttons currently say that the effect is "xundefined"
User prompt
Let's create an upgrade button constructor that lets us specify the effect (either score per click or score per second), whether it is additive or multiplicative, and the value, in addition to the cost. We can then use that to have an array of values so we can easily adjust the upgrade button values later.
User prompt
The costs should be rounded to the nearest integer when below 10000
User prompt
When under 10000, round to the nearest integer.
User prompt
Don't show scientific notation for <10,000
User prompt
Round costs to be at most 2 significant figures.
User prompt
We should round off to the nearest integer for all costs and balances.
User prompt
Can we center the entire set of upgrade buttons? Also, they need to be separated a little more horizontally.
User prompt
That looks great for the upgrade buttons, but didn't work for the tab buttons.
User prompt
Anchor points don't seem to be working - perhaps we should center manually? Or is there a reason it might not be working?
User prompt
The text is not centering in the upgrade buttons. Can we try to fix that?
var Upgrade = Container.expand(function (cost, effectType, effectMode, effectValue) { var self = Container.call(this); self.upgradeGraphics = self.createAsset('upgrade', 'Upgrade Graphics', .5, .5); var costText = new Text2('Cost: ' + (cost < 10000 ? Math.round(cost) : cost.toPrecision(2)), { size: 30, 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: 30, 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, x: 0, y: 0 }, { cost: 100, effectType: 'perSecond', effectMode: 'multiply', effectValue: 2, x: 0, y: 150 }, { cost: 1000, effectType: 'perSecond', effectMode: 'multiply', effectValue: 2, x: 0, y: 300 }, { cost: 10000, effectType: 'perSecond', effectMode: 'multiply', effectValue: 2, x: 0, y: 450 }]; upgradesConfig.forEach(function (config, index) { var upgrade = upgradesTab.addChild(new Upgrade(config.cost, config.effectType, config.effectMode, config.effectValue)); var screenWidth = LK.stageContainer.width; var screenHeight = LK.stageContainer.height; var columns = 3; var upgradeWidth = upgrade.upgradeGraphics.width; var upgradeHeight = upgradeGraphics.height; var upgradePadding = 20; var upgradeSpacing = (screenWidth * 0.8 - upgradeWidth * columns) / (columns - 1); var column = index % columns; var row = Math.floor(index / columns); var startX = (LK.stageContainer.width - (upgradeWidth * columns + upgradeSpacing * (columns - 1))) / 2; var startY = (screenHeight - (upgradeHeight * 5 + upgradePadding * 4)) / 2 + 400; 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
@@ -1,7 +1,7 @@
var Upgrade = Container.expand(function (cost, effectType, effectMode, effectValue) {
var self = Container.call(this);
- var upgradeGraphics = self.createAsset('upgrade', 'Upgrade Graphics', .5, .5);
+ self.upgradeGraphics = self.createAsset('upgrade', 'Upgrade Graphics', .5, .5);
var costText = new Text2('Cost: ' + (cost < 10000 ? Math.round(cost) : cost.toPrecision(2)), {
size: 30,
fill: '#ffffff',
anchor: {
@@ -188,9 +188,9 @@
var upgrade = upgradesTab.addChild(new Upgrade(config.cost, config.effectType, config.effectMode, config.effectValue));
var screenWidth = LK.stageContainer.width;
var screenHeight = LK.stageContainer.height;
var columns = 3;
- var upgradeWidth = upgradeGraphics.width;
+ var upgradeWidth = upgrade.upgradeGraphics.width;
var upgradeHeight = upgradeGraphics.height;
var upgradePadding = 20;
var upgradeSpacing = (screenWidth * 0.8 - upgradeWidth * columns) / (columns - 1);
var column = index % columns;