Phaser实现飞机大战

来源：未知 时间：2017-11-15 14:13 阅读数： 作者：xxadmin

[导读] 作者：channingbreeze 日期：2016-10-04 相信微信的飞机大战游戏，大家还记忆犹新。是的，H5的小游戏就是这样，拥有病毒性传播能力。今天，我就带着大家用phaser来实现一款简版的飞机大战...

作者：channingbreeze

日期：2016-10-04

相信微信的飞机大战游戏，大家还记忆犹新。是的，H5的小游戏就是这样，拥有病毒性传播能力。今天，我就带着大家用phaser来实现一款简版的飞机大战游戏，除了简单的飞机大战功能，还能自定义微信的分享，一起来吧。

先给一个线上地址，大家体验一下，鼠标拖动飞机可以进行移动。。

进行简单分析之后，我们发现飞机大战主要有三个场景，开始场景，游戏中场景和结束场景。

开始场景

开始场景其实很简单，一个背景，一个飞机，一个开始按钮和一个版权说明。背景，我们使用tileSprite，因为背景移动的时候，我们要使用它的autoScroll方法。版权说明，我们直接使用image，因为它没有任何动作。飞机我们使用sprite，它有一个帧动画要播放，而按钮，我们使用button，点击的时候，跳转到游戏中场景。

game.States.main = function() {   this.create = function() {     // 背景     var bg = game.add.tileSprite(0, 0, game.width, game.height, 'background');     // 版权     this.copyright = game.add.image(12, game.height - 16, 'copyright');     // 我的飞机     this.myplane = game.add.sprite(100, 100, 'myplane');     this.myplane.animations.add('fly');     this.myplane.animations.play('fly', 12, true);     // 开始按钮     this.startbutton = game.add.button(70, 200, 'startbutton', this.onStartClick, this, 1, 1, 0);   };   this.onStartClick = function() {     game.state.start('start');   }; };

游戏中场景

游戏中场景是最复杂的一个场景，我们同样需要添加背景，添加飞机，这些和上面是一样的。然后，我们让背景开始滚动，给飞机加上一个tween动画，当动画结束的时候，开始发射子弹，显示分数，敌机也开始进入。同时，还要处理敌机被子弹打中时的逻辑，敌机爆炸的效果，以及我方被子弹打中的逻辑和我方的爆炸效果等等。所以我们一点一点来分析。

首先打开物理引擎，然后把背景加进来，让它自动滚动。然后把我们的飞机加进来，让它执行帧动画，同时设置它的碰撞规则，让它不能够超出游戏区域的边界。

在进入该场景的时候，我们让飞机直接进行一个tween动画，从中间到达底部，然后开始调用onStart。

this.create = function() {   // 物理系统   game.physics.startSystem(Phaser.Physics.ARCADE);   // 背景   var bg = game.add.tileSprite(0, 0, game.width, game.height, 'background');   bg.autoScroll(0, 20);   // 我的飞机   this.myplane = game.add.sprite(100, 100, 'myplane');   this.myplane.animations.add('fly');   this.myplane.animations.play('fly', 12, true);   game.physics.arcade.enable(this.myplane);   this.myplane.body.collideWorldBounds = true;   this.myplane.level = 2;   // 动画   var tween = game.add.tween(this.myplane).to({y: game.height - 40}, 1000, Phaser.Easing.Sinusoidal.InOut, true);   tween.onComplete.add(this.onStart, this); };

首先需要处理的就是发射子弹和鼠标拖拽。鼠标拖拽在phaser中十分简单，只要设置inputEnabled为true，然后enableDrag就行了。飞机不能拖拽出屏幕，当然，这一点我们已经在之前确保过了。

子弹的处理倒是有一定的技巧。首先要考虑的是，子弹要从飞机的首部发射出来，还得连续发射，超出边界的时候需要释放，如果一直进行子弹对象的创建和销毁，会一直进行内存的创建与回收，这样会浪费很多资源。

对于这种情况，一个比较通用的解决办法是对象池。它的原理是，先初始化一批对象，放到一个池子里，然后需要使用的时候，从池子里拿一个出来，再使用完成后，又放回池子里。这样就减少了不必要的内存创建与回收。this.mybullets.createMultiple(50, 'mybullet');就是一次性创建50个子弹，相当于一个对象池。然后我们设置该组的对象，在超过游戏边界的时候，进行回收。

this.onStart = function() {   // 我的子弹   this.mybullets = game.add.group();   this.mybullets.enableBody = true;   this.mybullets.createMultiple(50, 'mybullet');   this.mybullets.setAll('outOfBoundsKill', true);   this.mybullets.setAll('checkWorldBounds', true);   this.myStartFire = true;   this.bulletTime = 0;   // 我的飞机允许拖拽   this.myplane.inputEnabled = true;   this.myplane.input.enableDrag(false); };

敌机的逻辑和子弹其实很像，每种敌机，也都是从一个池子里拿出来，然后，当超过边界或者被子弹消灭之后，会被kill，就相当于放回池子里了。