Create a HTML5 game like Planet Revenge using Phaser and ARCADE physics.

Talking about Planet Revenge game, Game development, HTML5, Javascript and Phaser.

Do you like my tutorials?

I am try to solve all levels of Planet Revenge iOS game.

Guide your UFO safely across 100 levels over five different worlds each with different surfaces and gravity effects. Navigate around the obstacles to complete the worlds in as few attempts as possible! It’s a fun game, but moreover it’s quite easy to make, and I am showing you a step by step guide about the making of this game using Phaser. GAME SETUP First, we need to create the game itself and place the spaceship on the stage:

var game;

window.onload = function() {
     game = new Phaser.Game(960, 640, Phaser.AUTO, "");
     game.state.add("PlayGame", playGame);
     game.state.start("PlayGame");
}

var playGame = function(game){};
playGame.prototype = {
     preload: function(){
          game.load.image("spaceship", "assets/sprites/spaceship.png");
     },
     create: function(){
          game.scale.pageAlignHorizontally = true;
          game.scale.pageAlignVertically = true;
          game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
          this.spaceship = game.add.sprite(50, game.height / 2, "spaceship");
          this.spaceship.anchor.set(0.5);       
     }
}

And here it is the spaceship, ready to fly.

Now let’s add some action to the game MOVING SPACESHIP HORIZONTALLY To move the spaceship horizontally, as well as to control it and check for collisions later in the game, we need to setup ARCADE physics engine, adding a listener waiting for an input, then apply spaceship body an horizontal velocity:

var game;

window.onload = function() {
     game = new Phaser.Game(960, 640, Phaser.AUTO, "");
     game.state.add("PlayGame", playGame);
     game.state.start("PlayGame");
}

var playGame = function(game){};
playGame.prototype = {
     preload: function(){
          game.load.image("spaceship", "assets/sprites/spaceship.png");
     },
     create: function(){
          game.scale.pageAlignHorizontally = true;
          game.scale.pageAlignVertically = true;
          game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
          this.spaceship = game.add.sprite(50, game.height / 2, "spaceship");
          this.spaceship.anchor.set(0.5); 
          game.physics.enable(this.spaceship, Phaser.Physics.ARCADE);
          game.input.onDown.add(this.startLevel, this);      
     },
     startLevel: function(){
          this.spaceship.body.velocity.setTo(200, 0);
     }
}

Click or play on the canvas to make the spaceship fly. Bye bye spaceship LEAVING A SMOKE TRAIL We can handle spaceship trail with a particle emitter:

var game;

window.onload = function() {
	game = new Phaser.Game(960, 640, Phaser.AUTO, "");
     game.state.add("PlayGame", playGame);
     game.state.start("PlayGame");
}

var playGame = function(game){};
playGame.prototype = {
     preload: function(){
          game.load.image("spaceship", "assets/sprites/spaceship.png");
          game.load.image("particle", "assets/sprites/particle.png");
     },
     create: function(){
          game.scale.pageAlignHorizontally = true;
          game.scale.pageAlignVertically = true;
          game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
          this.emitter = game.add.emitter(50, game.height / 2, 50);
          this.emitter.makeParticles("particle");
          this.emitter.gravity = 0;
          this.emitter.setXSpeed(0, 0);
          this.emitter.setYSpeed(0, 0);
          this.emitter.setAlpha(0.5, 1);
          this.emitter.minParticleScale = 0.5;
          this.emitter.maxParticleScale = 1;  
          this.spaceship = game.add.sprite(50, game.height / 2, "spaceship");
          this.spaceship.anchor.set(0.5); 
          game.physics.enable(this.spaceship, Phaser.Physics.ARCADE);
          game.input.onDown.add(this.startLevel, this);    
     },
     startLevel: function(){
          this.spaceship.body.velocity.setTo(200, 0);  
          this.emitter.start(false, 3000, 200);
     },
     update: function(){
          this.emitter.x = this.spaceship.x;
          this.emitter.y = this.spaceship.y;
          if(this.spaceship.x > game.width + this.spaceship.width){
               game.state.start("PlayGame");    
          }
     }
}

And now when you click or tap on the canvas, spaceship will leave a trail

Moreover, the game will restart when the spaceship leaves the stage to the right. HANDLING GRAVITY AND THRUST The last features we are going to add today are gravity and thrust. We will keep the spaceship accelerate upwards as long as the player keeps the input on the canvas, and leave it fall down whe input is released:

var game;

window.onload = function() {
     game = new Phaser.Game(960, 640, Phaser.AUTO, "");
     game.state.add("PlayGame", playGame);
     game.state.start("PlayGame");
}

var playGame = function(game){};
playGame.prototype = {
     preload: function(){
          game.load.image("spaceship", "assets/sprites/spaceship.png");
          game.load.image("particle", "assets/sprites/particle.png");
     },
     create: function(){
          game.scale.pageAlignHorizontally = true;
          game.scale.pageAlignVertically = true;
          game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
          this.emitter = game.add.emitter(50, game.height / 2, 50);
          this.emitter.makeParticles("particle");
          this.emitter.gravity = 0;
          this.emitter.setXSpeed(0, 0);
          this.emitter.setYSpeed(0, 0);
          this.emitter.setAlpha(0.5, 1);
          this.emitter.minParticleScale = 0.5;
          this.emitter.maxParticleScale = 1;  
          this.spaceship = game.add.sprite(50, game.height / 2, "spaceship");
          this.spaceship.anchor.set(0.5); 
          game.physics.enable(this.spaceship, Phaser.Physics.ARCADE);
          game.input.onDown.add(this.startLevel, this);    
     },
     startLevel: function(){
          this.spaceship.body.velocity.setTo(200, 0);
          this.spaceship.body.gravity.y = 1000;
          this.engineOn();  
          this.emitter.start(false, 3000, 200);
          game.input.onDown.remove(this.startLevel, this);
          game.input.onDown.add(this.engineOn, this); 
          game.input.onUp.add(this.engineOff, this); 
     },
     engineOn: function(){
          this.spaceship.body.acceleration.y = -2000;
     },
     engineOff: function(){
          this.spaceship.body.acceleration.y = 0;          
     },
     update: function(){
          this.emitter.x = this.spaceship.x;
          this.emitter.y = this.spaceship.y;
          if(this.spaceship.x > game.width + this.spaceship.width){
               game.state.start("PlayGame");    
          }
     }
}

And this is the result:

Tap and hold to make the spaceship move up, leave the input to make it fall down. That’s all for this first step, we are going to add four more improvements next time, meanwhile download the source code.

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.