终于到了重点了，前面所有的所有都是为这里做准备的，相信你对基础已经足够了解了，那就开始这个游戏的逻辑设计吧，这才是一个游戏的灵魂。
首先就是月饼的出场。
我们看下素材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
这速度有点点虐心┭┮﹏┭┮。欢迎新手朋友们来讨论。
本节代码下载地址：
码云
github
宣传二维码图片.png