最近公司不太忙于是就做了一些以前想做的小我的项目，
其中有一个红包雨小游戏背景须要一个流星雨成果，就想到了以前看过的es6里的class语法，感觉还是挺好用的，没用过的能够试试。

demo比较简单，有没有PIXI.JS根底应该都能看懂。

上面说一下遇到的两个问题：

第一个问题：原本想用PIXI自带的API去画流星雨，后果找了官网API lineStyle并不反对突变，问了几个大佬后发现官网倡议用的原生canvas画图而后再转成精灵，果决放弃了，流程略显简单，懒得弄，切了一张图片，间接搞定；

第二个问题：这就纯属是集体技术问题（哭笑），导出lstart函数后，援用的时候没有加new 关键字，始终报

Cannot call a class as a function

说不是一个函数，搞了半天才想起来构造函数须要new，真的是让人头大。

`
/**

  • @line 必须是一个纹理
  • @Sprite 是否继承不重要， 就是试试，
  • 反对传入一个纹理，用来执行动画

*/

class lstart extends Sprite {    constructor(line) {        super();        this.line = line;        this.starContainer = new Container();    };    creatLine() {        let vLine = new Sprite(this.line);        vLine.position.set(RDM(500, 1500), -339);        vLine.speed = RDM(5, 10);        vLine.rotation = .6;        return vLine;    };    addStar() {        this.starTimeer = setTimeout(() => {            this.starContainer.addChild(this.creatLine());            this.addStar();        }, 1000);    };    runing() {        for (let i = 0; i < this.starContainer.children.length; i++) {            this.starContainer.children[i].y += this.starContainer.children[i].speed;            this.starContainer.children[i].x -= this.starContainer.children[i].speed - 1;            if (this.starContainer.children[i].y > window.innerHeight + 120) {                this.starContainer.children[i].destroy();            };        };    };    openStar() {        this.addStar();    };    closeStar() {        clearTimeout(this.starTimeer);    }};export default lstart;`

命名比拟随便，就这么看吧