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

Read all posts about "" game
So I am sure you heard about people going mad for infinite runner games, and here we go with the second step of Radical game. In the first step we created the main engine, with barriers and a moving ship flying through them, now it’s time to create vertical walls. This is what we are going to make:
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. If there aren’t walls on the sides, you can wrap around the screen. Also, in previous step I did not comment the code, so here is the fully commented code. There isn’t that much stuff you shouldn’t already know if you follow the blog, anyway you should have a look at Phaser states and extending Sprite class. Here we go:
// the game itself
var game;
// the ship we are controlling
var ship;
// the group with all barriers, which will be used for collision detection
var barrierGroup;
// ship horizontal speed, can be modified to change gameplay
var shipHorizontalSpeed = 400;
// barrier vertical speed, can be modified to change gameplay
var barrierSpeed = 150;
// delay from one barrier and another. This isn't meant to be a time measurement but a pixel measurement.
// that is, a new barrier will be created once the old barrier travelled for 150 pixels
var barrierDelay = 150;
// this is a speed multiplier, useful to make the ship move to the left or to the right. Will assume -1 or +1 values
var speedMult;

// function to be executed once the window finishes to load
window.onload = function() {	
     // creation of a 320x480 game
	game = new Phaser.Game(320, 480, Phaser.AUTO, "");
     // creation of a state called PlayGame, which is the only state
     game.state.add("PlayGame",playGame);
     // starting playGame state
     game.state.start("PlayGame");
}

var playGame = function(game){};

playGame.prototype = {
	// preloading images
     preload: function(){
          // image ship
          game.load.image("ship", "ship.png");
          // horizontal barrier
          game.load.image("barrier", "barrier.png");
          // vertical wall
          game.load.image("verticalbarrier", "verticalbarrier.png");
	},
     // creation of the game
  	create: function(){
          // first we create the group which will contain all obstacles and we add it to the game
          barrierGroup = game.add.group();
          // starting the physics system
          game.physics.startSystem(Phaser.Physics.ARCADE);
          // adding the ship sprite, horizontally centered near the bottom of the canvas
          ship = game.add.sprite(game.width / 2, game.height - 40, "ship");
          // setting the anchor point in the middle of the ship
          ship.anchor.set(0.5);
          // enabling the ship to be part of the physics simulation
          game.physics.enable(ship, Phaser.Physics.ARCADE);
          // don't let the ship rotate
          ship.body.allowRotation = false;
          // when a click/touch is detected, call moveShip function
          game.input.onDown.add(moveShip);
          // when a click touch is released, call stopShip function
          game.input.onUp.add(stopShip);
          // this function will place barriers and is the core of the game
          placeBarriers();           
	},
     update: function(){
          // this will make the ship leave the stage to the left and enter from the right
          if(ship.x < 0){
               ship.x = game.width;
          }
          // this will make the ship leave the stage to the right and enter from the left
          if(ship.x &gt; game.width){
               ship.x = 0;
          }
          // checking for collision between the ship and the barrier group
          game.physics.arcade.collide(ship, barrierGroup, function(){
               // if there's a collision, restart the game
               game.state.start("PlayGame");     
          });
     }
}

// function to move the ship
function moveShip(e){
     // checking if we touched/clicked on the left half of the canvas or on the right half
     if(e.position.x < game.width / 2){
          // left, 
          speedMult = -1;
     }
     else{
          // right
          speedMult = 1;
     }
     // setting ship body horizontal velocity according to shipHorizontalSpeed and speedMult.
     // the ship will move to the left or to the right 
     ship.body.velocity.x = shipHorizontalSpeed * speedMult;
}

// function to stop the ship
function stopShip(){
     // setting ship body horizontal velocity to zero. The ship will stop
     ship.body.velocity.x = 0;     
}

// placeBarriers function will create the whole maze
function placeBarriers(){
     // ther's a 1/10 probability we WON'T place vertical barriers, allowing ths ship to wrap around the canvas
     if(game.rnd.between(0, 9) &gt; 0){
          placeVertical = true;
     }
     else{
          placeVertical = false;
     }
     // posiiton of the hole in the horizontal barrier.
     // it's not an actual hole, just a space between two horizontal barriers
     var position = game.rnd.between(0, 4);
     // creation of a new barrier. Arguments: the barrier itself, the position of the hole, the horizontal registration point (1 = rightmost pixel)
     // and a flag to know if we have to create vertical barriers. This is the LEFT barrier
     var barrier = new Barrier(game, position, 1, placeVertical); 
     // adding the newly created barrier to the game              
     game.add.existing(barrier);
     // adding the newly created barrier to barrierGroup
     barrierGroup.add(barrier);
     // and this is the RIGHT barrier, with registration point to zero (leftmost pixel)
     barrier = new Barrier(game, position + 1, 0, placeVertical); 
     // adding the newly created barrier to the game                    
     game.add.existing(barrier);
     // adding the newly created barrier to barrierGroup
     barrierGroup.add(barrier);
}

// this is the horizontal barrier class
Barrier = function (game, position, anchor, placeVertical) {
     // first we place the sprite. Look at the arguments with x and y positions:
     // x = position * ((game.width - 40 [twice the width of vertical barriers]) / 5 [number of possible holes]) + 20 [width of vertical barrier]
     // y = outside the top of the canvas, -barrierDelay - 40 [twice the width of vertical barriers]
	Phaser.Sprite.call(this, game, position * ((game.width - 40) / 5) + 20, -barrierDelay - 40, "barrier");
	// enabling physics on the barrier
     game.physics.enable(this, Phaser.Physics.ARCADE);
     // setting the anchor point
     this.anchor.set(anchor, 0);
     // here we just set createNew flag to true to left barriers.
     // a barrier with createNew flag will create new horizontal barriers.
     if(anchor == 1){
          this.createNew = true;
     }
     else{
          this.createNew = false;
     }
     // together with horizontal bar, we add a vertical bar, if placeVertical is true
     // then we add it to the game and to barrierGroup
     if(placeVertical){
          var vertical = new Vertical(game, anchor);
          game.add.existing(vertical);
          barrierGroup.add(vertical);
     }
     // setting barrier vertical speed
     this.body.velocity.y = barrierSpeed;
};

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

// things to do at each frame
Barrier.prototype.update = function() {   
	// if the barrier leaves the stage to the bottom...
     if(this.y &gt; game.height){
          // ... then destroy it
		this.destroy();
	}
     // if the barrier is about to enter the stage and has createNew flag...
     if(this.createNew &amp;&amp; this.y &gt;= - 40){
          // remove the flag
          this.createNew = false;
          // place new barriers
          placeBarriers();     
     }
};

// this is the vertical barrier class
// side can be 0 (left) or 1 (right)
Vertical = function (game, side) {
     // adding vertical barrier sprite. The coordinates follow the same concept of the barrier
	Phaser.Sprite.call(this, game, game.width * side, -barrierDelay - 40, "verticalbarrier");
	// enabling physics on the barrier
     game.physics.enable(this, Phaser.Physics.ARCADE);
     // setting the anchor point
     this.anchor.set(side, 0);
     // barrierDelay + 20 [horizontal barrier height]
     this.height = barrierDelay + 20; 
     // setting barrier vertical speed   
     this.body.velocity.y = barrierSpeed; 
};

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

Vertical.prototype.update = function() {
     // if the barrier leaves the stage to the bottom...
	if(this.y &gt; game.height){
          // ... then destroy it
		this.destroy();
	}
};
Remember this is a golden era for endless runner games, so let me see if you manage to sort something interesting out of this prototype. Meanwhile, download the source code.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers