pixi实现火球运动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：pixi实现火球运动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">


</head>

<body>
    <!-- partial:index.partial.html -->

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.4.4.3.js"></script>
    <script>
        var app = new PIXI.Application(900, 500, { antialias: true });
document.body.appendChild(app.view);
app.renderer.backgroundColor = 0x1e0206;


var debug = false;

var sprites = new PIXI.particles.ParticleContainer(10000, {
    scale: true,
    position: true,
    rotation: true,
    alpha: true
});
app.stage.addChild(sprites);



var circleGraphic = new PIXI.Graphics();
circleGraphic.lineStyle(0);
circleGraphic.beginFill(0xffffff,1);
circleGraphic.drawCircle(0, 0,50);
circleGraphic.endFill();

var circleTexture = app.renderer.generateTexture( circleGraphic)



var fireBack1 = new PIXI.Graphics();
fireBack1.lineStyle(0);
fireBack1.beginFill(0xff5400,1);
fireBack1.drawCircle(570, 250,200);
fireBack1.drawCircle(300, 250,150);
fireBack1.drawCircle(100, 250,100);


fireBack1.endFill();

fireBack1.x = 0;
fireBack1.y = 0;
app.stage.addChild(fireBack1);

var fireBack2 = new PIXI.Graphics();
fireBack2.lineStyle(0);
fireBack2.beginFill(0xffffff,1);
fireBack2.drawCircle(570, 250,200);
fireBack2.drawCircle(300, 250,150);
fireBack2.drawCircle(100, 250,100);


fireBack2.endFill();
fireBack2.x = 0;
fireBack2.y = 0;



var particles1 = new PIXI.Container();

for (var i = 0; i < 120; i++) {
    var particle = new PIXI.Sprite(circleTexture);

  if(debug == true)
    particle.tint = 0xffffff;
    else particle.tint = 0xff7e00;
    
   // particle.alpha = 0.06;
    // particle.blendMode = PIXI.BLEND_MODES.ADD;

    // set the anchor point so the texture is centerd on the sprite
    particle.anchor.set(0.5);

    // different maggots, different sizes
    particle.scale.set(0.8 + Math.random() * 0.3);
    // scatter them all
    particle.start = {x:750,y:240 + Math.random() * 100 - 50,scale:Math.random() * .5 + .7,speed:{y:.0,x:Math.random() * .5 + .5}}
    particle.alive = false;
    particles1.addChild(particle);

}



for (var i = 0; i < 500; i++) {
    var particle = new PIXI.Sprite(circleTexture);

  if(debug == true)
    particle.tint = 0xffffff;
    else particle.tint = 0xffffff;
    
    particle.alpha = .05;
     particle.blendMode = PIXI.BLEND_MODES.ADD;

    // set the anchor point so the texture is centerd on the sprite
    particle.anchor.set(0.5);

    // different maggots, different sizes
    particle.scale.set(0.8 + Math.random() * 0.3);
    // scatter them all
    particle.start = {x:750,y:250 + Math.random() * 5 - 3,scale:Math.random() * .4 + .5,speed:{y:.0,x:Math.random() * .5 + .5}}
    particle.alive = false;
    particles1.addChild(particle);

}





for (var i = 0; i < 200; i++) {
    var particle = new PIXI.Sprite(circleTexture);

  if(debug == true)
    particle.tint = 0xff00ff;
    else particle.tint = 0x1e0206;

    // set the anchor point so the texture is centerd on the sprite
    particle.anchor.set(0.5);

    // different maggots, different sizes
    particle.scale.set(0.8 + Math.random() * 0.3);
    // scatter them all
    particle.start = {x:600,y:70,scale:.85,speed:{y:.65,x:1}}
    particle.alive = false;
    particles1.addChild(particle);

}


for (var i = 0; i < 200; i++) {
    var particle = new PIXI.Sprite(circleTexture);

    if(debug == true)
    particle.tint = 0x00ff00;
    else particle.tint = 0x1e0206;

    // set the anchor point so the texture is centerd on the sprite
    particle.anchor.set(0.5);

    // different maggots, different sizes
    particle.scale.set(0.8 + Math.random() * 0.3);
    // scatter them all
    particle.start = {x:630,y:430,scale:.7,speed:{y.........完整代码请登录后点击上方下载按钮下载查看