User prompt
Fix Bug: 'Error: The supplied DisplayObject must be a child of the caller' in this line: 'self.visible = false;' Line Number: 15
User prompt
Fix Bug: 'Error: The supplied DisplayObject must be a child of the caller' in this line: 'self.visible = false;' Line Number: 16
User prompt
Fix Bug: 'Error: The supplied DisplayObject must be a child of the caller' in this line: 'self.visible = false;' Line Number: 17
User prompt
Fix Bug: 'ReferenceError: settingsBackground is not defined' in this line: 'self.visible = false;' Line Number: 17
User prompt
z-index the newly spawned individual objects so that they are behind the settings menu
User prompt
Fix Bug: 'TypeError: game.getChildByName is not a function' in this line: 'var object3 = game.getChildByName('object3');' Line Number: 74
User prompt
Fix Bug: 'TypeError: game.getChildByName is not a function' in this line: 'var object2 = game.getChildByName('object2');' Line Number: 55
User prompt
Fix Bug: 'TypeError: game.getChildByName is not a function' in this line: 'var object1 = game.getChildByName('object1');' Line Number: 36
User prompt
add object1 object2 and object3 only appear when setting1 setting2 and setting3 are activated
/**** * Classes ****/ var Object3 = Container.expand(function () { var self = Container.call(this); var objectGraphics = self.createAsset('object3', 'Object 3', 0.5, 0.5); }); var Object2 = Container.expand(function () { var self = Container.call(this); var objectGraphics = self.createAsset('object2', 'Object 2', 0.5, 0.5); }); var Object1 = Container.expand(function () { var self = Container.call(this); var objectGraphics = self.createAsset('object1', 'Object 1', 0.5, 0.5); self.visible = false; }); var SettingOption = Container.expand(function (optionId, optionText) { var self = Container.call(this); self.isSelected = false; var optionGraphics = self.createAsset(optionId, optionText, 0.5, 0.5); self.addChild(optionGraphics); optionGraphics.on('down', function () { self.isSelected = !self.isSelected; if (optionId === 'setting1') { self.activateSetting1(); } else if (optionId === 'setting2') { self.activateSetting2(); } else if (optionId === 'setting3') { self.activateSetting3(); } }); self.activateSetting1 = function () { console.log('Setting 1' + (self.isSelected ? ' was activated' : ' was deactivated')); var object1 = getChildByName(game, 'object1'); if (self.isSelected) { setGameSetting('setting1', true); if (!object1) { object1 = game.addChildAt(new Object1(), game.getChildIndex(settingsBackground)); object1.name = 'object1'; object1.x = 2048 / 2; object1.y = 2732 / 2 - 450; } object1.visible = true; } else { setGameSetting('setting1', false); if (object1) { object1.visible = false; } } }; self.activateSetting2 = function () { console.log('Setting 2' + (self.isSelected ? ' was activated' : ' was deactivated')); var object2 = getChildByName(game, 'object2'); if (self.isSelected) { setGameSetting('setting2', true); if (!object2) { object2 = game.addChildAt(new Object2(), game.getChildIndex(settingsBackground)); object2.name = 'object2'; object2.x = 2048 / 2; object2.y = 2732 / 2 - 300; } object2.visible = true; } else { setGameSetting('setting2', false); if (object2) { object2.visible = false; } } }; self.activateSetting3 = function () { console.log('Setting 3' + (self.isSelected ? ' was activated' : ' was deactivated')); var object3 = getChildByName(game, 'object3'); if (self.isSelected) { setGameSetting('setting3', true); if (!object3) { object3 = game.addChildAt(new Object3(), game.getChildIndex(settingsBackground)); object3.name = 'object3'; object3.x = 2048 / 2; object3.y = 2732 / 2 - 150; } object3.visible = true; } else { setGameSetting('setting3', false); if (object3) { object3.visible = false; } } }; }); /* * SettingsBackground class: This class represents the background of the settings menu. * It extends the Container class. */ var SettingsBackground = Container.expand(function () { var self = Container.call(this); /* * Constructor: This is where we set up the SettingsBackground. */ /* * Create the background graphics and add it to the SettingsBackground. * The anchor point is set to the center of the graphics. */ var settingsBgGraphics = self.createAsset('settingsBg', 'Settings Background', 0.5, 0.5); /* * Initially, the settings background is not visible. */ self.visible = false; }); /* * Cogwheels class: This class represents the settings cogwheels in the game. * It extends the Container class. */ var Cogwheels = Container.expand(function () { var self = Container.call(this); /* * Constructor: This is where we set up the Cogwheels. */ /* * Create the cogwheels graphics and add it to the Cogwheels. * The anchor point is set to the center of the graphics. */ var cogwheelGraphics = self.createAsset('cogwheels', 'Settings Cogwheel', 0.5, 0.5); /* * This flag indicates whether the car color option is currently displayed. */ /* * This will hold the CarColor instance when it is created. */ /* * Create the settings background. */ /* * When the cogwheels are tapped, we toggle the visibility of the settings menu. */ var setting1, setting2, setting3; cogwheelGraphics.on('down', function () { game.addChildAt(settingsBackground, game.children.length); console.log('Settings cogwheel tapped'); settingsBackground.visible = !settingsBackground.visible; settingsBackground.x = 2048 / 2; settingsBackground.y = 2732 / 2; if (!settingsBackground.visible) { if (setting1) { game.removeChild(setting1); } if (setting2) { game.removeChild(setting2); } if (setting3) { game.removeChild(setting3); } } else { setting1 = game.addChild(new SettingOption('setting1', 'Setting 1')); setting1.x = settingsBackground.x; setting1.y = settingsBackground.y - 300; setting1.isSelected = getGameSetting('setting1'); setting2 = game.addChild(new SettingOption('setting2', 'Setting 2')); setting2.x = settingsBackground.x; setting2.y = settingsBackground.y - 150; setting2.isSelected = getGameSetting('setting2'); setting3 = game.addChild(new SettingOption('setting3', 'Setting 3')); setting3.x = settingsBackground.x; setting3.y = settingsBackground.y; setting3.isSelected = getGameSetting('setting3'); } }); }); /**** * Initialize Game ****/ /* * Game initialization: This is where we create the game. * We set the background color to black. */ var game = new LK.Game({ backgroundColor: 0x000000 }); /**** * Game Code ****/ /* * Set the background color to white. */ /* * Game code: This is where we set up the game. */ function getChildByName(container, name) { for (var i = 0; i < container.children.length; i++) { if (container.children[i].name === name) { return container.children[i]; } } return null; } var gameSettings = {}; function getGameSetting(setting) { return gameSettings[setting]; } function setGameSetting(setting, value) { gameSettings[setting] = value; } game.setBackgroundColor(0xFFFFFF); /* * Create the settings cogwheels and add it to the game. * We position it at the top right corner of the screen. */ var settingsBackground = new SettingsBackground(); var cogwheels = game.addChild(new Cogwheels()); cogwheels.x = 2048 - cogwheels.width / 2 - 50; cogwheels.y = 100;
===================================================================
--- original.js
+++ change.js
@@ -132,9 +132,9 @@
/*
* Create the settings background.
*/
- var settingsBackground = new SettingsBackground();
+
/*
* When the cogwheels are tapped, we toggle the visibility of the settings menu.
*/
var setting1, setting2, setting3;