pixi.js 制作流星雨效果

 //创建流星们creatShootingStart(){let startNum = 25;//个数this.startSp = [];//星星们的集合//流星消失的高度this.limetHeight = this.winH/2;for(let i=0;i<startNum;i++){let sprite = new PIXI.Sprite(PIXI.loader.resources[this.startImg[0].url].texture);this.initStartSprite(sprite)this.app.stage.addChild(sprite);this.startSp.push(sprite)}// 开始动画this.app.ticker.add(delta => this.gameLoop(delta));},gameLoop(delta){this.startSp.forEach((item,index) => {item.x -= item.vxitem.y += item.vyitem.alpha -= item.alphaValif(item.x <= 0||item.y >= this.limetHeight){this.initStartSprite(item)}});},//初始化流星值initStartSprite(sprite){sprite.x = this.winW*Math.random();sprite.y = this.getRandomNum(0,50);sprite.rotation = -0.8;//星星的倾斜度//大小控制let scaleVar = Math.random()/3sprite.scale.set(scaleVar,scaleVar) //这是个变量// 速度控制let speedVal = this.getRandomNum(1,5)sprite.vx = speedVal; sprite.vy = speedVal;//清晰度控制sprite.alpha = Math.floor(Math.random()*10)/10sprite.alphaVal = sprite.alpha*(sprite.vy/this.limetHeight)},//取随机数getRandomNum(min,max){return Math.floor(Math.random()*(max-min) + min);},

pixi.js 制作流星雨效果相关推荐

pixi.js制作实现擦玻璃的效果
只写一下思路,已经实现. 1.总共有三层:模糊层,清晰层,遮罩层. 模糊层在最下面,清晰层在上面,清晰层的mask设置为遮罩层.都是Container,可以添加其他元素. 实际模糊层和清晰层是一个完全 ...
通过css和js实现流星雨效果
页面代码: <template><div >============================流星雨============================<div ...
JS——如何利用js实现流星雨效果？
文章目录前言一.成果图二.实现步骤 1.html结构 2.css样式 3.js行为总结前言一起来看流星雨啊,没有流星雨?那我们就自己画一个,会动的那种哦,还有闪烁的星星哦~ 一.成果图二 ...
原生js制作动画效果
理论基础:需要获取元素的任意css属性值 getComputedStyle(element,null),支持谷歌,火狐 element.currentStyle,支持ie8 //获取任意css属性值( ...
使用Pixi.js编写JavaScript网页小游戏
Pixi.js中文网https://pixijs.huashengweilai.com/PixiJSOfficial site for PixiJS, The HTML Creation Engine ...
python gooey_使用Three.js制作Gooey图像悬停效果
python gooey View demo 查看演示Download Source 下载源 Flash's grandson, WebGL has become more and more popu ...
纯JS制作的窗户雨滴效果
今天本站推荐的代码是用JS制作的窗户雨滴效果,绚丽的效果不亚于FLASH,由于不知出处在哪,总而言之, 在此感谢作者的慷慨分享. function demo() { var engine = new ...
(原)用pixi.js 实现方块阵点击后原地自转效果
源码各位,请教一个问题,我这个还有BUG,我是想实现,点击一下可以停止转动,然后再点一下重新转动.而不是一直加速,有没有什么好办法? PS:问题已经解决,谢谢评论的大神@Antineutrino ...
HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果，css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下一.纯css+html的手风琴效 ...

pixi.js 制作流星雨效果

pixi.js 制作流星雨效果

pixi.js 制作流星雨效果相关推荐

最新文章

热门文章

pixi.js 制作 流星雨效果

pixi.js 制作 流星雨效果

pixi.js 制作 流星雨效果相关推荐

最新文章

热门文章

pixi.js 制作流星雨效果

pixi.js 制作流星雨效果

pixi.js 制作流星雨效果相关推荐