首先是素材

demo地址：

http://jsfiddle.net/DUN2Y/

首先Phaser 是一個基於canvas的 javascript遊戲引擎，說白了就是一個框架，讓你不用自己寫 canvas的方法來實現動畫效果。

官網地址：www.phaser.io 

一下采用最新版2.0

var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update,render:render });

先建立一個遊戲世界；一共5個引數，其中前兩個分別代表 canvas的長寬，而Phaser.CANVAS則代表是基於canvas來做圖，如果瀏覽器支援webGL，可以寫成Phaser.WEBGL..

中間這個空字串代表canvas的ID，也就是如果你自定義一個id為aaa的canvas，這一項就可以寫aaa，否則，會預設在body建立canvas。

最後的四個引數，很好理解，就是整個遊戲的方法，載入前，建立，更新方法，下面詳細介紹每個方法。

function preload() {

    game.load.image('sky', 'assets/sky.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('star', 'assets/star.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

}

preload方法一般引入一些資原始檔，圖片什麼的，其中load.spritesheet引入一個動畫圖片，也就是帶每個小人方位的圖片，32，48代表第一個方位的起始位置。

function create() {
//把canvas的 邊界設定成實物，也就是，可以用來檢測碰撞和覆蓋的實物
 game.physics.setBoundsToWorld();
    game.add.sprite(0, 0, 'sky');
 
    //  建立一組元件，其中可以把一些用處相同的元件放在一個grope裡，便於管理
    platforms = game.add.group();
//允許元件設定重力方面的配置
 platforms.enableBody = true;
//重力型別為arcade
 platforms.physicsBodyType = Phaser.Physics.ARCADE;
    // 建立地板
    var ground = platforms.create(0, game.world.height - 64, 'ground');
 
    //  縮放地板，使其自適應canvas大小
    ground.scale.setTo(2, 2);
 
    //  當地板被碰撞時，固定它的位置
    ground.body.immovable = true;
 
    //  建立兩個臺階
    var ledge = platforms.create(400, 400, 'ground');
    ledge.body.immovable = true;
 
    ledge = platforms.create(-150, 250, 'ground');
    
    ledge.body.immovable = true;
    
    
    
    //ledge2.body.setPolygon(62,112, 100,120,88,40);
//建立小人
 player = game.add.sprite(32, game.world.height - 450, 'dude');
    game.physics.enable(player, Phaser.Physics.ARCADE);
    console.log(player.body);
    //彈性指數
    player.body.bounce.y = 0.6;
//重力指數
 player.body.gravity.y = 400;
//是否允許和canvas邊界碰撞
 player.body.collideWorldBounds = true;
//新增動畫
 player.animations.add('left', [0, 1, 2, 3], 10, true);
    player.animations.add('right', [5, 6, 7, 8], 10, true);
    
    
    stars = game.add.group();
    stars.enableBody = true;
    stars.physicsBodyType = Phaser.Physics.ARCADE;
    for (var i = 0 ; i < 12 ; i++) {
        var star = stars.create(i * 70, 0, "star");
        star.body.gravity.y = 400;
        star.body.bounce.y = 0.7 + Math.random() * 0.2;
        star.body.collideWorldBounds = true;
    }
    cursors = game.input.keyboard.createCursorKeys();
    
    score = game.add.text(12, 12, "score:"+scoreCount+"",{color:"#000"});
    
    
    
    //var tilemap = game.add.tilemap("star",44,44,44,44);

}
 

其中add.sprite方法一個有4個引數，分別是位置的x，y座標和key，

key為proload方法引入時為其分配的id也就是dude

這個方法為遊戲新增一個精靈元素，精靈元素可以繫結事件，而且可以設定重力，彈性等引數，是框架裡最常用的元素。

function update() {
    game.physics.arcade.collide(player, platforms);
    game.physics.arcade.collide(stars, platforms);
    game.physics.arcade.collide(player, ledge2);
    game.physics.arcade.overlap(player, stars, function(player, star){
        console.log(stars.total);
        star.kill();
        scoreCount++;
        score.text = "score:"+scoreCount+"";
        if (stars.total == 0) {
            alert("congratulation!");
        }
    }, null, this);
    //  充值精靈的速度
    player.body.velocity.x = 0;
 
    if (cursors.left.isDown)
    {
        //  左移動
        player.body.velocity.x = -150;
 
        player.animations.play('left');
    }
    else if (cursors.right.isDown)
    {
        //  右移動
        player.body.velocity.x = 150;
 
        player.animations.play('right');
    }
    else
    {
        //  靜止
        player.animations.stop();
 
        player.frame = 4;
    }
 
    //  Allow the player to jump if they are touching the ground.
    if (cursors.up.isDown && player.body.touching.down)
    {
        player.body.velocity.y = -350;
    }
}
 

update方法主要負責一些事件的繫結，比如collide來檢測兩個元素是否碰撞，前兩個引數分別是兩個元素，後面是觸發的回撥方法。

overlap顧名思義是用來檢測兩個元素是否重疊，也就是小人和星星是否重疊。

然後在為其新增分數顯示的text

到此為止，一個簡單的小遊戲就建成了。

具體的每一項的配置，可以參考官網的doc來配置。

完！