用Phaser来制作一个html5游戏——flappy bird （一）

game.States.preload=function(){
this.preload=function(){
varpreloadSprite=game.add.sprite(50,game.height/2,'loading');//创建显示loading进度的sprite
game.load.setPreloadSprite(preloadSprite);//用setPreloadSprite方法来实现动态进度条的效果

//以下为要加载的资源
game.load.image('background','assets/background.png');//游戏背景图
game.load.image('ground','assets/ground.png');//地面
game.load.image('title','assets/title.png');//游戏标题
game.load.spritesheet('bird','assets/bird.png',34,24,3);//鸟
game.load.image('btn','assets/start-button.png');//按钮
game.load.spritesheet('pipe','assets/pipes.png',54,320,2);//管道
game.load.bitmapFont('flappy_font','assets/fonts/flappyfont/flappyfont.png','assets/fonts/flappyfont/flappyfont.fnt');//显示分数的字体
game.load.audio('fly_sound','assets/flap.wav');//飞翔的音效
game.load.audio('score_sound','assets/score.wav');//得分的音效
game.load.audio('hit_pipe_sound','assets/pipe-hit.wav');//撞击管道的音效
game.load.audio('hit_ground_sound','assets/ouch.wav');//撞击地面的音效

game.load.image('ready_text','assets/get-ready.png');//getready图片
game.load.image('play_tip','assets/instructions.png');//玩法提示图片
game.load.image('game_over','assets/gameover.png');//gameover图片
game.load.image('score_board','assets/scoreboard.png');//得分板
}
this.create=function(){
game.state.start('menu');//当以上所有资源都加载完成后就可以进入menu游戏菜单场景了
}
}

game.States.menu=function(){
this.create=function(){
varbg=game.add.tileSprite(0,0,game.width,game.height,'background');//当作背景的tileSprite
varground=game.add.tileSprite(0,game.height-112,game.width,112,'ground').autoScroll(-100,0);//当作地面的tileSprite
bg.autoScroll(-10,0);//让背景动起来
ground.autoScroll(-100,0);//让地面动起来
}
}

spritesheet(key,url,frameWidth,frameHeight,frameMax,margin,spacing)

game.States.menu=function(){
this.create=function(){
......

vartitleGroup=game.add.group();//创建存放标题的组
titleGroup.create(0,0,'title');//通过组的create方法创建标题图片并添加到组里
varbird=titleGroup.create(190,10,'bird');//创建bird对象并添加到组里
bird.animations.add('fly');//给鸟添加动画
bird.animations.play('fly',12,true);//播放动画
titleGroup.x=35;//调整组的水平位置
titleGroup.y=100;//调整组的垂直位置
game.add.tween(titleGroup).to({y:120},1000,null,true,0,Number.MAX_VALUE,true);//对这个组添加一个tween动画，让它不停的上下移动
}
}

to(properties,duration,ease,autoStart,delay,repeat,yoyo)

game.States.menu=function(){
this.create=function(){
......

varbtn=game.add.button(game.width/2,game.height/2,'btn',function(){//添加一个按钮
game.state.start('play');//点击按钮时跳转到play场景
});
btn.anchor.setTo(0.5,0.5);//设置按钮的中心点
}
}

game.States.menu=function(){
this.create=function(){
game.add.tileSprite(0,0,game.width,game.height,'background').autoScroll(-10,0);//背景图
game.add.tileSprite(0,game.height-112,game.width,112,'ground').autoScroll(-100,0);//地板
vartitleGroup=game.add.group();//创建存放标题的组
titleGroup.create(0,0,'title');//标题
varbird=titleGroup.create(190,10,'bird');//添加bird到组里
bird.animations.add('fly');//添加动画
bird.animations.play('fly',12,true);//播放动画
titleGroup.x=35;
titleGroup.y=100;
game.add.tween(titleGroup).to({y:120},1000,null,true,0,Number.MAX_VALUE,true);//标题的补间动画
varbtn=game.add.button(game.width/2,game.height/2,'btn',function(){//按钮
game.state.start('play');
});
btn.anchor.setTo(0.5,0.5);
}
}