Creation of an HTML5 game like Rise Above using Phaser and Arcade Physics – step 2
Talking about Rise Above game, Game development, HTML5, Javascript and Phaser.
Do you like my tutorials?
Then consider supporting me on Ko-fi.
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();
}
};
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.