Search the Community

Hello, I'm working on a racing game and I have a character select screen that allows the player to choose between 3 variations of the same character (blue, pink, purple). In my main.js I have a global variable to hold the character value (blue, pink or purple). In stateChoice.js I have 3 buttons, and I am using .bind. When the player chooses the global variable becomes whatever color they picked. However, in my mainState.js I have the game and I'm currently using a ton of repetitive code to say if (character == 'blue') { // add this sprite , etc. etc.}. Obviously, this is not ideal since I am repeating a ton of code for all 3 characters. I did some reading on extending sprites but, the examples I've seen are for the same sprite now different ones. How do I go about adding a sprite (any of the colors) in a way that I can do everything once in the main game?? Thank you! //BUTTONS TO CHOOSE CHARACTER //Choose Racer1 this.pickRacer1 = game.add.button(game.world.centerX-150, game.world.centerY+105, "buttons", this.racerStart.bind(this, "blue"), this); this.pickRacer1.anchor.set(0.5, 0.5); //Choose Racer2 this.pickRacer2 = game.add.button(game.world.centerX, game.world.centerY+105, "buttons", this.racerStart.bind(this, "pink"), this); this.pickRacer2.anchor.set(0.5, 0.5); //Choose Racer3 this.pickRacer3 = game.add.button(game.world.centerX+150, game.world.centerY+105, "buttons", this.racerStart.bind(this, "purple"), this); this.pickRacer3.anchor.set(0.5, 0.5); //BUTTON FUNCTION racerStart: function (racer){ console.log(racer); for (var key in this.buttons) { this.buttons[key].frame = 0; } this.buttons[racer].frame = 1; character = racer; this.startConfirm.animations.play("neon"); // character.animations.play("blue"); console.log(character); },