初学Phaser.js之碰撞检测

写游戏的人都知道碰撞检测，Phaser直接封装好了函数供我们调用，请看

Phaser.Physics.Arcade.collide(object1, object2, collideCallback, processCallback, callbackContext)

各参数意义如下，看来我们能用回调函数collideCallback做许多事儿~

The Arcade Physics world. Contains Arcade Physics related collision, overlap and motion methods.class Phaser.Physics.Arcade {    Checks for collision between two game objects. You can perform Sprite vs. Sprite, Sprite vs. Group, Group vs. Group, Sprite vs. Tilemap Layer or Group vs. Tilemap Layer collisions.    Both the first and second parameter can be arrays of objects, of differing types.    If two arrays are passed, the contents of the first parameter will be tested against all contents of the 2nd parameter.    The objects are also automatically separated. If you don't require separation then use ArcadePhysics.overlap instead.    An optional processCallback can be provided. If given this function will be called when two sprites are found to be colliding. It is called before any separation takes place,    giving you the chance to perform additional checks. If the function returns true then the collision and separation is carried out. If it returns false it is skipped.    The collideCallback is an optional function that is only called if two sprites collide. If a processCallback has been set then it needs to return true for collideCallback to be called.    NOTE: This function is not recursive, and will not test against children of objects passed (i.e. Groups or Tilemaps within other Groups).        arg Phaser.Sprite,Phaser.Group,Phaser.Particles.Emitter,Phaser.TilemapLayer,array object1            The first object or array of objects to check. Can be Phaser.Sprite, Phaser.Group, Phaser.Particles.Emitter, or Phaser.TilemapLayer.        arg Phaser.Sprite,Phaser.Group,Phaser.Particles.Emitter,Phaser.TilemapLayer,array object2            The second object or array of objects to check. Can be Phaser.Sprite, Phaser.Group, Phaser.Particles.Emitter or Phaser.TilemapLayer.        arg function collideCallback (optional) = null            An optional callback function that is called if the objects collide. The two objects will be passed to this function in the same order in which you specified them, unless you are colliding Group vs. Sprite, in which case Sprite will always be the first parameter.        arg function processCallback (optional) = null            A callback function that lets you perform additional checks against the two objects if they overlap. If this is set then collision will only happen if processCallback returns true. The two objects will be passed to this function in the same order in which you specified them.        arg object callbackContext (optional)            The context in which to run the callbacks.        returns True if a collision occured otherwise false.    boolean collide(object1, object2, collideCallback, processCallback, callbackContext)}

在上一篇文章的基础上我通过上面介绍的这个函数写了产生元宝的函数以及检测元宝与地面、元宝与player对象的碰撞，碰撞后去掉旧元宝产生新元宝。

var game = new Phaser.Game(400, 600, Phaser.AUTO, 'phaser-example', {preload: preload, create: create, update: update });        var player;        var yuanbao;        var cursors;        var jumpTimer = 0;        function preload() {            game.load.image('pipe', 'img/pipe.png');        }        function create() {            game.time.desiredFps = 30;            game.physics.startSystem(Phaser.Physics.ARCADE);            game.physics.arcade.gravity.y = 1000;            game.stage.backgroundColor = '#565656';            //  This sprite was created with the Phaser Gen Paint app            //  also available in the Phaser Examples repo and on the Phaser site.            var dudeData = [                '..E.............',                '.DEEEEEEDDD.....',                '..EEEEEEDDD.....',                '..EE00EE77778666',                '..EEEEEE77777666',                '..EEEE7777777666',                '..EEEE7655567666',                'EEEEEE7777757666',                'EEEEEEDD555.7666',                '..DEEEEEDDD.....',                '..EEEEEEDDD.....',                '.7EEEEEEDDD.6...',                '.77EEEEEDDD66...',                '..77......66....'            ];            var gold = [                '.......EE.......',                '.EEE..EEEE..EEE.',                '..EEEEEEEEEEEE..',                '..EEEEEEEEEEEE..',                '...EEEEEEEEEE...',                '....EEEEEEEE....'            ];            game.create.texture('phaserDude', dudeData, 4, 5, 2);            game.create.texture('gold', gold, 3, 2, 2);            player = game.add.sprite(game.width / 2, game.height - 40, 'phaserDude');            player.anchor.set(0.5);            game.physics.enable(player, Phaser.Physics.ARCADE);            player.body.collideWorldBounds = true;            cursors = game.input.keyboard.createCursorKeys();            createYB();        }        function update() {            player.body.velocity.x = 0;            if (cursors.left.isDown)            {                player.body.velocity.x = -200;                player.scale.x = -1;            }            else if (cursors.right.isDown)            {                player.body.velocity.x = 200;                player.scale.x = 1;            }            if (cursors.up.isDown && player.body.onFloor() && game.time.now > jumpTimer)            {                player.body.velocity.y = -500;                jumpTimer = game.time.now + 1000;            }            game.physics.arcade.collide(player, yuanbao, collisionHandler, null, game);            if(yuanbao.body.onFloor()) {                collisionHandler(player, yuanbao);            }        }        function createYB() {            yuanbao = game.add.sprite(game.rnd.between(0, game.width), 0, 'gold');            game.physics.enable(yuanbao, Phaser.Physics.ARCADE);            yuanbao.body.collideWorldBounds = true;        }        function collisionHandler(player, yuanbao) {            yuanbao.kill();            createYB();        }

主要就是createYB函数和collisionHandler函数以及update中的检测,和地面是否碰撞的检测调用了onFloor()函数，这个函数返回值是一个布尔值用来判断，很简单。

现在我们的小鸟可以‘吃’元宝了。

下一篇文章我将尝试计分/计时/特殊道具/...