大地背景 Ground

实现思路：

• 与 sky 一模一样，直接继承矩形类Rectangle 即可

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

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

实现代码

点击 展开/收起 jsx 代码

/**
 * @description 大地类
 */

import Rectangle from './Rectangle';

class Ground extends Rectangle {
  constructor(speed, groundDom) {
    const groundStyle = getComputedStyle(groundDom);
    const groundWidth = parseFloat(groundStyle.width);
    const groundHeight = parseFloat(groundStyle.height);
    const groundTop = parseFloat(groundStyle.top);
    super(groundWidth, groundHeight, 0, groundTop, speed, 0, groundDom);
  }

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

export default Ground;