js实现canvas带声音的三维烟花燃放粒子动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：js实现canvas带声音的三维烟花燃放粒子动画效果代码

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

<!doctype html>
<html>

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


    <style>
        html, body {
            margin: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
        }

        #canvas {
            width: 100%;
            height: 100%;
        }
    audio{
       
  display: none;

    }
    </style>

</head>

<body>
    <audio id="sound1" src="//repo.bfw.wiki/bfwrepo/images/fire/pow1.ogg" controls=""></audio>
    <audio id="sound2" src="//repo.bfw.wiki/bfwrepo/images/fire/pow2.ogg" controls=""></audio>
    <audio id="sound3" src="//repo.bfw.wiki/bfwrepo/images/fire/pow3.ogg" controls=""></audio>
    <audio id="sound4" src="//repo.bfw.wiki/bfwrepo/images/fire/pow4.ogg" controls=""></audio>
    <canvas id="canvas"></canvas>
    <script>
        function initVars(){

            pi=Math.PI;
            ctx=canvas.getContext("2d");
            canvas.width=canvas.clientWidth;
            canvas.height=canvas.clientHeight;
            cx=canvas.width/2;
            cy=canvas.height/2;
            playerZ=-25;
            playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
            scale=600;
            seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
            seeds=new Array();
            sparkPics=new Array();
            s="//repo.bfw.wiki/bfwrepo/images/fire/";
            for(i=1;i<=10;++i){
                sparkPic=new Image();
                sparkPic.src=s+"spark"+i+".png";
                sparkPics.push(sparkPic);
            }
            sparks=new Array();
            pow1=new Audio(s+"pow1.ogg");
            pow2=new Audio(s+"pow2.ogg");
            pow3=new Audio(s+"pow3.ogg");
            pow4=new Audio(s+"pow4.ogg");
            frames = 0;
        }

        function rasterizePoint(x,y,z){

            var p,d;
            x-=playerX;
            y-=playerY;
            z-=playerZ;
            p=Math.atan2(x,z);
            d=Math.sqrt(x*x+z*z);
            x=Math.sin(p-yaw)*d;
            z=Math.cos(p-yaw)*d;
            p=Math.atan2(y,z);
            d=Math.sqrt(y*y+z*z);
            y=Math.sin(p-pitch)*d;
            z=Math.cos(p-pitch)*d;
            var rx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
            if(!uc) return {x:0,y:0,d:-1};
            var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
            var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
            if(!z)z=.000000001;
            if(ua>0&&ua<1&&ub>0&&ub<1){
                return {
                    x:cx+(rx1+ua*(rx2-rx1))*scale,
                    y:cy+y/z*scale,
                    d:Math.sqrt(x*x+y*y+z*z)
                };
            }else{
                return {
                    x:cx+(rx1+ua*(rx2-rx1))*scale,
                    y:cy+y/z*scale,
                    d:-1
                };
            }
        }

        function spawnSeed(){

            seed=new Object();
            seed.x=-50+Math.random()*100;
            seed.y=25;
            seed.z=-50+Math.random()*100;
            seed.vx=.1-Math.random()*.2;
            seed.vy=-1.5;//*(1+Math.random()/2);
            seed.vz=.1-Math.random()*.2;
            seed.born=frames;
            seeds.push(seed);
        }

        function splode(x,y,z){

            t=5+parseInt(Math.random()*150);
            sparkV=1+Math.random()*2.5;
            type=parseInt(Math.random()*3);
            switch(type){
                case 0:
                    pic1=parseInt(Math.random()*10);
                    break;
                case 1:
                    pic1=parseInt(Math.random()*10);
                    do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
                    break;
                case 2:
                    pic1=parseInt(Math.random()*10);
                    do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
                    do{ pic3=parseInt(Math.random()*10); }while(pic3==pic1 || pic3==pic2);
                    break;
            }
            for(m=1;m<t;++m){
                spark=new Object();
                spark.x=x; spark.y=y; spark.z=z;
                p1=pi*2*Math.random();
                p2=pi*Math.random();
                v=sparkV*(1+Math.random()/6)
                spark.vx=Math.sin(p1)*Math.sin(p2)*v;
                spark.vz=Math.cos(p1)*Math.sin(p2)*v;
                spark.vy=Math.cos(p2)*v;
                switch(type){
                    case 0: spark.img=sparkPics[pic1]; break;
                    case 1:
                        spark.img=sparkPics[parseInt(Math.random()*2)?pic1:pic2];
                        break;
                    case 2:
                        switch(parseInt(Math.random()*3)){
                            case 0: spark.img=sparkPics[pic1]; break;
                            case 1: spark.img=sparkPics[pic2]; break;
                            case 2: spark.img=sparkPics[pic3]; break;
                        }
                        break;
                }
                spark.radius=25+Math.random()*50;
                spark.alpha=1;
                spark.trail=new Array();
                sparks.push(spark);
            }
            switch(parseInt(Math.random()*4)){
                case 0:	pow=document.getElementById("sound1"); break;
                case 1:	pow=document.getElementById("sound2"); break;
                case 2:	pow=document.getElementById("sound3"); break;
                case 3:	pow=document.getElementById("sound4"); break;
            }
            d=Math.sqrt((x-playerX)*(x-playerX)+(y-playerY)*(y-playerY)+(z-playerZ)*(z-playerZ));
            pow.volume=1.0/(1+d/10);
            pow.play();
        }

        function doLogic(){

            if(seedTimer<frames){
                seedTimer=frames+seedInterval*Math.random()*10;
                spawnSeed();
            }
            for(i=0;i<see.........完整代码请登录后点击上方下载按钮下载查看