超详细的飞机大战小程序源码讲解（5）

本部分源码主要涉及敌机类（Enemy）、子弹族差信类（Bullet）和玩家庆棚类（Player）的核心实现，涵盖对象池管理、动画控制、触摸交互等关键功能。以下是详细解析：

一、敌机类（Enemy.js）

敌机类继承自Animation，负责敌机的生成、移动、爆炸动画及对象回收。

• 图片与尺寸：通过常量ENEMY_IMG_SRC、ENEMY_WIDTH、ENEMY_HEIGHT定义敌机外观。
• 速度控制：使用Symbol('speed')作为唯一标识符，避免属性名冲突。
• 对象池：通过DataBus管理敌机对象的复用，提升性能。

• rnd(start, end)生成[start, end)区间的随机整数，用于敌机初始位置的随机化。

  return Math.floor(Math.random() * (end - start) + start);

• init(speed)初始化敌机位置和速度：

  X坐标：随机生成，确保敌机出现在屏幕内。

  Y坐标：初始为-this.height，使敌机从屏幕上方进入。

  速度：通过参数传入，控制敌机下落速度。

• initExplosionAnimation()加载爆炸动画帧序列（共19帧），通过循环拼接图片路径：

  for (let i = 0; i < EXPLO_FRAME_COUNT; i++) { frames.push(`${EXPLO_IMG_PREFIX + (i + 1)}.png`);}

• update()每帧更新敌机位置，并检查是否超出屏幕：

  若y > window.innerHeight + this.height，调用databus.removeEnemey(this)回收对象。

二、子弹类（Bullet.js）

子弹类继承自Sprite，负责子弹的生成、移动及回收。

• 图片与尺寸：通过常量BULLET_IMG_SRC、BULLET_WIDTH、BULLET_HEIGHT定义子弹外观。
• 速度控制：同样使用Symbol('speed')标识速度属性。

• init(x, y, speed)初始化子弹位置和速度：

  X坐标：与玩家飞机居中对齐。

  Y坐标：从飞机上方发射。

  速度：固定值（如10），控制子弹上移速度。

• update()每帧更新子弹位置，并检查是否超出屏幕：

  若y < -this.height，调用databus.removeBullets(this)回收对象。

三、玩家类（Player.js）

玩家类继承自Sprite，负责玩家飞机的绘制、触摸交互及射击逻辑。

• 初始位置：屏幕兆轮底部居中，通过screenWidth和screenHeight计算。
• 触摸状态：touched标识手指是否在飞机上。
• 子弹数组：存储当前活跃的子弹对象。

• checkIsFingerOnAir(x, y)判断手指是否在飞机周围30像素范围内：

  return !!(x >= this.x - deviation && y >= this.y - deviation && x <= this.x + this.width + deviation && y <= this.y + this.height + deviation);

• setAirPosAcrossFingerPosZ(x, y)根据手指位置调整飞机位置，确保飞机不超出屏幕边界：

  if (disX < 0) disX = 0;else if (disX > screenWidth - this.width) disX = screenWidth - this.width;

• 触摸事件监听

  touchstart：检查手指是否在飞机上，若在则设置touched=true并调整飞机位置。

  touchmove：若touched=true，跟随手指移动飞机。

  touchend：重置touched=false。

• shoot()从对象池获取子弹对象，初始化位置并添加到databus.bullets数组：

  const bullet = databus.pool.getItemByClass('bullet', Bullet);bullet.init(this.x + this.width / 2 - bullet.width / 2, this.y - 10, 10);

四、设计模式与优化

1. 对象池模式

   目的：减少频繁创建/销毁对象的性能开销。

   实现：通过DataBus统一管理敌机和子弹对象，复用已回收的对象。

2. 动画与精灵分离

   敌机：继承Animation，支持爆炸动画。

   子弹：继承Sprite，仅需静态图片，简化逻辑。

3. 触摸交互优化

   偏差范围：允许手指在飞机周围30像素内触发移动，提升操作容错率。

   边界限制：防止飞机移出屏幕，提升用户体验。

五、总结

本部分源码实现了飞机大战游戏的核心逻辑：

• 敌机：随机生成、下落移动、爆炸动画及回收。
• 子弹：从玩家飞机发射、上移及回收。
• 玩家：触摸控制移动及射击功能。

通过对象池、动画分离等设计模式，代码结构清晰且性能高效，为后续碰撞检测、关卡设计等扩展功能奠定了基础。