带声音效果的烟花发射及燃放动画效果

代码语言:html

所属分类:粒子

代码描述:带声音效果的烟花发射及燃放动画效果,多种图形及文字燃放效果

代码标签: 烟花 发射 燃放 动画 效果

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

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
    canvas
{
 
display: block;
}

.block-audio {
 
display: none;
}
body
{padding: 0px;margin: 0px}
</style>
</head>

<body style="position: absolute;">
<div class="block-audio">
 
<audio class="exp" src="http://repo.bfw.wiki/bfwrepo/sound/5e769c8e8c7bd.mp3" controls></audio>
 
<audio class="exp" src="http://repo.bfw.wiki/bfwrepo/sound/5e769c95c8a6e.mp3" controls></audio>
 
<audio class="exp" src="http://repo.bfw.wiki/bfwrepo/sound/5e769d2d64114.mp3" controls></audio>
 
<audio class="exp" src="http://repo.bfw.wiki/bfwrepo/sound/5e769d3f5bed7.mp3" controls></audio>
 
<audio class="exp" src="http://repo.bfw.wiki/bfwrepo/sound/5e769d46ac406.mp3" controls></audio>
 
<audio class="exp" src="http://repo.bfw.wiki/bfwrepo/sound/5e769d4caefad.mp3" controls></audio>
 
<audio class="exp" src="http://repo.bfw.wiki/bfwrepo/sound/5e769d532b25a.mp3" controls></audio>

 
<audio class="launch" src="http://repo.bfw.wiki/bfwrepo/sound/5e769d60a9365.mp3" controls></audio>
 
<audio class="launch" src="http://repo.bfw.wiki/bfwrepo/sound/5e769d665a3ab.mp3" controls></audio>
 
<audio class="launch" src="http://repo.bfw.wiki/bfwrepo/sound/5e769d6c478cc.mp3" controls></audio>
 
<audio class="launch" src="http://repo.bfw.wiki/bfwrepo/sound/5e769d7220789.mp3" controls></audio>
 
<audio class="launch" src="http://repo.bfw.wiki/bfwrepo/sound/5e769d77b2d35.mp3" controls></audio>

</div>
<canvas id="canvas"></canvas>

