class Vector {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
  }
  static add(vector1, vector2) {
    return new Vector(vector1.x + vector2.x, vector1.y + vector2.y);
  }
  static sub(vector1, vector2) {
    return new Vector(vector1.x - vector2.x, vector1.y - vector2.y);
  }
  static clone(vector) {
    return new Vector(vector.x, vector.y);
  }
  static fromAngle(theta, d) {
    return new Vector(d * Math.cos(theta), d * Math.sin(theta));
  }
  clone() {
    return new Vector(this.x, this.y);
  }
  add(vector) {
    this.x += vector.x;
    this.y += vector.y;
    return this;
  }
  sub(vector) {
    this.x -= vector.x;
    this.y -= vector.y;
    return this;
  }
  mult(scale) {
    this.x *= scale;
    this.y *= scale;
    return this;
  }
  div(scale) {
    this.x /= scale;
    this.y /= scale;
    return this;
  }
  //计算向量的长度
  mag() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  }
  //求单位向量
  normalize() {
    let m = this.mag();
    if (m !== 0) {
      this.div(m);
    }
    return this;
  }
}

class Stage {
  constructor(props) {
    var _a;
    this.entities = [];
    //处理调整
    this.handleResize = () => {
      this.init();
    };
    this.tick = (callback) => {
      //请求动画帧
      this.raf = requestAnimationFrame(() => {
        this.ctx.clearRect(0, 0, this.width, this.height);//擦除上一帧画布
        this.tick(callback);
      });
      const stage = {
        width: this.width,
        height: this.height,
        verticalAcceleration: this.verticalAcceleration,
        ctx: this.ctx,
        horizontalVelocity: this.horizontalVelocity
      };
      //更新herald及平台数据
      for (const entity of this.entities) {
        entity.update(stage);
      }
      callback();
      //重新绘制herald及平台
      for (const entity of this.entities) {
        entity.draw(stage);
      }
      this.horizontalVelocity.add(this.horizontalAcceleration);
    };
    this.play = (callback) => {
      this.stop();
      this.tick(callback);
    };
    //取消请求动画帧
    this.stop = () => {
      cancelAnimationFrame(this.raf);
    };
    this.add = (...entity) => {
      //entity.length为2
      for (let i = 0; i < entity.length; i++) {
        this.entities.push(entity[i]);
      }
    };
    this.reset = () => {
      this.horizontalVelocity = this.initialHorizontalVelocity.clone();
      this.entities = [];
    };
    this.ele = document.getElementById("canvas");
    this.init();
    this.ctx = this.ele.getContext("2d");
    this.verticalAcceleration = props.verticalAcceleration;//重力加速度
    this.initialHorizontalVelocity = props.initialHorizontalVelocity;//初始水平速度
    this.horizontalVelocity = props.initialHorizontalVelocity.clone();
    this.horizontalAcceleration = props.horizontalAcceleration;//水平加速度
    //视图大小调整事件监听
    window.addEventListener("resize", this.handleResize, false);
  }
  //做适配，消除图片边缘模糊现象，并将画布大小设置为整个浏览器窗口视图大小
  init() {
    const { devicePixelRatio, innerWidth, innerHeight } = window;
    this.ele.width = innerWidth * devicePixelRatio;
    this.ele.height = innerHeight * devicePixelRatio;
    this.width = innerWidth;
    this.height = innerHeight;
    this.ele.style.width = this.width + "px";
    this.ele.style.height = this.height + "px";
    this.ctx = this.ele.getContext("2d");
    //为 canvas 单位添加缩放变换
    this.ctx.scale(devicePixelRatio, devicePixelRatio);
  }
}

class Particle extends Rect {
    constructor(props) {
        super(props);
        this.applyForce = (force) => {
            this.velocity.add(force.clone().div(this.mass));
        };
        this.update = (stage) => {
            if (!this.isFirstTime) {
                this.opacity -= 0.05;//让粒子慢慢消失
                const { verticalAcceleration, horizontalVelocity } = stage;
                this.velocity.add(verticalAcceleration);
                this.position.add(Vector.add(this.velocity, horizontalVelocity));
                this.opacity = Math.max(this.opacity, 0);
            }
            this.isFirstTime = false;
        };
        this.velocity = props.velocity;
        this.isFirstTime = true;
        this.mass = props.mass;
    }
}

