PIXI.JS 基于parcel 打包es6 class语法 做了个流星雨

Posted 2021-09-25 一dou米

最近公司不太忙于是就做了一些以前想做的小项目，
其中有一个红包雨小游戏背景需要一个流星雨效果，就想到了以前看过的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;`

命名比较随意，就这么看吧