1、多飞机多子弹碰撞

在实现多飞机与多子弹的碰撞过程中，有两个难点需要注意：
第一：如何存储多个飞机和多个子弹？
第二：多个飞机与多个子弹的碰撞判断如何实现？

第一：如何存储多个飞机和多个子弹？
如果程序需要同时存储多个数据的话，最好的解决办法就是数组。
所以，我们可以定义两个数组，分别存储多个飞机和多个子弹。

创建存储飞机的数组
飞机数组enemyList，用于存储创建的所有飞机。
多飞机、多子弹碰撞 - 图1
创建存储子弹的数组
子弹数组bulletList，用于存储创建的所有子弹。
多飞机、多子弹碰撞 - 图2

第二：多飞机与多子弹的碰撞判断如何实现？
多飞机与多子弹的碰撞，需要我们拿着每一个子弹与每一个飞机分别做碰撞判断。

原理如下：
多飞机、多子弹碰撞 - 图3

碰撞关键代码：
for(var i=0;ivar bullet = bulletList[i];
for(var j=0;jvar enemy = enemyList[i];
//碰撞判断相关代码
}
}

2.游戏暂停、继续

  1. var app = new PIXI.Application(400, 600);
  2. document.body.appendChild(app.view);
  4. var enemys = [];
  5. for(var i = 0; i < 8; i ++) {
  6.     var enemy = PIXI.Sprite.fromImage("res/plane/enemy_04.png");
  7.     app.stage.addChild(enemy);
  8.     enemy.x = 70 * i;
  9.     enemy.y = 100;
  10.     enemy.anchor.set(0.5,0.5);
  11.     enemys.push(enemy);
  12. }
  14. var plane = PIXI.Sprite.fromImage("res/plane/plane_blue_01.png");
  15. plane.anchor.set(0.5,0.5);
  16. plane.x = 200;
  17. plane.y = 500;
  18. app.stage.addChild(plane);
  20. app.stage.interactive=true;
  21. app.stage.on('mousemove', onMove);
  22. function onMove(event) {
  23.     var pos=event.data.getLocalPosition(app.stage);
  24.     plane.x = pos.x;
  25.     plane.y = pos.y;
  26. }
  28. var isMove = true;
  30. var pause = new PIXI.Sprite.fromImage("res/plane/ui/ui_new_btn_png_03.png");
  31. pause.x = 340;
  32. pause.y = 10;
  33. app.stage.addChild(pause);
  34. pause.interactive = true;
  35. pause.on("click",function(){
  36.     pause.visible = false;
  37.     goOn.visible = true;
  38.     isMove = false;
  39. });
  41. var goOn = new PIXI.Sprite.fromImage("res/plane/ui/ui_new_battle_png_03.png");
  42. goOn.x = 130;
  43. goOn.y = 250;
  44. goOn.visible = false;
  45. app.stage.addChild(goOn);
  46. goOn.interactive = true;
  47. goOn.on("click",function(){
  48.     pause.visible = true;
  49.     goOn.visible = false;
  50.     isMove = true;
  51. });
  53. var bulletArr = [];
  55. var fireTime = 0;
  56. var fireSubTime = 5;
  57. function fire() {
  58.     if(fireTime == 0) {
  59.         var bullet = PIXI.Sprite.fromImage("res/plane/bullet_01.png");
  60.         app.stage.addChild(bullet);
  61.         bullet.y = plane.y;
  62.         bullet.x = plane.x;
  63.         bullet.anchor.set(0.5,0.5);
  64.         bulletArr.push(bullet);
  65.         fireTime = fireSubTime;
  66.     } 
  67.     fireTime --;
  68. }
  70. app.ticker.add(animate);
  71. function animate() {
  72.     if(isMove){
  73.         fire();
  74.         enemyMove();
  75.         bulletMove();
  76.         bulletCrash();
  77.     }
  78. }
  80. function enemyMove() {
  81.     for(var i = 0; i < enemys.length; i ++) {
  82.         var enemy = enemys[i];
  83.         enemy.y += 4;
  84.         if(enemy.y > 800) {
  85.             enemy.y = -100;
  86.         }
  87.     }
  88. }
  90. function bulletMove() {
  91.     for(var i = 0; i < bulletArr.length; i ++) {
  92.         var bullet = bulletArr[i];
  93.         bullet.y -= 30;
  94.     }
  95. }
  97. function bulletCrash(){
  98.     for(var j = 0; j < bulletArr.length; j ++) {
  99.         var bullet = bulletArr[j];
  100.         for(var i = 0; i < enemys.length; i ++) {
  101.             var enemy = enemys[i];
  102.             var pos = (bullet.x - enemy.x) * (bullet.x - enemy.x) + (bullet.y - enemy.y) * (bullet.y - enemy.y);
  103.             if(pos < 60 * 60) {//碰撞
  104.                 enemy.y = -100;
  105.             }
  106.         }
  107.     }
  108. }

代码讲解

1、创建暂停按扭图片

var pause = new PIXI.Sprite.fromImage(“res/plane/ui/ui_new_btn_png_03.png”);
pause.x = 340;
pause.y = 10;
app.stage.addChild(pause);

2、创建继续的按扭图片

var goOn = new PIXI.Sprite.fromImage(“res/plane/ui/ui_new_battle_png_03.png”); goOn.x = 130;
goOn.y = 250;
goOn.visible = false;
app.stage.addChild(goOn);
创建继续的按扭图片，并将该图片默认隐藏

3、定义isMove变量

var isMove = true;
定义isMove变量，当isMove=false时游戏暂停，当isMove=true时游戏继续

4、给暂停按扭pause添加click事件

pause.interactive = true;
pause.on(“click”,function(){
pause.visible = false;
goOn.visible = true;
isMove = false;
});
给暂停按扭pause，添加click事件，将isMove变量值改为false，用于暂停游戏

5、给继续游戏按扭goOn添加click事件

goOn.interactive = true;
goOn.on(“click”,function(){
pause.visible = true;
goOn.visible = false;
isMove = true;
});
给继续游戏按扭goOn添加click事件，将isMove变量值改为true，用于继续游戏

6、添加帧频函数

app.ticker.add(animate);    <br />function animate() {    <br />if(isMove){    <br />fire();    <br />enemyMove();    <br />bulletMove();    <br />bulletCrash();    <br />}    <br />}    <br />在帧频函数中，通过if来判断isMove变量值，用于实现游戏暂停、继续游戏的效果