phaser游戏入门4（接金币游戏2）
上节课构建了游戏基本架构，有开始页，有游戏页，金币掉落，人物移动，碰撞检测都实现了，
现在开始优化。
加点音乐呗
当然先要加载音乐资源，和图片类似
game.load.audio('name','url');
使用的时候是这样
var m1=game.add.audio('name');
m1.play();
循环播放可以设置
m1.loopFull(0.6);//里边的参数是声音大小，不加也可以，如果觉得背景音乐太吵，可以加个大小去限制他。
分数的展示，分数的刷新需要在金币被吃掉的时候
score++分值加1
而掉落的金币扣除数可以在其超出边界的时候扣除
lost_score--;
而当掉落金币数大于10的时候，你可以结束游戏，结束游戏的方式就是重止update,我们有个布尔值start_kg就是在这个时候发挥作用了
下面看完整代码
//构建游戏 第一第二个参数是游戏屏幕的宽高，这里设置的是自适应屏幕宽高，第三个参数是渲染的方式，这里采用基础的canvas，可以无需服务器就能直接查看结果。如果换成WEBGL，渲染效率高，但是需要设备支持WEBGL，不布置到服务器上无法查看结果
//第四个参数是指定canvas附着的div 这里可以设置为null，第五个参数游戏开始时三个阶段。第一个阶段是预载静态资源。第二初始化游戏 第三游戏渲染更新。
var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'jjb', { preload:preload,create: create,update:update });
var w=null;
var h=null;
var score=0;//记录分数
var lost_score=0;//记录失去的金币
var start_kg=false;//游戏循环更新开关 反复加载金币
var jb_group=null;//储存金币的容器
var player=null;//玩家
var ks_bt=null;//开始按钮
var gds_bg=null;//背景
var dis_score=null;//展示分数
var dis_lost_score=null;//展示掉落的金币
var bgm=null;//背景音乐
function preload(){
///加载玩家
game.load.image("player","./res/player.png");
//金币
game.load.image("jb","./res/coin.png");
//开始
game.load.image("ks","./res/ks.png");
//重新开始
game.load.image("restart","./res/restart.png");
//背景
game.load.image("bg","./res/bg.jpg");
game.load.audio("bgm",['./res/bgm.mp3']);//加载音乐资源
}
function create() {
//game.add.text(100,100,"点击开始",{font: "65px Arial", fill: "#ff0044", align: "center" });
w=game.world.width;
h=game.world.height;
//先创建背景
gds_bg=game.add.sprite(0,0,'bg');
gds_bg.width=w;
gds_bg.height=h;
//创建开始按钮
ks_bt=game.add.button(w/2,h/2,'ks',function(){
//这里写一些点击按钮后的逻辑
ks_bt.destroy();//点击后销毁按钮
game_start();//游戏开始
});
ks_bt.width=0.25*w;
ks_bt.height=0.25*w;
ks_bt.anchor.set(0.5,0.5);//设置中心点在图片中心;
}
function game_start(){
bgm=game.add.audio('bgm');
bgm.loopFull(0.6);//循环背景音乐
game.physics.startSystem(Phaser.Physics.ARCADE);
//创建金币群
jb_group=game.add.physicsGroup();
//创建玩家
player=game.add.sprite(w/2,h*0.9,'player');
player.width=w*0.2;
player.height=w*0.2;
player.anchor.set(0.5,0.5);
game.physics.arcade.enable(player);
dis_score=game.add.text(w/4,h*0.15,"score"+score,{font: "55px Arial", fill: "#ff0044", align: "center" });
dis_score.anchor.set(0.5,0.5);
dis_lost_score=game.add.text(w*3/4,h*0.15,"lost"+lost_score,{font: "55px Arial", fill: "#ff0044", align: "center" });
dis_lost_score.anchor.set(0.5,0.5);
//游戏循环开关打开
start_kg=true;
//鼠标 指针移动时调用
game.input.addMoveCallback(function(e){
//鼠标或指针移动时调用
if(start_kg){
player.x=e.x
}
});
}
//创建金币
function create_jb(){
if(jb_group){
if(jb_group.children.length<5){
//var k=jb_group.create(Math.random()*w,-(Math.random()*300),'jb');
var k=jb_group.create(game.rnd.between(0, w), game.rnd.between(-300, 0),"jb");
k.width=w*0.1;
k.height=w*0.1;
k.anchor.set(0.5,0.5);
}
}
}
//移动金币
function move_jb(){
for(var i=0;ih){
jb_group.children[i].x=(Math.random()*w)
jb_group.children[i].y=-(Math.random()*300)
lost_score+=1;
dis_lost_score.text="lost"+lost_score;//刷新丢失金币数
if(lost_score>=10){
start_kg=false;
over();
}
}
}
}
function over(){
var ov=game.add.text(w/2-80,h/2,"游戏结束！",{font: "65px Arial", fill: "#ffff00", align: "center" });
ov.anchor.set(0.5,0.5);
var restart=game.add.button(w/2,h/2+80,'restart',function(){
ov.destroy();
restart.destroy();
score=0;
lost_score=0;
dis_score.text="score"+score;
dis_lost_score.text="lost"+lost_score;
start_kg=true;
});
restart.width=w*0.2;
restart.height=w*0.2;
restart.anchor.set(0.5,0.5);
}
//碰撞检测
function hitTest (){
game.physics.arcade.collide(player, jb_group, collisionHandler, processHandler, this);
}
function processHandler (pla, jb) {
return true;
}
function collisionHandler (pla, jb) {
jb.kill();//金币消失
jb.destroy();
score++;
dis_score.text="score"+score;//刷新分数
}
function update(){
if(start_kg){
create_jb();
move_jb();
hitTest();
}
}
demo4下载地址https://download.csdn.net/download/tx101q/10849369