最近公司不太忙于是就做了一些以前想做的小我的项目,
其中有一个红包雨小游戏背景须要一个流星雨成果,就想到了以前看过的 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;`
命名比拟随便,就这么看吧