class Herald extends Rect {
    constructor(props) {
        super(props);
        this.applyForce = (force) => {
            this.velocity.add(force.clone().div(this.mass));//this.mass应该为一个倍数值。
        };
        //herald跳跃行为
        this.jump = () => {
            if (this.curConJump < this.maxConJump) {
                //velocity为给一个速度
                this.velocity = new Vector();//将this.velocity重置为（0,0），如果不做这一步，herald的速度可能已经向下了，甚至可能大于后面所给的一个向下的速度，就有可能跳第二次herald没什么反应了。
                this.applyForce === null || this.applyForce === void 0 ? void 0 : this.applyForce(new Vector(0, -12));
                this.curConJump++;
            }
            else if (this.curConJump === this.maxConJump) {
                this.velocity.add(new Vector(0, 30));
                this.curConJump++;//在碰撞时this.curConJump会为0
            }
        };
        this.mass = props.mass !== null && props.mass !== void 0 ? props.mass : 1;
        this.velocity = props.velocity !== null && props.velocity !== void 0 ? props.velocity : new Vector();
        this.maxConJump = 2;
        this.curConJump = 0;
    }
    //更新herald数据
    update(stage) {
        const { verticalAcceleration } = stage;
        this.prevPosition = this.position.clone();
        this.prevVelocity = this.velocity.clone();
        this.velocity.add(verticalAcceleration);
        //sub 左参数-右参数
        this.position.add(Vector.sub(this.velocity, verticalAcceleration.clone().mult(0.5)));
    }
}

class PlatformManager {
    constructor(props) {
        this.update = (stage) => {

            //this.lastPlatform.position.x < stage.width表示前一个平台的左侧已经出现在舞台时，就开始执行{}的内容绘制一个新的平台
            while (!this.platforms.length ||
                this.lastPlatform.position.x < stage.width) {
                const { width, height, gap } = PlatformManager.getRandomProperties(stage);
                let prev = !this.platforms.length
                    ? 0
                    : this.lastPlatform.position.x + this.lastPlatform.width + gap;
                const newPlatform = new Platform({
                    position: new Vector(prev, stage.height - height),//stage.height - height，stage.height是舞台的高度，即整个浏览器的高度，height为一个平台的高度
                    width: !this.platforms.length
                        ? random(stage.width * 0.8, stage.width)//每次开始时，第一个舞台的宽度
                        : width,//第二个及以后舞台的宽度
                    height,
                    color: randomOne(this.colors)//在自定义的几个颜色中随机舞台颜色
                });
                this.lastPlatform = newPlatform;
                this.platforms.push(newPlatform);
            }
            for (let i = 0; i < this.platforms.length; i++) {
                const platform = this.platforms[i];
                platform.update(stage);//platform的更新方法，不是PlatformManager的，为平台设置速度
                // 如果已经走过屏幕左边,需要将它的位置调整到队尾,达到复用的目的
                if (platform.position.x + platform.width < 0) {
                    const { width, height, gap } = PlatformManager.getRandomProperties(stage);
                    platform.position = new Vector(this.lastPlatform.position.x + this.lastPlatform.width + gap, stage.height - height);
                    platform.color = randomOne(this.colors);
                    platform.width = width;
                    platform.height = height;
                    this.lastPlatform = platform;
                }
            }
        };
        //画出平台
        this.draw = (stage) => {
            this.platforms.forEach((p) => p.draw(stage));//p的draw继承自Rect
        };
        const { colors } = props;
        this.colors = colors;
        this.platforms = [];
        this.lastPlatform = null;
    }
    //取得平台随机数据
    static getRandomProperties(stage) {
        const width = random(80, 680);
        const height = random(50, 200);
        const gap = random((80 * Math.abs(stage.horizontalVelocity.x)) / 3, (180 * Math.abs(stage.horizontalVelocity.x)) / 3);
        return {
            width,
            height,
            gap
        };
    }
}