首先在index.html裡面引入phaser.js 和自己建立的game.js

設定canvas的css樣式

canvas{ margin:0 auto;}

接下來用一個類方法封裝整個遊戲

(function() {}());

在function裡面定義遊戲

（function(){

 var SantaGame = {
        init: function() {
            this.game = new Phaser.Game(width, height, Phaser.CANVAS, 'game');
            this.game.state.add('boot'
 
, this.boot);
            this.game.state.add('load', this.load);
            this.game.state.add('play', this.play);
            this.game.state.add('title', this.title);
            this.game.state.add('gameOver', this.gameOver);
            this.game.state.start('load');
        },
        boot:function
 
(){

        },
        load:function(){

        },
        title:function(){

        },  
        play:function(){

        },
        gameOver:function(){

        }

};

SantaGame.init();

}()）

boot介面預載入loading介面。跟上個遊戲一樣 下面直接說loading介面吧

load: {
            preload: function() {
                var
 
 preloadSprite = this.game.add.sprite(this.game.world.width / 2 ,this.game.world.height / 2 ,'loading'); //建立顯示loading進度的sprite
                this.game.load.setPreloadSprite(preloadSprite);
                this.game.load.audio('drivin-home', 'assets/world.wav');
                this.game.load.audio('ho-ho-ho', 'assets/bonbon.wav');
                this.game.load.audio('hop', 'assets/bomb.wav');
                this.game.load.image('platform', 'assets/1.png');
                this.game.load.spritesheet('santa-running', 'assets/runman.png', 493/5, 174,5);
                this.game.load.image('snow-bg', 'assets/beijing1.png');
                this.game.load.image('snow-bg-2', 'assets/yuanjing1.png');
                this.game.load.image('snowflake', 'assets/xiaoshixiaoguo.png');
                this.game.load.image('logo', 'assets/name.png');
                this.game.load.image('startbtn', 'assets/bangzhujiantou.png');
            },
            create: function() {
                this.game.state.start('title');
            }
        },

並且在載入好的時候執行title介面

title介面。。實際上就是menu介面

title: {
            create: function() {

                this.bg_heaven = this.game.add.tileSprite(0, 0, width, height, 'snow-bg-2').autoScroll(-50,0);
                this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg').autoScroll(-100,0);
                this.logo = this.game.add.sprite(this.game.world.width / 2 - 158, 20, 'logo');
                this.logo.alpha = 0;
                this.game.add.tween(this.logo).to({
                    alpha: 1
                }, 1000, Phaser.Easing.Linear.None, true, 0);
                this.startBtn = this.game.add.button(this.game.world.width / 2 - 89, this.game.world.height - 120, 'startbtn', this.startClicked);
                this.startBtn.alpha = 0;
                this.game.add.tween(this.startBtn).to({
                    alpha: 1
                }, 1000, Phaser.Easing.Linear.None, true, 1000);


            },
            startClicked: function() {
                this.game.state.start('play');
            }
        },

官方文件說alpha是The opacity of the object.就是透明度唄。

tween動畫把logo的透明度從0到1。

 this.game.add.tween(this.logo).to({
                    alpha: 1
                }, 1000, Phaser.Easing.Linear.None, true, 0);

新增按鈕和按鈕事件

this.startBtn = this.game.add.button(this.game.world.width / 2 - 89, this.game.world.height - 120, 'startbtn', this.startClicked);
                this.startBtn.alpha = 0;
                this.game.add.tween(this.startBtn).to({
                    alpha: 1
                }, 1000, Phaser.Easing.Linear.None, true, 1000);

為按鈕新增點選事件是this.startClicked

下面是this.clicked函式：

 startClicked: function() {
                this.game.state.start('play');
            }

閉著眼都知道是進入下個場景了。

