Creating Movement<\/h3>\n

Although we will create the illusion of running, as you probably have guessed by now, we will actually be moving the blocks. The temptation is to just move the group as one in the update function.<\/p>\n

update:function()\r\n{\r\n  this.blockGroup.x--;\r\n}<\/pre>\n
But if we did that we couldn’t take advantage of the built in physics that Phaser has to offer. For the arcade physics collision detection to work the blocks inside the group need to be enabled for physics and they need to have velocity set.<\/p>\n
So to do this I’ve modified the makeBlocks function by looping through the group and applying physics to each one. I’ve also increased the distance between blocks from 25 to 50, as the earlier value was a mistake, and adjusted the wallHeight\u00a0variable from 1-6, to 1-4.<\/p>\n
makeBlocks: function() {\r\n        \/\/remove all the blocks from the group\r\n        this.blocks.removeAll();\r\n        var wallHeight = game.rnd.integerInRange(1, 4);\r\n        for (var i = 0; i < wallHeight; i++) {\r\n            var block = game.add.sprite(0, -i * 50, \"block\");\r\n            this.blocks.add(block);\r\n        }\r\n        this.blocks.x = game.width - this.blocks.width\r\n        this.blocks.y = this.ground.y - 50;\r\n        \/\/\r\n        \/\/Loop through each block\r\n        \/\/and apply physics\r\n        this.blocks.forEach(function(block) {\r\n            \/\/enable physics\r\n            game.physics.enable(block, Phaser.Physics.ARCADE);\r\n            \/\/set the x velocity to -160\r\n            block.body.velocity.x = -150;\r\n            \/\/apply some gravity to the block\r\n            \/\/not too much or the blocks will bounce\r\n            \/\/against each other\r\n            block.body.gravity.y = 4;\r\n            \/\/set the bounce so the blocks\r\n            \/\/will react to the runner\r\n            block.body.bounce.set(1,1);\r\n        });\r\n    }<\/pre>\n
Now we need 3 things to happen<\/p>\n
\n
The blocks to not fall through the ground<\/li>\n
The blocks not to fall through each other<\/li>\n
The blocks to react when they hit the player<\/li>\n<\/ul>\n
So to accomplish that we do the same as we did to make sure the player stayed on the ground. We set up a collision for each one. Place this in the update function.<\/p>\n
\/\/\r\n        \/\/collide the hero with the blocks\r\n        \/\/\r\n        game.physics.arcade.collide(this.hero, this.blocks);\r\n        \/\/\r\n        \/\/colide the blocks with the ground\r\n        \/\/\r\n        game.physics.arcade.collide(this.ground, this.blocks);\r\n        \/\/\r\n        \/\/when only specifying one group, all children in that\r\n        \/\/group will collide with each other\r\n        \/\/\r\n        game.physics.arcade.collide(this.blocks);<\/pre>\n