Shortstuff81000

I am creating a Bejeweled game using Emanuele Feronato's awesome prototype; Match 3 Bejeweled HTML5 prototype made with Phaser – detecting combos. I created my own grayscale graphics in Photoshop, made them a little bigger, increased the grid size of the game, and used some code from his HTML5 Dungeon Raid tile engine made with Phaser – Part 4 tutorial to make the game scalable. I used Phaser's sprite tint property to color my jewels. They look awesome all randomly colored like that, but it is difficult to make matches on just shape alone. How would you tint specific frames a certain color? I will have made a great leap forward in my game when it can do the following: Select seven out of 13 color options Select seven out of 49 sprites in the Jewels spritesheet. I used the same layer style in this original. It doesn't look bad, but I think different styles of jewel as well as having the shapes all tinted the same color will make matches easier to see. The sprites should all be from different columns. For example, if the first sprite selected was the star in the top left corner of the image, the next frame should be a hexagon or other shape from a different row. Once the different frames have been chosen, the game should apply the chosen colors to to the chosen frames of my spritesheet. I have attached my code. I appreciate any help you can give. Thank you all very much! CatsTreasures.zip

That was a great idea! :-D I uploaded the Breakout clone, but I'm not entirely sure I did it right. How does the Sandbox handle external images? and other functions? Do you have any ideas? http://phaser.io/sandbox/UozLvgWh EDIT: OK, I fixed something... LOL! I was getting a blank black canvas when I posted this reply. It took starting a template with images to make me realize that I'd forgotten the game's variables. Oops! LOL! Now I am getting green squares with diagonal lines drawn through them. I guess I'd better find another site other than Dropbox to store them. Anybody have any suggestions?

Why not try converting them to mp3's? http://media.io/

I recently modified the Breakout clone. Aside from everything being a little bigger and closer together, the only modification I made was to make the blocks drop after they'd been hit. That's where the game freezes. The Invaders clone crashes when an enemy's bullet hits the player. The issue has something to do with the player's explosion, but I'm not sure what it is. Breakout.zip

I started this thread to share my modified Phaser game examples, ask for help with them, and share the code for the complete versions. Visual Studio 2015 is my preferred IDE, so just ignore the web.config file when you open the .zip file. Invaders.zip

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

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?