Do you like my tutorials?

Then consider supporting me on Ko-fi

Talking about Rise Above game, Game development, HTML5, Javascript and Phaser.

Today it’s time to see the second step of the creation of Rise Above game. In step 1 we saw the basic mechanics of the game, now we’ll see how to create the main feature of the game: the ship rising up and going down when you think you can’t control it anymore. While in the original game you take back your ship down with a swipe, here we will use a double click/tap. That’s what we are going to create:
Click or tap to move the ship from one side to another, double click to take it back down and have a limited time while the ship will be indestructible. The whole “rise and fall back” thing is managed by tweens, one which makes the ship slowly rise above, and one which makes the ship quickly fall down. Here is the source code with new lines highlighted:
var game;
var ship;
var shipPosition;
var shipPositions;
var shipCanMove;
var barrierGroup;
var shipHorizontalSpeed = 400;
var shipMoveDelay = 100;
var barrierSpeed = 120;
var barrierDelay = 2000;
var verticalTween;
var shipVerticalSpeed = 20000; 
var lastClick;
var shipInvisibilityTime = 1000;

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

var playGame = function(game){};

playGame.prototype = {
	preload: function(){
          game.load.image("ship", "ship.png");
          game.load.image("barrier", "barrier.png");
	},
  	create: function(){
          shipCanMove = true;
          shipPosition = 0;
          barrierGroup = game.add.group();
          shipPositions = [40, game.width - 40];
          game.physics.startSystem(Phaser.Physics.ARCADE);
          ship = game.add.sprite(shipPositions[shipPosition], game.height - 40, "ship");
          ship.anchor.set(0.5);
          game.physics.enable(ship, Phaser.Physics.ARCADE);
          ship.body.allowRotation = false;
          ship.body.moves = false;
          game.input.onDown.add(moveShip);
          game.time.events.loop(barrierDelay, function(){
               var barrier = new Barrier(game);
               game.add.existing(barrier);
               barrierGroup.add(barrier);
          });
          verticalTween = game.add.tween(ship).to({
               y: 0
          }, shipVerticalSpeed, Phaser.Easing.Linear.None, true);          
	},
     update: function(){
          if(ship.alpha == 1){
               game.physics.arcade.collide(ship, barrierGroup, function(){
                    game.state.start("PlayGame");     
               });
          }
     }
}

function moveShip(){
     if(shipCanMove){
          lastClick = game.time.now;
          shipPosition = 1 - shipPosition;
          shipCanMove = false;
          var moveTween = game.add.tween(ship).to({ 
               x: shipPositions[shipPosition],
          }, shipHorizontalSpeed, Phaser.Easing.Linear.None, true);
          moveTween.onComplete.add(function(){
               game.time.events.add(shipMoveDelay, function(){
                    shipCanMove = true;
               });
          })
     }
     else{
          if(game.time.now - lastClick < 200 && ship.alpha == 1){
               ship.alpha = 0.5;
               verticalTween.stop();
               verticalTween = game.add.tween(ship).to({
                    y: game.height - 40
               }, 100, Phaser.Easing.Cubic.Out, true);
               verticalTween.onComplete.add(function(){
                    verticalTween = game.add.tween(ship).to({
                         y: 0
                    }, shipVerticalSpeed, Phaser.Easing.Linear.None, true); 
                    var alphaTween = game.add.tween(ship).to({
                         alpha: 1     
                    }, shipInvisibilityTime, Phaser.Easing.Linear.None, true);       
               })
          }
     }
}

Barrier = function (game) {
     var position = game.rnd.between(0, 1);
	Phaser.Sprite.call(this, game, game.width * position, -20, "barrier");
	game.physics.enable(this, Phaser.Physics.ARCADE);
     this.anchor.set(0.5);
};

Barrier.prototype = Object.create(Phaser.Sprite.prototype);
Barrier.prototype.constructor = Barrier;

Barrier.prototype.update = function() {
	this.body.velocity.y = barrierSpeed;
	if(this.y > game.height){
		this.destroy();
	}
};
Now we are close to recreate the whole original game: during next step I’ll show you how to add final touches. 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.