Creation of an HTML5 game like Radical using Phaser and Arcade Physics – step 1

Talking about Radical game, Game development, HTML5, Javascript and Phaser.

There are a lot of vertical endless runner gamers covered on the blog lately, just to show how similar are all of them and how quickly you can create one of them once you know the basics. Today it’s the time of Radical by BeaverTap Games, the guys behind Mikey Hooks which was also been covered in a series of tutorials.
In this first step we’ll see spaceship control, barriers and warp feature:
Playing is easy: tap on the left half of the screen to move left, and on the right half of the screen to move right. The source code itself does not differ that much fromt the one used to create Rise Above or 2 Cars. 
var game;
var ship;
var barrierGroup;
var shipHorizontalSpeed = 400;
var barrierSpeed = 150;
var barrierDelay = 1200;

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(){
          barrierGroup = game.add.group();
          game.physics.startSystem(Phaser.Physics.ARCADE);
          ship = game.add.sprite(game.width / 2, game.height - 40, "ship");
          ship.anchor.set(0.5);
          game.physics.enable(ship, Phaser.Physics.ARCADE);
          ship.body.allowRotation = false;
          game.input.onDown.add(moveShip);
          game.input.onUp.add(stopShip);
          game.time.events.loop(barrierDelay, function(){
               var position = game.rnd.between(0, 4);
               console.log(position);
               var barrier = new Barrier(game, position, 1);               
               game.add.existing(barrier);
               barrierGroup.add(barrier);
               barrier = new Barrier(game, position + 1, 0);               
               game.add.existing(barrier);
               barrierGroup.add(barrier);
          });  
	},
     update: function(){
          if(ship.x < 0){
               ship.x = game.width;
          }
          if(ship.x > game.width){
               ship.x = 0;
          }
          game.physics.arcade.collide(ship, barrierGroup, function(){
               game.state.start("PlayGame");     
          });
     }
}

function stopShip(){
     ship.body.velocity.x = 0;     
}

function moveShip(e){
     if(e.position.x < game.width / 2){
          speedMult = -1;
     }
     else{
          speedMult = 1;
     }
     ship.body.velocity.x = shipHorizontalSpeed * speedMult;
}

Barrier = function (game, position, anchor) {
	Phaser.Sprite.call(this, game, position * game.width / 5, -20, "barrier");
	game.physics.enable(this, Phaser.Physics.ARCADE);
     this.anchor.set(anchor, 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();
	}
};
And you have your Radical game almost complete. Next time, vertical barriers, meanwhile download the source code.