带声音效果的烟花发射及燃放动画效果-html代码-BFW代码库

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看