Le Twitch Posted July 30, 2014 Share Posted July 30, 2014 Main.Game = function (game) { };var colourA;var squareA;Main.Game.prototype = { create: function() { this.randomColour.call(); squareA = this.add.sprite(55, 370, 'colourSquare', colourA); squareA.inputEnabled = true; squareA.events.onInputDown.add(this.randomColour, this); }, update: function() { }, randomColour: function() { var colourArray = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']; var randomA = Math.floor(Math.random() * colourArray.length); colourA = colourArray[randomA]; console.log(colourA); }};the variable "colourA" changes but the change doesn't appear on screen Link to comment Share on other sites More sharing options...
lewster32 Posted July 30, 2014 Share Posted July 30, 2014 I think you're approaching this a bit strangely. Firstly you can just do:this.randomColour();To call the function - .call and .apply on functions can often result in unintended stuff happening if you don't know how to use them properly. Secondly, you can change the frame of the sprite at any point by changing the sprite.frameName property:sprite.frameName = "red";Lastly, if you want to use a function to get this, and don't need to keep the reference to the colour floating around, a much better way of doing this would be as follows: create: function() { // call the function in the frame parameter squareA = this.add.sprite(55, 370, 'colourSquare', this.randomColour()); squareA.inputEnabled = true; squareA.events.onInputDown.add(function() { // change the framename by calling the function again squareA.frameName = this.randomColour(); }, this); }, randomColour: function() { var colourArray = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']; var randomA = Math.floor(Math.random() * colourArray.length); var colourA = colourArray[randomA]; console.log(colourA); // the key here is that this function now returns the colour, rather than setting it - this is cleaner and ensures variables don't end up strewn around your code but are used only where needed return colourA; } Link to comment Share on other sites More sharing options...
Le Twitch Posted July 31, 2014 Author Share Posted July 31, 2014 I think you're approaching this a bit strangely. Firstly you can just do:this.randomColour();To call the function - .call and .apply on functions can often result in unintended stuff happening if you don't know how to use them properly. Secondly, you can change the frame of the sprite at any point by changing the sprite.frameName property:sprite.frameName = "red";Lastly, if you want to use a function to get this, and don't need to keep the reference to the colour floating around, a much better way of doing this would be as follows:var colourA;var colourB;var textWord;var textColour;var square;var squareA;var squareB;var gameText; Main.Game.prototype = { create: function() { this.randomColour(); square = this.add.group(); squareA = this.add.sprite(55, 370, 'colourSquare', colourA); squareB = this.add.sprite(675, 370, 'colourSquare', colourB); square.add(squareA); square.add(squareB); square.setAll('inputEnabled', true); gameText = this.add.bitmapText(null, null, textColour + 'Text', textWord, 127); gameText.x = gameWidth - gameText.textWidth / 2; gameText.y = gameHeight - gameText.textHeight / 2; square.callAll('events.onInputDown.add', 'events.onInputDown', this.randomColour); }, randomColour: function() { var colourArray = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']; var randomA = Math.floor(Math.random() * colourArray.length); var randomB = Math.floor(Math.random() * colourArray.length); while (randomA === randomB) { randomB = Math.floor(Math.random() * colourArray.length); } colourA = colourArray[randomA]; colourB = colourArray[randomB]; var randomText = Math.floor(Math.random() * 2); if (randomText === 0) { textWord = colourA; textColour = colourB; } else if (randomText === 1) { textWord = colourB; textColour = colourA; } console.log(colourA, colourB, textWord, textColour); }};this should clear things up a bit. this is the full code that i'm using. the colours for "squareA" and "squareB" needs to be different and needs to be randomized at the same time. the colours of "squareA" and "squareB" are then picked at random to determine which colour would be set as the text and which colour would be set as the colour of the text(the image and atlas file). the aim of the game is to click/tap on the right colour of the text and not the word of the text. let's say that the word is red and the colour of the text is orange. the right answer would be orange because that's the colour of the text. you would then click/tap on the orange square.i can't code the input mechanics for it yet until i get the randomizing mechanic right first :S Link to comment Share on other sites More sharing options...
Recommended Posts