下面是最重要的play介面嘍 噹噹噹當~

  play: {
            create: function() {
                gameScore = 0;
                this.currentFrame = 0;
                this.gameSpeed = 580;
                this.isGameOver = false;
                this.game.physics.startSystem(Phaser.Physics.ARCADE);
                this.music = this.game.add.audio('drivin-home');
                this.music.loop = true;
                this.music.play();
                this.bg_heaven = this.game.add.tileSprite(0, 0, width, height, 'snow-bg-2').autoScroll(-50,0);
                this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg');
                this.bg.fixedToCamera = true;
                this.bg.autoScroll(-this.gameSpeed / 6, 0);
                this.emitter = this.game.add.emitter(this.game.world.centerX, -32, 50);
                this.platforms = this.game.add.group();
                this.platforms.enableBody = true;
                this.platforms.createMultiple(5, 'platform', 0, false);
                this.platforms.setAll('anchor.x', 0.5);
                this.platforms.setAll('anchor.y', 0.5);
                var plat;
                for (var i = 0; i < 5; i++) {
                    plat = this.platforms.getFirstExists(false);
                    plat.reset(i * 192, this.game.world.height - 44);
                    plat.width = 300*0.6;
                    plat.height = 88*0.6;
                    this.game.physics.arcade.enable(plat);
                    plat.body.immovable = true;
                    plat.body.bounce.set(0);
                }
                this.lastPlatform = plat;
                this.santa = this.game.add.sprite(100, this.game.world.height - 200, 'santa-running');
                this.santa.animations.add('run');
                this.santa.animations.play('run', 15, true);
                this.santa.width = (493/5)*0.5;
                this.santa.height = 174*0.5;
                this.game.physics.arcade.enable(this.santa);
                this.santa.body.gravity.y = 1500;
                this.santa.body.collideWorldBounds = true;
                this.game.camera.follow(this.santa);
                this.cursors = this.game.input.keyboard.createCursorKeys();
                this.spacebar = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
                this.score = this.game.add.text(20, 20, '', {
                    font: '24px Arial',
                    fill: 'white'
                });
            },

分解來看。先初始化各項資料。
然後來氣物理系統。開啟音效限定是無限迴圈。

this.game.physics.startSystem(Phaser.Physics.ARCADE);
                this.music = this.game.add.audio('drivin-home');
                this.music.loop = true;
                this.music.play();

接下來是對背景的處理

this.bg_heaven = this.game.add.tileSprite(0, 0, width, height, 'snow-bg-2').autoScroll(-50,0);
                this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg');
                this.bg.fixedToCamera = true;
                this.bg.autoScroll(-this.gameSpeed / 6, 0);

新增兩個背景圖片並且設定轉動。
官方API關於fixedtocamera就是隨著背景移動，鏡頭也移動。

this.platforms = this.game.add.group();
                this.platforms.enableBody = true;
                this.platforms.createMultiple(5, 'platform', 0, false);
                this.platforms.setAll('anchor.x', 0.5);
                this.platforms.setAll('anchor.y', 0.5);
                var plat;
                for (var i = 0; i < 5; i++) {
                    plat = this.platforms.getFirstExists(false);
                    plat.reset(i * 192, this.game.world.height - 44);
                    plat.width = 300*0.6;
                    plat.height = 88*0.6;
                    this.game.physics.arcade.enable(plat);
                    plat.body.immovable = true;
                    plat.body.bounce.set(0);
                }
                this.lastPlatform = plat;

新增一個組是臺階組。前面flappy bird裡面管子組也是如此的。
enablebody是什麼意思？反正是要加的。。在研究吧嘿嘿。
然後每一個都設定錨點是中點。因為最初設定的是00點哦，這個跟別的引擎不一樣。
immovable 固定的不可移動的。。寫了跟沒寫有區別麼。。。
bounce.set(0)可以彈跳的。呼呼
然後記錄了最後一個platform一下。

然後把主人公給加進來了如下

 this.santa = this.game.add.sprite(100, this.game.world.height - 200, 'santa-running');
                this.santa.animations.add('run');
                this.santa.animations.play('run', 15, true);
                this.santa.width = (493/5)*0.5;
                this.santa.height = 174*0.5;
                this.game.physics.arcade.enable(this.santa);
                this.santa.body.gravity.y = 1500;
                this.santa.body.collideWorldBounds = true;
                this.game.camera.follow(this.santa);

然後添加了鍵盤空格響應事件和分數。。分數太模糊了

this.cursors = this.game.input.keyboard.createCursorKeys();
                this.spacebar = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
                this.score = this.game.add.text(20, 20, '', {
                    font: '24px Arial',
                    fill: 'white'
                });

下面當然是update函式啦

update: function() {
                var that = this;
                if (!this.isGameOver) {
                    gameScore += 0.5;
                    this.gameSpeed += 0.03;
                    this.score.text = 'Score: ' + Math.floor(gameScore);
                    this.currentFrame++;
                    var moveAmount = this.gameSpeed / 100;
                    this.game.physics.arcade.collide(this.santa, this.platforms);
                    if (this.santa.body.bottom >= this.game.world.bounds.bottom) {
                        this.isGameOver = true;
                        this.endGame();
                    }
                    if (this.cursors.up.isDown && this.santa.body.touching.down || this.spacebar.isDown && this.santa.body.touching.down || this.game.input.mousePointer.isDown && this.santa.body.touching.down || this.game.input.pointer1.isDown && this.santa.body.touching.down) {
                        this.jumpSound = this.game.add.audio('hop');
                        this.jumpSound.play();
                        this.santa.body.velocity.y = -500;
                    }
                   this.platforms.children.forEach(function(platform) {
                        platform.body.position.x -= moveAmount;
                        if (platform.body.right <= 0) {
                            platform.kill();
                            var plat = that.platforms.getFirstExists(false);
                            plat.reset(that.lastPlatform.body.right + 192, that.game.world.height - Math.floor(Math.random() * 50) - 24);
                            plat.body.immovable = true;
                            that.lastPlatform = plat;
                        }
                    });
                }
            },

首先判斷如果說遊戲結束標誌還是false而且小人撞到了地面。遊戲結束呼叫 this.endGame();
按鍵或鍵盤小人給個垂直向上的速度。
後面就不斷更新所有物體的位置x，就是加上規定的速度唄。
最後reset已經離開螢幕的物體。重定義它。

還有一個this.endGame();函式。如下

endGame: function() {
                this.music.stop();
                this.music = this.game.add.audio('ho-ho-ho');
                this.music.play();
                this.game.state.start('gameOver');
            }

聲音停止一下，加一個hoho，再開啟一下。進入下個場景。

gameOver: {
            create: function() {
                this.bg_heaven = this.game.add.tileSprite(0, 0, width, height, 'snow-bg-2').autoScroll(-50,0);
                this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg');
                this.bg.autoScroll(-this.gameSpeed / 6, 0);
                this.score = this.game.add.text(this.game.world.width / 2 - 100, 200, 'Score: ' + Math.floor(gameScore), {
                    font: '42px Arial',
                    fill: 'white'
                });
                this.score.alpha = 0;
                this.game.add.tween(this.score).to({
                    alpha: 1
                }, 600, Phaser.Easing.Linear.None, true, 600);
                this.restartBtn = this.game.add.button(this.game.world.width / 2 - 103.5, 280, 'startbtn', this.restartClicked);
                this.restartBtn.alpha = 0;
                this.game.add.tween(this.restartBtn).to({
                    alpha: 1
                }, 600, Phaser.Easing.Linear.None, true, 1000);
            },
            restartClicked: function() {
                this.game.state.start('play');
            }
        }

還是加倆背景，加個得分，加個按鈕給個事件。完了。