单个水管 Pipe

实现思路：

• 水管的实现也很简单，先是继承 Rectangle

• 但是需要注意的是，他也有一些属性是

  • 水管的位置是随机生产的，不可能每一对水管的高度都是一样的，那游戏就失去了趣味性，所以height需要外部传入

  • 水管高度影响了位置，所以top需要外部传入

  • 水管速度需要和大地速度保持一致，所以xSpeed需要在外部传入

  • 水管是计时器里面不断生成的，所以水管dom需要外部传入

实现代码

点击 展开/收起 jsx 代码

/**
 * @description 单个水管类
 */

import Rectangle from './Rectangle';

class Pipe extends Rectangle {
  constructor(height, top, speed, pipeDom) {
    // 游戏面板的宽度
    const gameWidth = document.querySelector('.game').clientWidth;
    super(50, height, gameWidth, top, speed, 0, pipeDom);
  }

  onMove() {
    // 水管跑到最左边然后不见了之后，要移除dom
    if (this.left < -this.width) {
      this.dom.remove();
    }
  }
}

export default Pipe;