1. 帧频函数执行原理:

帧频函数每秒调用 60 次, 每次执行一帧动画.
如果想在游戏中控制帧频函数的执行频率,不想执行这么快,那么可以通过变量计数的方式,来实现对频率的控制
代码如下：

  1. // 计数变量
  2. var a = 0;
  3. app.ticker.add(function animate() {
  4.     if(a == 60){
  5.         //相关代码 
  6.         a = 0;
  7.      }
  8.      a++;
  9. });

2. 案例目标

  1. var app = new PIXI.Application(400, 400);
  2. document.body.appendChild(app.view);
  4. var bg = new PIXI.Sprite.fromImage("res/bg_02.png");
  5. app.stage.addChild(bg);
  7. var plane = new PIXI.Sprite.fromImage("res/plane_blue_01.png");
  8. plane.anchor.set(0.5,0.5);
  9. plane.x = 200;
  10. plane.y = 300;
  11. app.stage.addChild(plane);
  14. //飞机plane的鼠标跟随
  15. bg.interactive = true;
  16. bg.on("mousemove",movePlane);
  17. function movePlane(event) {
  18.     var pos = event.data.getLocalPosition(app.stage);
  19.     plane.x = pos.x;
  20.     plane.y = pos.y;
  21. }
  24. //存储子弹的数组
  25. var arr = [];
  28. app.ticker.add(animate);
  29. function animate() {
  30.     addBullet();//创建子弹
  31.     moveBullet();//移动子弹
  32. }
  34. //创建子弹
  35. var time = 0;
  36. function addBullet() {
  37.   if(time == 10) {
  38.         var bullet = PIXI.Sprite.fromImage("res/plane/bullet_01.png");
  39.         bullet.anchor.set(0.5,0.5);
  40.         bullet.x = plane.x;
  41.         bullet.y = plane.y;
  42.         app.stage.addChild(bullet);
  43.         //将子弹存入arr数组
  44.         arr.push(bullet);
  46.         time = 0;
  47.     } 
  48.   time++;
  49. }
  51. //移动子弹
  52. function moveBullet(){
  53.     //移动arr数组中的子弹
  54.     for(var i=0;i<arr.length;i++){
  55.         arr[i].y -= 8;
  56.     }
  58.     //如果子弹的超出边界，将子弹删除
  59.     for(var i=arr.length-1;i>=0;i--){
  60.         if(arr[i].y < -100) {
  61.             app.stage.removeChild(arr[i]);
  62.             arr.splice(i,1);
  63.         }
  64.     }
  65. }

3. 颜色换算

颜色 是使用 十六进制数表示
十六进制的数有效范围是 0~9,A~F
颜色的组成是 RGB , R-RED, G-GREEN , B-BLUE
表示颜色时,使用一个字节表示一个原色
一个颜色由三个字节组成
image.png