User prompt
Let's move all of the upgrade buttons to be closer together. Also, the width of each button should be 400, and the height 200.
User prompt
Let's make a grid of upgrades that is 3 wide and 5 tall. We can number them 1 to 15 for now, and the cost should increase by 2.5x each time, starting at 10.
User prompt
Change the tint of the tabs to be darker if it isn't the active tab.
User prompt
Ok, this is great. Go ahead and comment out the console log, we may use it again later.
User prompt
Once per second, output the value of important local variables.
User prompt
Add a new variable called scorePerSec. It should start at 0. The score should increase by this value every second. The third upgrade should set the value to 1.
User prompt
The spawn rate should start at 0.
User prompt
The score should increase by the spawnrate each second.
User prompt
Upgrades 1 and 2 should double the click value.
User prompt
Change upgrade 3 to set to the spawn rate to 1.
User prompt
Each upgrade should affect the current click rate - doubling it. Right now it seems each one is setting it to be equal to 2.
User prompt
Clicking on the cloud should add to the current score. Right now the score is just staying at 0.
User prompt
The earn per click variable should start equal to 1.
User prompt
No no, basic clicks should start by adding 1, but the amount added can change. So that should be a variable that the upgrades can affect.
User prompt
The upgrade is not actually doubling the earnings per click.
User prompt
Fix Bug: 'Uncaught TypeError: Cannot read properties of undefined (reading 'addChild')' in this line: 'var upgrade3 = self.upgradesTab.addChild(new Upgrade(40, function () {' Line Number: 133
User prompt
Fix Bug: 'Uncaught TypeError: Cannot read properties of undefined (reading 'addChild')' in this line: 'var upgrade2 = self.upgradesTab.addChild(new Upgrade(20, function () {' Line Number: 128
User prompt
Fix Bug: 'Uncaught TypeError: Cannot read properties of undefined (reading 'addChild')' in this line: 'var upgrade1 = self.upgradesTab.addChild(new Upgrade(10, function () {' Line Number: 123
User prompt
Fix Bug: 'Uncaught ReferenceError: upgradesTab is not defined' in this line: 'tabSystem.addTab('Upgrades', upgradesTab);' Line Number: 166
User prompt
Fix Bug: 'Uncaught ReferenceError: upgradesTab is not defined' in this line: 'var upgrade3 = upgradesTab.addChild(new Upgrade(40, function () {' Line Number: 133
User prompt
Fix Bug: 'Uncaught ReferenceError: upgradesTab is not defined' in this line: 'var upgrade2 = upgradesTab.addChild(new Upgrade(20, function () {' Line Number: 128
User prompt
Fix Bug: 'Uncaught ReferenceError: upgradesTab is not defined' in this line: 'var upgrade1 = upgradesTab.addChild(new Upgrade(10, function () {' Line Number: 123
User prompt
Fix Bug: 'ReferenceError: upgradesTab is not defined' in this line: 'upgradesTab.children.forEach(function (upgrade, index) {' Line Number: 32
User prompt
Can we center the text in the tab buttons?
User prompt
That didn't work - can we try a different way of centering the text.
var Upgrade = Container.expand(function (cost, effect) { var self = Container.call(this); var upgradeGraphics = self.createAsset('upgrade', 'Upgrade Graphics', .5, .5); var costText = new Text2('Cost: ' + cost, { size: 30, fill: '#ffffff', anchor: { x: 0.5, y: 1 } }); self.addChild(costText); var effectText = new Text2('Effect: Double Spawn Rate', { size: 30, fill: '#ffffff', anchor: { x: 0.5, y: 1 } }); effectText.y = 35; self.addChild(effectText); self.cost = cost; self.effect = effect; self.purchased = false; self.on('down', function () { if (!self.purchased && LK.getScore() >= self.cost) { LK.setScore(LK.getScore() - self.cost); self.effect(); 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(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 upgradeCost = 10; var upgradeWidth = 400; var upgradeHeight = 200; var upgradePadding = 20; var startX = (2048 - (upgradeWidth * 3 + upgradePadding * 2)) / 2; var startY = (2732 - (upgradeHeight * 5 + upgradePadding * 4)) / 2; for (var row = 0; row < 5; row++) { for (var col = 0; col < 3; col++) { var upgradeNumber = row * 3 + col + 1; var upgrade = upgradesTab.addChild(new Upgrade(upgradeCost, function () {})); upgrade.x = startX + col * (upgradeWidth + upgradePadding); upgrade.y = startY + row * (upgradeHeight + upgradePadding); upgradeCost *= 2.5; } } var scoreTxt = new Text2('', { size: 150, fill: '#ffffff', anchor: { x: 0.5, y: 0.5 } }); 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(LK.getScore() + cloud.clickValue); scoreTxt.setText(LK.getScore().toString()); }); var tickCount = 0; LK.setInterval(function () { LK.setScore(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
@@ -135,16 +135,19 @@
LK.stageContainer.setBackgroundColor(0x000000);
var tabSystem = new TabSystem();
var upgradesTab = new Container();
var upgradeCost = 10;
- var upgradeWidth = 2048 / 3;
- var upgradeHeight = 2732 / 5;
+ var upgradeWidth = 400;
+ var upgradeHeight = 200;
+ var upgradePadding = 20;
+ var startX = (2048 - (upgradeWidth * 3 + upgradePadding * 2)) / 2;
+ var startY = (2732 - (upgradeHeight * 5 + upgradePadding * 4)) / 2;
for (var row = 0; row < 5; row++) {
for (var col = 0; col < 3; col++) {
var upgradeNumber = row * 3 + col + 1;
var upgrade = upgradesTab.addChild(new Upgrade(upgradeCost, function () {}));
- upgrade.x = upgradeWidth / 2 + col * upgradeWidth;
- upgrade.y = upgradeHeight / 2 + row * upgradeHeight;
+ upgrade.x = startX + col * (upgradeWidth + upgradePadding);
+ upgrade.y = startY + row * (upgradeHeight + upgradePadding);
upgradeCost *= 2.5;
}
}
var scoreTxt = new Text2('', {