VS 2015 IDE doesn't like game variables inside Phaser game state

[Shortstuff81000]

Hello! I am relatively new to Phaser, so I downloaded the examples and started making little adjustments to them. So far the Invaders example is my favorite, so I started separating it into separate files and implementing my own graphics.  Audio will come later.

 

That is, after I figure out what to do with my game variables. I started copying the invaders code into a Visual Studio Phaser project I'd been playing around with. It wasn't much; just a bouncing Phaser logo, so I knew it would be easy to replace the existing code with the Invaders code. Everything works except for the code in the Game file:

GameStates.Game = function (game) {};var player;var aliens;var bullets;var enemyBullet;var explosions;var ufoExplosions;var bulletTime = 0;var cursors;var fireButton;var starfield;var score = 0;var scoreString = '';var scoreText;var lives;var firingTimer = 0;var stateText;var livingEnemies = [];var colors = [            0xff0000, 0xff1e00, 0xff4000, 0xff5e00, 0xff7f00, 0xff9d00, 0xffbf00, 0xffdd00, 0xffff00, 0xddff00, 0xbfff00, 0x9dff00, 0x80ff00, 0x5eff00, 0x40ff00, 0x1eff00, 0x00ff00, 0x00ff1e, 0x00ff40, 0x00ff5d, 0x00ff80, 0x00ff9d, 0x00ffbf, 0x00ffdd, 0x00ffff, 0x00ddff, 0x00bfff, 0x009dff, 0x0080ff, 0x005dff, 0x0040ff, 0x001eff, 0x0000ff, 0x1e00ff, 0x4000ff, 0x5e00ff, 0x8000ff, 0x9d00ff, 0xbf00ff, 0xdd00ff, 0xff00ff, 0xff00dd, 0xff00bf, 0xff009d, 0xff007f, 0xff005e, 0xff0040, 0xff001e, 0xffffff];GameStates.Game.prototype = {    create: function () {        game.physics.startSystem(Phaser.Physics.ARCADE);        //  The scrolling starfield background        starfield = game.add.tileSprite(0, 0, 1024, 768, 'starfield');        starfield.tint = colors[Math.floor(Math.random() * colors.length)];        //  Our bullet group        bullets = game.add.group();        bullets.enableBody = true;        bullets.physicsBodyType = Phaser.Physics.ARCADE;        bullets.createMultiple(30, 'playerBullet');        bullets.setAll('anchor.x', 0.5);        bullets.setAll('anchor.y', 1);        bullets.setAll('outOfBoundsKill', true);        bullets.setAll('checkWorldBounds', true);        bullets.setAll('tint', colors[Math.floor(Math.random() * colors.length)]);        // The enemy's bullets        enemyBullets = game.add.group();        enemyBullets.enableBody = true;        enemyBullets.physicsBodyType = Phaser.Physics.ARCADE;        enemyBullets.createMultiple(30, 'enemyBullet');        enemyBullets.setAll('anchor.x', 0.5);        enemyBullets.setAll('anchor.y', 1);        enemyBullets.setAll('outOfBoundsKill', true);        enemyBullets.setAll('checkWorldBounds', true);        enemyBullets.setAll('tint', colors[Math.floor(Math.random() * colors.length)]);        //  The hero!        player = game.add.sprite(512, 640, 'playerShip');        player.anchor.setTo(0.5, 0.5);        player.tint = colors[Math.floor(Math.random() * colors.length)];        game.physics.enable(player, Phaser.Physics.ARCADE);        //  The baddies!        aliens = game.add.group();        aliens.enableBody = true;        aliens.physicsBodyType = Phaser.Physics.ARCADE;        createAliens();        //  The score        scoreString = 'Score : ';        scoreText = game.add.text(10, 10, scoreString + score, { font: '34px Arial', fill: '#fff' });        //  Lives        lives = game.add.group();        game.add.text(game.world.width - 100, 10, 'Lives : ', { font: '34px Arial', fill: '#fff' });        //  Text        stateText = game.add.text(game.world.centerX, game.world.centerY, ' ', { font: '84px Arial', fill: '#fff' });        stateText.anchor.setTo(0.5, 0.5);        stateText.visible = false;        for (var i = 0; i < 3; i++) {            var ship = lives.create(game.world.width - 100 + (30 * i), 60, 'playerShip');            ship.anchor.setTo(0.5, 0.5);            ship.angle = 90;            ship.alpha = 0.4;        }        //Player Explosion pool        explosions = game.add.group();        explosions.createMultiple(30, 'playerExplosion');        explosions.forEach(setupInvader, this);        explosions.setAll('tint', colors[Math.floor(Math.random() * colors.length)]);        //Enemy Explosion pool        enemyExplosions = game.add.group();        enemyExplosions.createMultiple(30, 'enemyExplosion');        enemyExplosions.forEach(setupInvader, this);        enemyExplosions.setAll('tint', colors[Math.floor(Math.random() * colors.length)]);        //  And some controls to play the game with        cursors = game.input.keyboard.createCursorKeys();        fireButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);    },    createAliens: function () {        for (var y = 0; y < 10; y++) {            for (var x = 0; x < 12; x++) {                var alien = aliens.create(x * 48, y * 48, 'UFO');                alien.anchor.setTo(0.5, 0.5);                alien.animations.add('fly', [0, 1, 2, 3], 20, true);                alien.play('fly');                alien.body.moves = false;                alien.tint = colors[Math.floor(Math.random() * colors.length)];            }        }        aliens.x = 100;        aliens.y = 50;        //  All this does is basically start the invaders moving. Notice we're moving the Group they belong to, rather than the invaders directly.        var tween = game.add.tween(aliens).to({ x: 200 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true);        //  When the tween loops it calls descend        tween.onLoop.add(descend, this);    },    setupInvader: function (invader) {        invader.anchor.x = 0.5;        invader.anchor.y = 0.5;        invader.animations.add('enemyExplosion');    },    descend: function () {        aliens.y += 10;    },    update: function () {        //  Scroll the background        starfield.tilePosition.y += 5;        if (player.alive) {            //  Reset the player, then check for movement keys            player.body.velocity.setTo(0, 0);            if (cursors.left.isDown) {                player.body.velocity.x = -400;            }            else if (cursors.right.isDown) {                player.body.velocity.x = 400;            }            else if (cursors.up.isDown) {                player.body.velocity.y = -200;            }            else if (cursors.down.isDown) {                player.body.velocity.y = 200;            }            game.world.wrap(player, 0, true);            //  Firing?            if (fireButton.isDown) {                fireBullet();            }            if (game.time.now > firingTimer) {                enemyFires();            }            //  Run collision            game.physics.arcade.overlap(bullets, aliens, collisionHandler, null, this);            game.physics.arcade.overlap(player, aliens, playerHitsAlien, null, this);            game.physics.arcade.overlap(enemyBullets, player, enemyHitsPlayer, null, this);        }    },    render: function () {    },    collisionHandler: function (bullet, alien) {        //  When a bullet hits an alien we kill them both        bullet.kill();        alien.kill();        //  Increase the score        score += 20;        scoreText.text = scoreString + score;        //  And create an explosion         var explosion = enemyExplosions.getFirstExists(false);        explosion.reset(alien.body.x, alien.body.y);        explosion.play('enemyExplosion', 30, false, true);        if (aliens.countLiving() == 0) {            score += 1000;            scoreText.text = scoreString + score;            enemyBullets.callAll('kill', this);            stateText.text = " You Won, \n Hit Enter to restart";            stateText.visible = true;            //the "click to restart" handler            //game.input.onTap.addOnce(restart, this);            //game.input.keyboard.addKey(Phaser.Keyboard.ENTER);            this.enterKey = this.game.input.keyboard.addKey(Phaser.Keyboard.ENTER);            this.enterKey.onDown.add(restart, this);        }    },    playerHitsAlien: function (player, alien) {        //  When the player hits an alien we kill them both        live = lives.getFirstAlive();        if (live) {            live.kill();        } alien.kill();        //No score for losing a life        //Reset the player's location        player.x = 512;        player.y = 640;        //  And create an explosion         var eExplosion = explosions.getFirstExists(false);        eExplosion.reset(alien.body.x, alien.body.y);        eExplosion.play('enemyExplosion', 30, false, true);        //  And create an explosion         var pExplosion = playerExplosion.getFirstExists(false);        pExplosion.reset(player.body.x, player.body.y);        pExplosion.play('playerExplosion', 30, false, true);        if (aliens.countLiving() == 0) {            score += 1000;            scoreText.text = scoreString + score;            enemyBullets.callAll('kill', this);            stateText.text = " You Won, \n Hit Enter to restart";            stateText.visible = true;            //the "click to restart" handler            //game.input.onTap.addOnce(restart, this);            //game.input.keyboard.addKey(Phaser.Keyboard.ENTER);            this.enterKey = this.game.input.keyboard.addKey(Phaser.Keyboard.ENTER);            this.enterKey.onDown.add(restart, this);        }    },    enemyHitsPlayer: function (player, bullet) {        bullet.kill();        live = lives.getFirstAlive();        if (live) {            live.kill();        }        //  And create an explosion         var explosion = explosions.getFirstExists(false);        explosion.reset(player.body.x, player.body.y);        explosion.play('playerExplosion', 30, false, true);        // When the player dies        if (lives.countLiving() < 1) {            player.kill();            enemyBullets.callAll('kill');            stateText.text = " GAME OVER \n Hit Enter to restart";            stateText.visible = true;            //the "click to restart" handler            //game.input.onTap.addOnce(restart,this);            //game.input.keyboard.addKey(Phaser.Keyboard.ENTER);            this.enterKey = this.game.input.keyboard.addKey(Phaser.Keyboard.ENTER);            this.enterKey.onDown.add(restart, this);        }    },    enemyFires: function () {        //  Grab the first bullet we can from the pool        enemyBullet = enemyBullets.getFirstExists(false);        livingEnemies.length = 0;        aliens.forEachAlive(function (alien) {            // put every living enemy in an array            livingEnemies.push(alien);        });        if (enemyBullet && livingEnemies.length > 0) {            var random = game.rnd.integerInRange(0, livingEnemies.length - 1);            // randomly select one of them            var shooter = livingEnemies[random];            // And fire the bullet from this enemy            enemyBullet.reset(shooter.body.x, shooter.body.y);            game.physics.arcade.moveToObject(enemyBullet, player, 120);            firingTimer = game.time.now + 2000;        }    },    fireBullet: function () {        //  To avoid them being allowed to fire too fast we set a time limit        if (game.time.now > bulletTime) {            //  Grab the first bullet we can from the pool            bullet = bullets.getFirstExists(false);            if (bullet) {                //  And fire it                bullet.reset(player.x, player.y + 8);                bullet.body.velocity.y = -400;                bulletTime = game.time.now + 100;            }        }    },    resetBullet: function (bullet) {        //  Called if the bullet goes out of the screen        bullet.kill();    },    restart: function () {        //  A new level starts        //resets the life count        lives.callAll('revive');        //  And brings the aliens back from the dead         aliens.removeAll();        createAliens();        //revives the player        player.revive();        //hides the text        stateText.visible = false;    }};

I have a strong feeling that the variables should go inside the "GameStates.Game.prototype = {". But when I put them there, I get many expectations of semicolons, identifiers, and closing curly brackets, and syntax errors. If I put them outside of the "GameStates.Game.prototype = {", I cannot leave the title screen. Where else can I put them?

[Shortstuff81000]

I was acting on the assumption that the error was in the game.js code above. Here are the smaller classes:

 

mainmenu.js:

GameStates.MainMenu = function (game) {};GameStates.MainMenu.prototype = {    create: function () {        // create main menu text and images -        // create a "Start Game" mechanism - variety of ways to do this...        this.loadingText = this.add.text(this.game.width / 2, this.game.height / 2, "Press Enter to start", { font: "48px sans-serif", fill: "#00ffbf" });        this.loadingText.anchor.setTo(0.5, 0.5);        this.enterKey = this.game.input.keyboard.addKey(Phaser.Keyboard.ENTER);        this.enterKey.onDown.add(this.playGame, this);    },    playGame: function () {        this.state.start('Game');    }};

preloader.js:

// Preloader will load all of the assets like graphics and audioGameStates.Preloader = function (game) {    this.preloadBar = null;}GameStates.Preloader.prototype = {    preload: function () {        // common to add a loading bar sprite here...        this.preloadBar = this.add.sprite(this.game.width / 2 - 100, this.game.height / 2, 'preloaderBar');        this.load.setPreloadSprite(this.preloadBar);        //Load Sprites        this.load.spritesheet('enemyBullet', 'assets/spritesheets/EnemyBullet.png', 12, 12);        this.load.spritesheet('enemyExplosion', 'assets/spritesheets/EnemyExplosion.png', 48, 48);        this.load.spritesheet('playerBullet', 'assets/spritesheets/PlayerBullet.png', 108, 24);        this.load.spritesheet('playerExplosion', 'assets/spritesheets/PlayerExplosion.png', 48, 48);        this.load.spritesheet('playerShip', 'assets/spritesheets/Ship.png', 48, 48);        this.load.spritesheet('starfield', 'assets/spritesheets/Starfield.png');        this.load.spritesheet('UFO', 'assets/spritesheets/UFO.png', 48, 48);        //Load Audio        //game.load.audio('playerShoot', 'assets/audio/SoundEffects/blaster.mp3');        //game.load.audio('enemyShoot', 'assets/audio/SoundEffects/shot1.wav');        //game.load.audio('explode', 'assets/audio/SoundEffects/blaster.mp3');        //game.load.audio('playerShoot', 'assets/audio/SoundEffects/explode1.wav');    },    create: function () {        //call next state        this.state.start('MainMenu');    }};

boot.js:

// Boot will take care of initializing a few settings,// declare the object that will hold all game statesvar GameStates = {    //quite common to add game variables/constants in here};GameStates.Boot = function (game) {  //declare the boot state};GameStates.Boot.prototype = {    preload: function () {        // load assets to be used later in the preloader e.g. for loading screen / splashscreen        this.load.image('preloaderBar', 'assets/preloader-bar.png');    },    create: function () {        // setup game environment        // scale, input etc..        // call next state        this.state.start('Preloader');    }};

app.js:

window.onload = function () {    var game = new Phaser.Game(1024, 786, Phaser.AUTO, '');    //  Add the States your game has.    game.state.add('Boot', GameStates.Boot);    game.state.add('Preloader', GameStates.Preloader);    game.state.add('MainMenu', GameStates.MainMenu);    game.state.add('Game', GameStates.Game);    //  Now start the Boot state.    game.state.start('Boot');};

I included boot and app.js last because they are the least likely ones to be causing issues; I looked at them, but I didn't change anything, except for the game size in app.js