回忆
上一节我们完成了游戏中心场景play的大部份事情,能操控主角,能随机掉落苹果了。那末这一节我们来完成游戏盈余的部份,主假如盘算分数、怎样完毕游戏等等。
正式最先
第一步:接住苹果得分
主角到场物理活动
检测打仗事宜
接到苹果后,让苹果消逝,并加分
对主角的修正:
game.physics.enable(man); // 到场物理活动
man.body.allowGravity = false; // 消灭重力影响
检测打仗事宜要写在play场景的update生命周期内,意义为每次更新视图都会去检测主角和苹果是不是有打仗,有的话,则实行pickApple要领。
this.update = function() {
// 监听打仗事宜
game.physics.arcade.overlap(man, apples, pickApple, null, this);
}
打仗事宜则异常简朴,挪用apple的kill要领,则能够让苹果从场景中消灭。同时,我们更新一下分数。
// 打仗事宜
function pickApple(man, apple) {
apple.kill();
title.text = ++score;
}
示例代码:https://jsfiddle.net/Vincent_…
第二步:苹果掉地上,游戏完毕
检测苹果与场景边沿的打仗
一旦打仗,则游戏完毕,跳转到完毕场景
安排完毕场景,并显现分数
为完毕场景增加点击事宜,点击后再玩一次
onWorldBounds属性可设置为一个Phaser.Signal对象,当开启了collideWorldBounds而且打仗到场景边沿时,将触发Signal的事宜。别的,这个特别的Signal供应了上下摆布四个值来让我们推断物体究竟打仗的是哪条边,考虑到有些苹果会打仗到摆布双方,我们只在和下边境打仗的时刻才完毕游戏。
// 设置苹果与游戏边沿碰撞,
apple.body.collideWorldBounds = true;
apple.body.onWorldBounds = new Phaser.Signal();
apple.body.onWorldBounds.add(function(apple, up, down, left, right) {
if (down) {
apple.kill();
game.state.start('over', true, false, score);
}
});
安排完毕场景,和之前安排其他场景一样,增加背景、文本等等。差别的是此次多了init这个生命周期,主假如因为在play场景中跳转到这个场景时会带上score,这个score会传入init这个生命周期的要领中。
// 完毕场景
over: function() {
var score = 0;
this.init = function() {
score = arguments[0];
}
this.create = function() {
// 增加背景
var bg = game.add.image(0, 0, 'bg');
bg.width = game.world.width;
bg.height = game.world.height;
// 增加文本
var title = game.add.text(game.world.centerX, game.world.height * 0.25, '游戏完毕', {
fontSize: '40px',
fontWeight: 'bold',
fill: '#f2bb15'
});
title.anchor.setTo(0.5, 0.5);
var scoreStr = '你的得分是:'+score+'分';
var scoreText = game.add.text(game.world.centerX, game.world.height * 0.4, scoreStr, {
fontSize: '30px',
fontWeight: 'bold',
fill: '#f2bb15'
});
scoreText.anchor.setTo(0.5, 0.5);
}
}
末了我们在完毕场景增加一个点击事宜,点击后跳转到play场景,再玩一次。
var remind = game.add.text(game.world.centerX, game.world.height * 0.6, '点击恣意位置再玩一次', {
fontSize: '20px',
fontWeight: 'bold',
fill: '#f2bb15'
});
remind.anchor.setTo(0.5, 0.5);
// 增加点击事宜
game.input.onTap.add(function() {
game.state.start('play');
});
示例代码:https://jsfiddle.net/Vincent_…
第三步:增加得分结果
为差别苹果设置差别的得分
接到苹果时增加对应的得分图片到场景中
为得分图片增加过渡结果
先来引见一下Phaser的过渡:
要运用过渡,首先要建立过渡对象,传入的是要运用过渡结果的对象,比方apple。
// 建立过渡对象
game.add.tween(obj);
然后运用得最多的是Tween的to要领,也就是过渡到指定状况的要领。能够指定过渡时候曲线,耽误、是不是反复、过渡时候等等参数,运用Tween已能够完成大部份的动画结果。
因而我们修正之前的pickApple要领,也就是接到苹果后的要领。
function pickApple(man, apple) {
var point = 1;
var img = 'one';
if (apple.type === 'red') {
point = 3;
img = 'three';
} else if (apple.type === 'yellow') {
point = 5;
img = 'five';
}
// 增加得分图片
var goal = game.add.image(apple.x, apple.y, img);
var goalImg = game.cache.getImage(img);
goal.width = apple.width;
goal.height = goal.width / (goalImg.width / goalImg.height);
goal.alpha = 0;
// 增加过渡结果
var showTween = game.add.tween(goal).to({
alpha: 1,
y: goal.y - 20
}, 100, Phaser.Easing.Linear.None, true, 0, 0, false);
showTween.onComplete.add(function() {
var hideTween = game.add.tween(goal).to({
alpha: 0,
y: goal.y - 20
}, 100, Phaser.Easing.Linear.None, true, 200, 0, false);
hideTween.onComplete.add(function() {
goal.kill();
});
});
// 更新分数
score += point;
title.text = score;
// 消灭苹果
apple.kill();
}
示例代码:https://jsfiddle.net/Vincent_…
第四步:到场炸弹,雄厚音效
随机掉落炸弹
到场接到苹果或炸弹的音效
接到炸弹后游戏完毕
要想随机掉落炸弹异常简朴,只需要在之前的appleTypes内里到场bomb即可,同时假若有其他东西(比方梨子)要到场的话也能够如许。
var appleTypes = ['green', 'red', 'yellow', 'bomb'];
同时,因为我们不接炸弹,因而炸弹掉到地上也不会致使游戏完毕,因而修正一下代码:
apple.body.onWorldBounds.add(function(apple, up, down, left, right) {
if (down) {
apple.kill();
if (apple.type !== 'bomb') game.state.start('over', true, false, score);
}
});
接到苹果和炸弹时播放音效,这个很简朴,直接挪用音频对象的play
要领即可。接到炸弹后完毕和苹果掉地上的挪用体式格局是一样的。我们继承来修正pickApple要领:
function pickApple(man, apple) {
if (apple.type === 'bomb') {
// 播放音效
bombMusic.play();
game.state.start('over', true, false, score);
} else {
var point = 1;
var img = 'one';
if (apple.type === 'red') {
point = 3;
img = 'three';
} else if (apple.type === 'yellow') {
point = 5;
img = 'five';
}
// 增加得分图片
var goal = game.add.image(apple.x, apple.y, img);
var goalImg = game.cache.getImage(img);
goal.width = apple.width;
goal.height = goal.width / (goalImg.width / goalImg.height);
goal.alpha = 0;
// 增加过渡结果
var showTween = game.add.tween(goal).to({
alpha: 1,
y: goal.y - 20
}, 100, Phaser.Easing.Linear.None, true, 0, 0, false);
showTween.onComplete.add(function() {
var hideTween = game.add.tween(goal).to({
alpha: 0,
y: goal.y - 20
}, 100, Phaser.Easing.Linear.None, true, 200, 0, false);
hideTween.onComplete.add(function() {
goal.kill();
});
});
// 更新分数
score += point;
title.text = score;
// 消灭苹果
apple.kill();
// 播放音效
scoreMusic.play();
}
}
示例代码:https://jsfiddle.net/Vincent_…
功德圆满
游戏终究完成了它的逻辑,算是一个完全的游戏了。固然了,结果远未到达抱负,要说的话,游戏水异常深,这个系列的教程只是从零到一,指导人人打仗并上手Phaser.js。
这里能够抛出一些优化的方向,人人也能够当作Phaser的演习问题去做:
游戏中字体的替换
地面应当和小恐龙底部持平,而非屏幕底部,怎样完成?
如今三种苹果和炸弹的涌现几率是随机的,怎样调解它们各自的涌现几率?
如今苹果和炸弹涌现的时候距离是牢固的,怎样跟着游戏举行加速节拍?
怎样调解游戏难度梯度?
如今炸弹和苹果有可能会相邻涌现,致使很难接到苹果而不遇到炸弹,怎样防止?
……
原本没想写这么多点的,一不小心。可见游戏优化的空间照样很大的,愿望人人能继承挖掘Phaser.js的潜力,做出更多的优异的小游戏~
Github地点:https://github.com/VincentPat…
扫描下面二维码的话也能够用手机检察结果了:
未完待续…?
回忆:
假如接下来有时候整顿的话,会补充一篇Phaser.js的实战技能和注意事项。本系列文章写作地道个人喜好,若有写得不严谨或不正确的处所,还请多多见谅。第一次花这么长时候写手艺分享,照样用那句话鼓励本身:
愿望我是真的喜好编程,由始至终。
假如你喜好这几篇文章,或者说从零到一这个系列,给我点个赞,我就得偿所愿了。