The basics behind “jumping on enemies” feature, explained with Phaser and ARCADE physics
Talking about Game development, HTML5, Javascript and Phaser.
Learn cross platform HTML5 game development
Check my Gumroad page for commented source code, games and books.
var game;
var gameOptions = {
// width of the game, in pixels
gameWidth: 640,
// height of the game, in pixels
gameHeight: 192,
// background color
bgColor: 0x444444,
// player gravity
playerGravity: 1900,
// player horizontal speed
playerSpeed: 200,
// player force
playerJump: 400,
// enemy horizontal speed
enemySpeed: 150
}
window.onload = function() {
game = new Phaser.Game(gameOptions.gameWidth, gameOptions.gameHeight);
game.state.add("PreloadGame", preloadGame);
game.state.add("PlayGame", playGame);
game.state.start("PreloadGame");
}
var preloadGame = function(game){}
preloadGame.prototype = {
preload: function(){
game.stage.backgroundColor = gameOptions.bgColor;
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.stage.disableVisibilityChange = true;
// loading level tilemap
game.load.tilemap("level", 'level.json', null, Phaser.Tilemap.TILED_JSON);
// loading game assets
game.load.image("tile", "tile.png");
game.load.image("hero", "hero.png");
game.load.image("enemy", "enemy.png");
},
create: function(){
game.state.start("PlayGame");
}
}
var playGame = function(game){}
playGame.prototype = {
create: function(){
// starting ARCADE physics
game.physics.startSystem(Phaser.Physics.ARCADE);
// creatin of "level" tilemap
this.map = game.add.tilemap("level");
// adding tiles (actually one tile) to tilemap
this.map.addTilesetImage("tileset01", "tile");
// tile 1 (the black tile) has the collision enabled
this.map.setCollision(1);
// which layer should we render? That's right, "layer01"
this.layer = this.map.createLayer("layer01");
// adding the hero sprite
this.hero = game.add.sprite(game.width / 2, 152, "hero");
// setting hero anchor point
this.hero.anchor.set(0.5);
// enabling ARCADE physics for the enemy
game.physics.enable(this.hero, Phaser.Physics.ARCADE);
// setting hero gravity
this.hero.body.gravity.y = gameOptions.playerGravity;
// setting hero horizontal speed
this.hero.body.velocity.x = gameOptions.playerSpeed;
// adding the enemy sprite
this.enemy = game.add.sprite(game.width / 4, 152, "enemy");
// setting enemy anchor point
this.enemy.anchor.set(0.5);
// enabling ARCADE physics for the enemy
game.physics.enable(this.enemy, Phaser.Physics.ARCADE);
// setting enemy horizontal speed
this.enemy.body.velocity.x = gameOptions.enemySpeed;
// the hero can jump
this.canJump = true;
// waiting for player input
game.input.onDown.add(this.handleJump, this);
},
handleJump: function(){
// the hero can jump when:
// canJump is true AND the hero is on the ground (blocked.down)
if((this.canJump && this.hero.body.blocked.down)){
// applying jump force
this.hero.body.velocity.y = -gameOptions.playerJump;
// hero can't jump anymore
this.canJump = false;
}
},
update: function(){
// handling collision between the hero and the tiles
game.physics.arcade.collide(this.hero, this.layer, function(hero, layer){
// hero on the ground
if(hero.body.blocked.down){
// hero can jump
this.canJump = true;
}
// hero on the ground and touching a wall on the right
if(this.hero.body.blocked.right && this.hero.body.blocked.down){
// horizontal flipping hero sprite
this.hero.scale.x = -1;
}
// same concept applies to the left
if(this.hero.body.blocked.left && this.hero.body.blocked.down){
this.hero.scale.x = 1;
}
// adjusting hero speed according to the direction it's moving
this.hero.body.velocity.x = gameOptions.playerSpeed * this.hero.scale.x;
}, null, this);
// handling collision between the enemy and the tiles
game.physics.arcade.collide(this.enemy, this.layer, function(hero, layer){
// enemy touching a wall on the right
if(this.enemy.body.blocked.right){
// horizontal flipping enemy sprite
this.enemy.scale.x = -1;
}
// same concept applies to the left
if(this.enemy.body.blocked.left){
this.enemy.scale.x = 1;
}
// adjusting enemy speed according to the direction it's moving
this.enemy.body.velocity.x = gameOptions.enemySpeed * this.enemy.scale.x;
}, null, this);
// handling collision between enemy and hero
game.physics.arcade.collide(this.hero, this.enemy, function(hero, enemy){
// hero is stomping the enemy if:
// hero is touching DOWN
// enemy is touching UP
if(enemy.body.touching.up && hero.body.touching.down){
// in this case just jump again
this.hero.body.velocity.y = -gameOptions.playerJump;
}
else{
// any other way to collide on an enemy will restart the game
game.state.start("PlayGame");
}
}, null, this);
}
}
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.