User prompt
Let's get all text to be centered in their respective button assets.
User prompt
The costs are currently displaying as "undefined"
User prompt
Each upgrade should display its cost and effect. Once purchased, the upgrade should disappear and the rest move upward to replace it.
User prompt
Remove the positioning of the upgradestabbutton at lines 127 and 128, then set the x value to 10
User prompt
Oh, the upgrades tab is being positioned twice. Remove the first positioning and set the x value to 10
User prompt
Move upgrades tab 100px to the right
User prompt
Move upgrades button 50px right
User prompt
Move upgrades button 5 px right
User prompt
Set the Cloud button to have an x value of negative its width, and Upgrades button to have an x value of 0
User prompt
Move both tabs 1000 px left
User prompt
Hmm...now the Cloud tab is in the middle. Is the left side of the screen 0 or is it maybe negative?
User prompt
Ok, the cloud and snowflakes look great. I cannot see the Upgrades tab button anywhere though. Also, can we put the cloud tab button on the left side.
User prompt
There's a 0 displaying where the score is. Can we remove that?
User prompt
Fix Bug: 'Uncaught TypeError: Cannot read properties of undefined (reading 'y')' in this line: 'cloudTabButton.y = scoreTxt.y + scoreTxt.height + 50;' Line Number: 118
User prompt
I think there's a problem with the tab system. Right now, the only things appearing on the screen are the score and the Cloud tab button. I cannot see the cloud itself, nor the upgrades tab button.
User prompt
The cloud is still not visible.
User prompt
The cloud should be visible from the start.
User prompt
The snowflake should be visible from the start.
User prompt
Fix Bug: 'Uncaught TypeError: Cannot read properties of undefined (reading 'y')' in this line: 'cloudTabButton.y = scoreTxt.y + scoreTxt.height + 50;' Line Number: 116
User prompt
That didn't work...try again?
User prompt
Ok, the tab click event is working. However, clicking on the Cloud tab does not reveal the cloud.
User prompt
Is the tab click event being called?
User prompt
Something seems to be wrong with the tab system. Perhaps we need to switch tabs after adding all of the elements, including the cloud?
User prompt
It looks like the upgrade tab is not being created. It should also be created at the start.
User prompt
Is the clouds tab changing the visibility of the upgrades tab? Tab buttons should not change each other's visibility.
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); upgradesTab.children.forEach(function (upgrade, index) { if (upgrade.purchased) { upgradesTab.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); 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; }); }; }); 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.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); LK.stageContainer.setBackgroundColor(0x000000); var tabSystem = new TabSystem(); var upgradesTab = new Container(); var upgrade1 = upgradesTab.addChild(new Upgrade(10, function () { cloud.spawnRate *= 2; })); upgrade1.x = 2048 / 2; upgrade1.y = 2732 / 4; var upgrade2 = upgradesTab.addChild(new Upgrade(20, function () { cloud.spawnRate *= 2; })); upgrade2.x = 2048 / 2; upgrade2.y = 2732 / 2; var upgrade3 = upgradesTab.addChild(new Upgrade(40, function () { cloud.spawnRate *= 2; })); upgrade3.x = 2048 / 2; upgrade3.y = 2732 / 4 * 3; var scoreTxt = new Text2('', { size: 150, fill: '#ffffff', anchor: { x: 0.5, y: 0 } }); LK.gui.topCenter.addChild(scoreTxt); scoreTxt.y = 100; 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() + 1); scoreTxt.setText(LK.getScore().toString()); }); var tickCount = 0; 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
@@ -47,9 +47,10 @@
fill: '#ffffff',
anchor: {
x: 0.5,
y: 0.5
- }
+ },
+ align: 'center'
});
self.addChild(buttonText);
self.on('down', function () {
onClick();