終于到了重點(diǎn)了，前面所有的所有都是為這里做準(zhǔn)備的童芹，相信你對基礎(chǔ)已經(jīng)足夠了解了涮瞻，那就開始這個游戲的邏輯設(shè)計吧，這才是一個游戲的靈魂假褪。

首先就是月餅的出場署咽。

我們看下素材mooncake文件夾，這里有7個月餅生音，還有兩個高級月餅盒子宁否，這倆是高級貨。我們要讓月餅的出場夠隨機(jī)缀遍，不能每次都一樣慕匠，然后在設(shè)計某種規(guī)則讓高級月餅出場，吃掉高級月餅的得分跟吃掉普通月餅的得分也不一樣域醇。

得分記錄和最高分統(tǒng)計

得給吃貨一個努力的理由台谊，就是不斷超越。那就需要幫吃貨統(tǒng)計下它自己的得分歹苦，和歷史最高分青伤。

游戲等級制度

我們需要一個游戲等級制度督怜，理由就是隨著游戲的進(jìn)行殴瘦，難度應(yīng)該提升，而不是同樣的一個難度号杠，容易乏味蚪腋。隨著等級的提升，月餅應(yīng)該落下的距離越來越高姨蟋，并且滾動的速度越來越快屉凯。吃貨的落幕也要越來越快。

游戲結(jié)束

什么情況下結(jié)束掉游戲呢眼溶？吃貨沒有吃到月餅悠砚，或者吃貨就沒有打算去吃，而是自己滑落并最終選擇謝幕堂飞。

我們先來在定義寬度和高度的地方添加一些變量灌旧。

var level = 1;//等級，默認(rèn)從1開始
var score = 0; //得分
var scoreText;//得分的文字說明绰筛，添加到舞臺上
var topScore = 0;//最高得分
var speed = 1000;//月餅的滾動速度枢泰，默認(rèn)1000豪秒
var dropSpeed = 10000;//吃貨的下落速度，默認(rèn)10000毫秒
var player;//吃貨
var moonGroup;//我們把月餅放到這個分組里
var bang;//擊中月餅的聲音
var music;//背景音樂

我們修改start舞臺铝噩。

game.states.start = function() {
    this.preload = function() {
        this.add.sprite(0, 0, 'day'); // 添加背景圖片
        bang = this.add.audio('bang'); // 添加撞擊音樂
        music = this.add.audio('music'); // 添加背景音樂
        this.input.maxPointers = 1; // 只能單指點(diǎn)擊屏幕或鼠標(biāo)（非多人游戲）
        game.physics.startSystem(Phaser.Physics.ARCADE); // 啟動物理引擎
        topScore = localStorage.getItem("topScore") === null ? 0 : localStorage.getItem("topScore");
        scoreText = game.add.text(10, 10, "-", {
            font:"bold 18px Arial",
            fill: "#000000"
        });
        ///初始化狀態(tài)
        score = 0;
        level = 1;
        updateScore();
    },
    this.create = function() {
        music.play('', 0, 1, true); // 一直播放背景音樂
        moonGroup = game.add.group();//創(chuàng)建月餅分組
        moonGroup.enableBody = true;
        addMoon();
        addPlayer();
        game.physics.arcade.collide(player, moonGroup);//對吃貨和月餅組的月餅進(jìn)行碰撞檢測
    },
    this.update = function() {
        game.physics.arcade.overlap(player, moonGroup, collectMoon, null, this);//對吃貨和月餅組的月餅進(jìn)行碰撞檢測
    }
}
// 更新得分
function updateScore() {
    scoreText.text = "得分：" + score + "    最高得分：" + Math.max(score, topScore);
}

game.add.text是添加一個行文字說明衡蚂，前兩個參數(shù)是坐標(biāo)，后面是內(nèi)容和屬性。localStorage是瀏覽器函數(shù)毛甲，本地保存數(shù)據(jù)年叮，如果清空瀏覽器緩存后就失效了。在瀏覽器的開發(fā)者工具里能看到玻募。我們就借助localStorage來保存最高得分谋右。

保持最高得分.png

再來看看碰撞檢測里寫了一個方法collectMoon。