<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
    $(function() {
        var canvas = $('#canvas')[0];
        canvas.width = $(window).width();
        canvas.height = $(window).height();
        var ctx = canvas.getContext('2d');

        // resize
        $(window).on('resize', function() {
                canvas.width = $(window).width();
                canvas.height = $(window).height();
                ctx.fillStyle = '#000003';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                center = { x: canvas.width / 2, y: canvas.height / 2 };
        });

        // init
        ctx.fillStyle = '#000003';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        // objects
        var listFire = [];
        var listFirework = [];
        var listText = [];
        var listSpecial = [];
        var listSpark = [];
        var lights = [];
        var fireNumber = 10;
        var center = { x: canvas.width / 2, y: canvas.height / 2 };
        var range = 100;
        var fired = 0;
        var onHold = 0;
        var supprise = false;
        var textIndex = 0;
        var actions = [makeDoubleFullCircleFirework, makePlanetCircleFirework, makeFullCircleFirework, makeDoubleCircleFirework, makeHeartFirework, makeCircleFirework, makeRandomFirework];
        for (var i = 0; i < fireNumber; i++) {
                var fire = {
                        x: Math.random() * range / 2 - range / 4 + center.x,
                        y: Math.random() * range * 2.5 + canvas.height,
                        size: Math.random() + 0.5,
                        fill: '#ff3',
                        vx: Math.random() - 0.5,
                        vy: -(Math.random() + 4),
                        ax: Math.random() * 0.06 - 0.03,
                        delay: Math.round(Math.random() * range) + range * 4,
                        hold: false,
                        alpha: 1,
                        far: Math.random() * range + (center.y - range)
                };
                fire.base = {
                        x: fire.x,
                        y: fire.y,
                        vx: fire.vx,
                        vy: fire.vy
                };
                //
                listFire.push(fire);
                // play sound
                playLaunchSound();
        }
        // define array of sound
        var listExpSound = $('audio.exp');
        var listLaunchSound = $('audio.launch');

        // define array position of text
        var textString = '你好帅啊2020';
        var textMatrix = [
                4.5, 0, 5.5, 0, 6.5, 0, 7.5, 0, 8.5, 0,
                0, 1, 1, 1, 2, 1, 3, 1, 4, 1, 6, 1, 7, 1, 8, 1, 10, 1, 11, 1, 12, 1, 13, 1,
                5, 2, 6, 2, 7, 2, 8, 2
        ]
        var chars = {
                你: [
                        0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
                        1, 3, 2, 3, 3, 3, 4, 3,
                        5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6, 5, 7
                ],
                好: [
                        2, 0, 2, 1, 2, 2, 1, 2, 1, 3, 1, 4, 1, 5, 0, 5, 0, 6, 0, 7, 2, 5,
                        3, 0, 3, 1, 3, 2, 4, 2, 4, 3, 4, 4, 4, 1, 5, 5, 5, 6, 5, 7, 3, 5
                ],
                帅: [
                        0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
                        1, 0, 2, 0, 3, 0, 4, 1, 5, 2, 4, 3, 3, 4, 2, 4, 1, 4
                ],
                啊: [
                        0, 0, 0, 1, 1, 1, 1, 2, 1, 3, 2, 3, 2, 4, 2, 5, 2, 6, 2, 7,
                        3, 2, 3, 3, 4, 1, 4, 2, 5, 0, 5, 1
                ],
                么: [
                        0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
                        1, 7, 2, 7, 3, 7, 4, 7, 5, 7
                ],
                么: [
                        0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6,
                        1, 7, 2, 7, 3, 7, 4, 7,
                        5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6
                ],
                哒: [
                        0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
                        1, 1, 1, 2, 2, 2, 2, 3, 2, 4, 3, 4, 3, 5, 4, 5, 4, 6,
                        5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6, 5, 7
                ],
                爱: [
                        0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
                        1, 0, 2, 0, 3, 0, 4, 0, 5, 0,
                        1, 3, 2, 3, 3, 3, 4, 3,
                        1, 7, 2, 7, 3, 7, 4, 7, 5, 7
                ],
                你: [
                        0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 1, 6,
                        2, 1, 2, 2, 2, 3, 2, 4, 2, 5, 2, 6, 2, 7, 3, 7,
                        5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 4, 5, 4, 6
                ],
                哟: [
                        0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
                        1, 0, 2, 0, 3, 0, 4, 1, 5, 2, 4, 3, 3, 4, 2, 4, 1, 4,
                        1, 5, 2, 5, 3, 6, 4, 6, 5, 7
                ],
                2: [
                        0, 1, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 5, 1, 5, 2, 5, 3,
                        4, 3, 3, 3, 2, 3, 2, 4, 1, 4, 1, 5,
                        0, 5, 0, 6, 0, 7, 1, 7, 2, 7, 3, 7, 4, 7, 5, 7, 5, 6
                ],
                0: [
                        0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6,
                        1, 0, 2, 0, 3, 0, 4, 0,
                        1, 7, 2, 7, 3, 7, 4, 7,
                        5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6
                ],
                2: [
                        1, 2, 2, 2, 2, 1, 3, 1, 3, 0,
                        4, 0, 4, 1, 4, 2, 4, 3, 4, 4, 4, 5, 4, 6, 4, 7,
                        1, 7, 2, 7, 3, 7, 5, 7
                ],
                0: [
                        0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0,
                        5, 1, 5, 2, 5, 3, 4, 3, 4, 4,
                        3, 4, 3, 5, 3, 6, 3, 7
                ]
        }

        function initText() {
                var i = textIndex;
                var velocity = Math.random() * 0.25 + 1;
                var shift = { x: -(Math.random() + 2), y: -(Math.random() + 3) };
                var char = chars[textString[i]];
                var width = 80;
                var half = 6.5 * width;
                var left = textMatrix[i * 2] * width - half;
                var top = textMatrix[i * 2 + 1] * range * 1.2 - range * 2.4;
                for (var j = 0; j < fireNumber * char.length * 0.25; j++) {
                        var rand = Math.floor(Math.random() * char.length * 0.5);
                        var x = char[rand * 2] + shift.x;
                        var y = char[rand * 2 + 1] + shift.y;
                        var text = {
                                x: center.x + left * 0.9,
                                y: center.y + top,
                                left: center.x + left,
                                size: Math.random() + 0.5,
                                fill: '#ff3',
                                vx: x * (velocity + (Math.random() - 0.5) * 0.5),
                                vy: y * (velocity + (Math.random() - 0.5) * 0.5),
                                ay: 0.08,
                                alpha: 1,
                                life: Math.round(Math.random() * range / 2) + range / 1.5
                        }
                        text.base = {
                                life: text.life,
                                size: text.size,
                        };
                        text.direct = (text.left - text.x) * 0.08;
                        listText.push(text);
                }
                // play sound
                playExpSound();
                //
                lights.push({ x: center.x + left * 0.9, y: center.y + top, color: text.fill, radius: range * 2 });
                if (++textIndex < textString.length) {
                        setTimeout(initText, 10);
                }
                else {
                        textIndex = 0;
                }
        }

        function initSpark() {
                var x = Math.random() * range * 3 - range * 1.5 + center.x;
                var vx = Math.random() - 0.5;
                var vy = -(Math.random() + 4);
                var ax = Math.random() * 0.04 - 0.02;
                var far = Math.random() * range * 4 - range + center.y;
                var direct = ax * 10 * Math.PI;
                var max = fireNumber * 0.5;
                for (var i = 0; i < max; i++) {
                        var special = {
                                x: x,
                                y: Math.random() * range * 0.25 + canvas.height,
                                size: Math.random() + 2,
                                fill: '#ff3',
                                vx: vx,
                                vy: vy,
                                ax: ax,
                                direct: direct,
                                alpha: 1
                        };
                        special.far = far - (special.y - canvas.height);
                        listSpecial.push(special);
                        // play sound
                        playLaunchSound();
                }
        }

        function randColor() {
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                var color = 'rgb($r, $g, $b)';
                color = color.replace('$r', r);
                color = color.replace('$g', g);
                color = color.replace('$b', b);
                return color;
        }

        function playExpSound() {
                var sound = listExpSound[Math.floor(Math.random() * listExpSound.length)];
                sound.volume = Math.random() * 0.4 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0