天空背景 Sky

实现思路：

• 实现简单，直接继承矩形类Rectangle 即可

• 需要注意的是，由于背景是直接循环一张图片生成的，所以需要再背景移动到left = -容器宽度的时候，将背景重新设置为 0 ，使得背景可以无限往左移动

  • 所以针对 move 的时候，需要增加一个判断条件onMove，重写父类中的onMove，使得天空背景的dom.left值可以重新变为 0

实现代码

点击 展开/收起 jsx 代码

/**
 * @description 天空类
 */

import Rectangle from './Rectangle';

class Sky extends Rectangle {
  constructor(skyDom) {
    const skyStyle = getComputedStyle(skyDom);
    const skyWidth = parseFloat(skyStyle.width);
    const skyHeight = parseFloat(skyStyle.height);
    super(skyWidth, skyHeight, 0, 0, -100, 0, skyDom);
  }

  onMove() {
    if (this.left < -this.width / 2) {
      this.left = -80;
    }
  }
}

export default Sky;