function collectMoon(player, moon) {
    playerTween.stop();
    
    score += 1;
    if(score - (level - 1) * 10 >= 10) {
        level += 1;
        resetSpeed();
    } 
    bang.play();//播放吃到月餅的聲音
    moon.kill();//銷毀月餅
    player.kill();//銷毀吃貨
    updateScore();//更新得分
    addMoon(); //添加一個新的月餅
    addPlayer();//添加一個新的吃貨
}
// 更新速度
function resetSpeed() {
    speed =  speed - level * 100 <= 100 ? 100 : speed;
    dropSpeed = dropSpeed - level * 100 <= 100 ? 100 : dropSpeed;
}

這個碰撞檢測是在start舞臺的update里調(diào)用的补箍，這個update方法會在引擎每次繪制的時候調(diào)用一次改执，一旦調(diào)用到這個方法里，說明吃貨跟月餅完美的接觸了坑雅，也就是吃到了月餅辈挂，我們需要增加得分，每次得分滿10分就給等級加一級裹粤，然后更新一下月餅下落的速度和吃貨下落的速度终蒂，因為要增加難度么。O(∩_∩)O

為了讓月餅的出現(xiàn)有隨機(jī)的效果遥诉，我們修改addMoon方法拇泣。其中的moonGroup是在舞臺的create方法里面添加的。

// 添加月餅
function addMoon() {
    var index = game.rnd.between(1, 7);//隨機(jī)一個1到7的數(shù)字矮锈，好創(chuàng)建對應(yīng)數(shù)字的月餅
    var moon = moonGroup.create(0, 0, index.toString());//創(chuàng)建月餅
    moon.anchor.set(0.5); // 設(shè)置演員錨點(diǎn)為中心點(diǎn)
    var x = game.width - moon.width / 2;
    var y = -moon.height / 2;
    moon.x = x;
    moon.y = y;
    var moonEnterTween = game.add.tween(moon).to({y : game.height / 2 }, 
        game.rnd.between(500, 1000), 'Bounce', true);
    moonEnterTween.onComplete.add(moveMoon, this, 0, moon);
}

接著添加一個游戲結(jié)束的場景霉翔。

game.states.stop = function() {
    this.preload = function() {
        this.add.sprite(0, 0, 'day');
        var menu = this.add.sprite(0,0, 'message');
        menu.x = (game.width - menu.width) / 2;
        menu.y = (game.height - menu.height) / 2;
        var button = this.add.button(0, 0, 'button', this.startGame);
        button.x = menu.x + (menu.width - button.width) / 2;
        button.y = menu.y + menu.height - button.height + 30;
        scoreText = game.add.text(Math.max(30, menu.x + 10), menu.y - 50, "-", {
            font:"bold 28px Arial",
            fill: "#000000"
        });
    },
    this.create = function() {
        updateScore();
    },
    this.startGame = function() {
        game.state.start('start');
    }
}
game.state.add('stop', game.states.stop);

因為吃貨的工作非常難，所以先添加這個場景苞笨，好讓吃貨失敗的時候跳轉(zhuǎn)過來债朵，不至于在吃貨失敗的時候舞臺失控。接著需要更新吃貨的部分瀑凝。

// 添加吃貨
function addPlayer() {
    player = game.add.sprite(0, 0, 'player');
    game.physics.arcade.enable(player);
    player.anchor.set(0.5);
    player.x = game.width / 2;
    player.y = game.height - player.height - 150;
    playerTween = game.add.tween(player).to({ y : game.height }, dropSpeed, 'Linear', true);
    playerTween.onComplete.add(gameOver, this);
    game.input.onDown.add(fire, this);
}
// 發(fā)射吃貨
function fire() {
    game.input.onDown.remove(fire, this);
    playerTween.stop();
    playerTween = game.add.tween(player).to({ y : -player.height }, 500, 'Linear', true);
    playerTween.onComplete.add(gameOver, this);
}

// 游戲結(jié)束
function gameOver() {
    localStorage.setItem("topScore", Math.max(score, topScore));//記錄最高得分
    updateScore();//更新顯示分?jǐn)?shù)
    music.stop();//停止播放背景音樂
    game.state.start('stop');//跳轉(zhuǎn)到游戲結(jié)束的舞臺
}

吃貨的任何一個位移完成都意味著游戲結(jié)束序芦，因為如果吃到月餅的時候，會在碰撞檢測的處理函數(shù)里更新得分粤咪，并添加新的吃貨和月餅谚中。

10.gif

宣傳二維碼圖片.png