Creating an\u00a0endless runner game in Phaser<\/a> he wasn’t able to do much. Really all he could do is watch the power bar go up and down. Let’s change that now by applying the power of the bar to the hero. We are going to that by adding physics to the game.<\/p>\nThe first thing to do is to start the physics engine. There are several engines in Phaser, we will be using the Arcade engine.<\/p>\n
At the end of the\u00a0create function, (but just above the mouseListeners) \u00a0place this line of code to start the physics engine<\/p>\n
\/\/start the physics engine\r\ngame.physics.startSystem(Phaser.Physics.ARCADE);<\/pre>\nThis will let phaser know that we want to add physics to our sprites. However, it doesn’t automatically add physics to every single sprite. We must enable each sprite. Place this code on the next line.<\/p>\n
\/\/enable the hero for physics\r\ngame.physics.enable(this.hero, Phaser.Physics.ARCADE);<\/pre>\nNow our sprites are ready to have the physics properties set. Let’s make a jump function to set the velocity of our hero.<\/p>\n
doJump: function() {\r\n this.hero.body.velocity.y = -this.power * 12;\r\n }<\/pre>\nWe only want to the y velocity and we want to set it to a negative number to make it go upwards. I set it to the power(or width of the PowerBar) times 12. This seemed to give the right speed upwards.<\/p>\n
This is how the stateMain.js should look now<\/p>\n
var StateMain = {\r\n preload: function() {\r\n game.load.image(\"ground\", \"images\/ground.png\");\r\n game.load.image(\"hero\", \"images\/hero.png\");\r\n game.load.image(\"bar\", \"images\/powerbar.png\");\r\n game.load.image(\"block\", \"images\/block.png\");\r\n },\r\n create: function() {\r\n this.power = 0;\r\n \/\/turn the background sky blue\r\n game.stage.backgroundColor = \"#00ffff\";\r\n \/\/add the ground\r\n var ground = game.add.sprite(0, game.height * .9, \"ground\");\r\n \/\/add the hero in \r\n this.hero = game.add.sprite(game.width * .2, ground.y - 25, \"hero\");\r\n \/\/add the power bar just above the head of the hero\r\n this.powerBar = game.add.sprite(this.hero.x + 25, this.hero.y - 25, \"bar\");\r\n this.powerBar.width = 0;\r\n \/\/start the physics engine\r\n game.physics.startSystem(Phaser.Physics.ARCADE);\r\n \/\/enable the hero for physics\r\n game.physics.enable(this.hero, Phaser.Physics.ARCADE);\r\n \/\/set listeners\r\n game.input.onUp.add(this.mouseUp, this);\r\n game.input.onDown.add(this.mouseDown, this);\r\n },\r\n mouseDown: function() {\r\n this.timer = game.time.events.loop(Phaser.Timer.SECOND \/ 1000, this.increasePower, this);\r\n },\r\n mouseUp: function() {\r\n this.doJump();\r\n game.time.events.remove(this.timer);\r\n this.power = 0;\r\n this.powerBar.width = 0;\r\n },\r\n increasePower: function() {\r\n this.power++;\r\n this.powerBar.width = this.power;\r\n if (this.power > 50) {\r\n this.power = 50;\r\n }\r\n },\r\n doJump: function() {\r\n this.hero.body.velocity.y = -this.power * 12;\r\n },\r\n update: function() {}\r\n}<\/pre>\nAs you can see when you release the mouse the hero goes up and stays there:<\/p>\n\n\n