Shortstuff81000 Posted October 13, 2015 Share Posted October 13, 2015 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? Quote Link to comment Share on other sites More sharing options...
Shortstuff81000 Posted October 14, 2015 Author Share Posted October 14, 2015 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.