Phaserjs基础教程第九节：代码实战-模拟雷电

      由于到年底了，事情比较多，也比较烦，所以这段代码的书写和调试都是断断续续进行的，拖的时间比较久，不过事先给自己定过目标，一定要在年前完成这段代码，今天终于写完了，赶紧发上来。

      讲解代码之前，我们首先了解一下Phaserjs的状态管理，状态管理其实很简单，我就没有单独开出一节来讲解。

      大家都知道，在玩一个简单的网页游戏的时候，一般会有加载页、游戏菜单、游戏页等几个页面，如果要在一个游戏中实现这几个页面的切换，如果单纯的使用条件判断会非常麻烦，于是，Phaserjs就提供了一个非常简单快捷的状态管理，每个状态就相当于我们之前做的一个游戏，而且切换也非常方便，下面我们先来看一个最简单的状态代码：

//创建一个游戏，不适用默认状态
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example');

//第一个状态：显示菜单页面
BasicGame.Boot = function(game){
	
};
BasicGame.Boot.prototype = {
	init: function(){
		//多点触摸设置为0
		this.input.maxPointers = 0;
	},
	preload: function(){
		//加载菜单页面需要使用的字体
		game.load.bitmapFont('nokia', 'assets/fonts/bitmapFonts/nokia.png', 'assets/fonts/bitmapFonts/nokia.xml');
	},
	create: function(){
		//显示菜单页面内容
		text1 = game.add.bitmapText(400, 200, 'nokia', 'RAIDEN SIMULATION', 64);
	}
};
//定义boot状态关键字
game.state.add('Boot', BasicGame.Boot);
//启动boot状态
game.state.start('Boot');

      怎么样，看起来是不是很简单？看到熟悉的preload、create，是不是感觉很亲切？如果有多个页面的话，像这样多建几个状态，然后相互间添加上切换的操作，一个简单的游戏就成了。

    我这里讲的过于简单，你可以百度《深入分析Phaser状态管理》去找这个pdf文档，也可以直接通过这个链接https://wenku.baidu.com/view/1d270ab70c22590102029d99.html去百度文库免费下载文档。

      下面我们进入正题，理智的分析一下要模拟雷电这款游戏，我们要实现哪些功能：

      1.新建两个状态，管理菜单页面和游戏页面，加载相关的素材和资源，添加两个状态之间的切换功能；

      2.游戏页面中，背景要有移动的效果，这种方式可以通过重设游戏世界大小等方式实现，不过我选择了移动游戏背景，来模拟相机的移动，造成位移的效果；

      3.添加自己控制的小飞机，可以发射子弹，炸弹（此功能未完成，已省略……），上下左右移动，无法超越窗口边界；

      4.使用定时器添加陨石、敌机（可以发射子弹）、敌方炮台（已省略……）、最后会出现boss（会发射子弹，寿命很长）；

      5.碰撞（覆盖）检测，己方飞机（或子弹）与敌方各种物体的相互碰撞（覆盖）的检测；

      6.功能优化：己方小飞机死亡后添加2秒钟的无敌效果，boss发射子弹会有间隔等。

      但是在实际操作过程中，碰到了一堆问题，不过也都勉强解决了，算了，直接看代码吧，注释都已经写了，虽然有点乱，还是能看清楚的，代码太长，直接发出来估计大家也不想看，打包上传到了下载中心，链接：源码下载地址，现在没有最低0分的设置了，2分，不多。下面贴两段其中的代码吧，原理简单，一看就会。

      第一段，给小飞机加上无敌的特效：

//给小飞机添加爆炸后重生的无敌特效
	    player.flicker = function(){
	    	invincible = true;
	    	var playertween = game.add.tween(player).to({ alpha: 0 }, 100, Phaser.Easing.Linear.None, true, 0, 10, true);
	    	playertween.onComplete.addOnce(cancelInvincible);
	    }

      第二段，小飞机和boss相撞：

// 本机撞击boss
function bossHitPlayer(boss, plane){
	// boss生命值-10
    boss.life -= 10;
    if(boss.life < 0){
    	boss.kill();
    	bossBullets.destroy();
    	clearTimeout(timer4);
    	clearTimeout(timer5);
    	var explosionAnimation = explosions.getFirstExists(false);
	    explosionAnimation.scale.setTo(3, 3);
	    explosionAnimation.reset(boss.x - 8, boss.y - 80);
	    explosionAnimation.play('explosion', 30, false, true);
    }
    
    // 生命次数-1
    lives -= 1;
    if(lives <= 0){
    	tips2.text = 'LIFE X 0';
    }
    else{
    	tips2.text = 'LIFE X ' + lives;
    }
    plane.flicker();
    
    // 触发爆炸特效
    var explosionAnimation = explosions.getFirstExists(false);
    explosionAnimation.reset(plane.x + 14, plane.y + 10);
    explosionAnimation.play('explosion', 30, false, true);
    if(lives < 0){
      	plane.kill();
    }
}

      想要掌握一个框架，除了多看多学之外，一定要多练，只有多练才能碰到更多的问题，在解决问题的时候学到更多的东西。 

      好了，这套系列教程就先到这里，预祝大家在学习之后做出大火的游戏！