啊哈 phaser制作小游戏flappy bird（1）
看到phaser的world和camera玩的已如此之好，果断自己操练了一个小游戏出来玩玩。记录一下啦，加深一下印象。
首先想起他引擎一样。在html5中添加一个canvas然后实例化一个游戏对象来实现的。不过phaser是通过DOM父级元素的ID，自己动态添加出这个canvas来的。所以html5的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>game</title>
<script src="js/phaser.js"></script>
</head>
<body>
<div id="game"></div>
<script> var game = new Phaser.Game(288,505,Phaser.AUTO,'game'); //实例化一个Phaser的游戏实例 </script>
</body>
</html>里面的new phaser实例化一个game出来。里面的参数情况是这样的。
Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)width是画布的宽度。
height是画布的高度。
renderer是按照什么方式渲染图像Phaser.CANVAS 为使用html5画布，Phaser.WEBGL 为使用性能更加好的WebGL来渲染，Phaser.AUTO为自动侦测，如果浏览器支持WebGL则使用WebGL,否则使用Canvas。
parent是规定这个画布的父级元素可以是id，也可以使dom元素本身。
phaser会自动创建一个canvas在这个父级元素里面的。
state是场景。虽然应该改名叫scene才对啊。后面创建了场景之后就把最先运行的场景夹在进来啦。我上面没有填。后面再加吧。
transparent: 是否使用透明的canvas背景
antialias: 是否启用抗锯齿
physicsConfig: 游戏物理系统配置参数
以上所有参数都是可选的。
创建场景。实在太简单了好吗？！只要在场景里面有下面这样的格式就可以了。就是一个合法的场景。
//state可以是一个自定义对象
var state1 = {
preload : function(){ },
create : function(){ },
update : function(){ }
}
//state也可以是一个构造函数
var state2 = function(){
this.preload = function(){ };
this.create = function(){ };
this.update = function(){ };
}
//只要存在preload、create、update三个方法中的一个就可以了
var state3 = function(){
this.update = function(){ };
}
//当然state里也可以存在其他属性或方法
var state4 = function(){
this.create = function(){ };
this.aaa = function(){ }; //其他方法
this.bbb = 'hello'; //其他属性
}哈哈太简单喽。
var game = new Phaser.Game(288,505,Phaser.AUTO,'game');
game.States = {}; //创建一个对象来存放要用到的state
game.States.boot = function(){ ... } //boot场景，用来做一些游戏启动前的准备
game.States.prelaod = function(){ ... } //prelaod场景，用来显示资源加载进度
game.States.menu = function(){ ... } //menu场景，游戏菜单
game.States.play = function(){ ... } //play场景，正式的游戏部分
//把定义好的场景添加到游戏中
game.state.add('boot',game.States.boot);
game.state.add('preload',game.States.preload);
game.state.add('menu',game.States.menu);
game.state.add('play',game.States.play);
//调用boot场景来启动游戏
game.state.start('boot');创建了四个场景。boot场景是用来加载loading界面的资源。你想，loading界面加载的是loading之后游戏的资源，那loading的资源就在loading之前加载。其他的就不说了。
然后在boot里面怎么写呢
game.States.boot = function(){
this.preload = function(){
game.load.image('loading','assets/preloader.gif'); //加载进度条图片资源
};
this.create = function(){
game.state.start('preload'); //加载完成后，调用preload场景
};
}在场景加载完成前preload时，定义它夹在一个loading的gif图像。在它加载完成后就调用preload场景。
然后是preload界面。
game.States.preload = function(){
this.preload = function(){
var preloadSprite = 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'); //get ready图片
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.load.preload实现加载进度条，并加载其他的资源，加载完毕就进去menu场景。
game.load.spritesheet(‘bird’,’assets/bird.png’,34,24,3); 这一段是把一张三只小鸟的图片加载成3个精灵放在sheet里面，为后面动画做准备。
下面是menu场景。
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); //地板
var titleGroup = game.add.group(); //创建存放标题的组
titleGroup.create(0,0,’title’); //标题
var bird = 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); //标题的补间动画
var btn = game.add.button(game.width/2,game.height/2,’btn’,function(){//按钮
game.state.start(‘play’);
});
btn.anchor.setTo(0.5,0.5);
}
}
autoscroll是什么意思捏，就是自己不停的动。意思是让背景和地面不同速度地运动。
titleGroup是一个组的概念，把一个小组合放到一起操作。比如要让小鸟和文字一起上下缓动，就把它们放在一个组里面。
var titleGroup = game.add.group(); //创建存放标题的组
titleGroup.create(0,0,'title'); //标题
var bird = 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); //标题的补间动画仔细看这一小段，发现什么了呢？就是定义一个组，再组中创建一个标题，再组中创建一个小鸟，给小鸟新建一个fly动画，让小鸟执行fly动画，最后给这个组一个动作。这个动作具体参数如下：
to(properties, duration, ease, autoStart, delay, repeat, yoyo)properties：里面包含一个js’属性，即要让你的对象变成什么样。
duration：显而易见，间隔时间。毫秒。
ease ：是否缓动，默认为匀速动画
autostart：是否自启动
delay：动画开始的延迟时间 毫秒。
repeat：动画重复的次数，如果需要动画永远循环，则把该值设为 Number.MAX_VALUE
yoyo : 如果该值为true,则动画会自动反转
最后添加了一个btn加了点击时间又设置了锚点。menu没有家在资源，只有一个create方法就好啦。。