终于到了重点了，前面所有的所有都是为这里做准备的，相信你对基础已经足够了解了，那就开始这个游戏的逻辑设计吧，这才是一个游戏的灵魂。

首先就是月饼的出场。

我们看下素材mooncake文件夹，这里有7个月饼，还有两个高级月饼盒子，这俩是高级货。我们要让月饼的出场够随机，不能每次都一样，然后在设计某种规则让高级月饼出场，吃掉高级月饼的得分跟吃掉普通月饼的得分也不一样。

得分记录和最高分统计

得给吃货一个努力的理由，就是不断超越。那就需要帮吃货统计下它自己的得分，和历史最高分。

游戏等级制度

我们需要一个游戏等级制度，理由就是随着游戏的进行，难度应该提升，而不是同样的一个难度，容易乏味。随着等级的提升，月饼应该落下的距离越来越高，并且滚动的速度越来越快。吃货的落幕也要越来越快。

游戏结束

什么情况下结束掉游戏呢？吃货没有吃到月饼，或者吃货就没有打算去吃，而是自己滑落并最终选择谢幕。

我们先来在定义宽度和高度的地方添加一些变量。

var level = 1;//等级，默认从1开始
var score = 0; //得分
var scoreText;//得分的文字说明，添加到舞台上
var topScore = 0;//最高得分
var speed = 1000;//月饼的滚动速度，默认1000豪秒
var dropSpeed = 10000;//吃货的下落速度，默认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; // 只能单指点击屏幕或鼠标（非多人游戏）
        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"
        });
        ///初始化状态
        score = 0;
        level = 1;
        updateScore();
    },
    this.create = function() {
        music.play('', 0, 1, true); // 一直播放背景音乐
        moonGroup = game.add.group();//创建月饼分组
        moonGroup.enableBody = true;
        addMoon();
        addPlayer();
        game.physics.arcade.collide(player, moonGroup);//对吃货和月饼组的月饼进行碰撞检测
    },
    this.update = function() {
        game.physics.arcade.overlap(player, moonGroup, collectMoon, null, this);//对吃货和月饼组的月饼进行碰撞检测
    }
}
// 更新得分
function updateScore() {
    scoreText.text = "得分：" + score + "    最高得分：" + Math.max(score, topScore);
}

game.add.text是添加一个行文字说明，前两个参数是坐标，后面是内容和属性。localStorage是浏览器函数，本地保存数据，如果清空浏览器缓存后就失效了。在浏览器的开发者工具里能看到。我们就借助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里调用的，这个update方法会在引擎每次绘制的时候调用一次，一旦调用到这个方法里，说明吃货跟月饼完美的接触了，也就是吃到了月饼，我们需要增加得分，每次得分满10分就给等级加一级，然后更新一下月饼下落的速度和吃货下落的速度，因为要增加难度么。O(∩_∩)O

为了让月饼的出现有随机的效果，我们修改addMoon方法。其中的moonGroup是在舞台的create方法里面添加的。

// 添加月饼
function addMoon() {
    var index = game.rnd.between(1, 7);//随机一个1到7的数字，好创建对应数字的月饼
    var moon = moonGroup.create(0, 0, index.toString());//创建月饼
    moon.anchor.set(0.5); // 设置演员锚点为中心点
    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);
}

接着添加一个游戏结束的场景。

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);

因为吃货的工作非常难，所以先添加这个场景，好让吃货失败的时候跳转过来，不至于在吃货失败的时候舞台失控。接着需要更新吃货的部分。

// 添加吃货
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);
}
// 发射吃货
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);
}

// 游戏结束
function gameOver() {
    localStorage.setItem("topScore", Math.max(score, topScore));//记录最高得分
    updateScore();//更新显示分数
    music.stop();//停止播放背景音乐
    game.state.start('stop');//跳转到游戏结束的舞台
}

吃货的任何一个位移完成都意味着游戏结束，因为如果吃到月饼的时候，会在碰撞检测的处理函数里更新得分，并添加新的吃货和月饼。

10.gif

宣传二维码图片.png