// 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 > 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) > 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 > game.height){
// ... then destroy it
this.destroy();
}
// if the barrier is about to enter the stage and has createNew flag...
if(this.createNew && this.y >= - 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 > 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.Creation of an HTML5 game like Radical using Phaser and Arcade Physics – step 2
Read all posts about "Radical" 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:
