耀极客论坛

 找回密码
 立即注册
查看: 681|回复: 0

JavaScript实现带音效的烟花特效

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220553
发表于 2022-5-8 00:57:06 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了通过JavaScript实现的带音效的烟花特效,文中的示例代码简洁易懂,对我们学习JavaScript有一定的帮助,感兴趣的可以了解一下
  花了半个小时写的代码,这个html5 canvas新年烟花一定不会让大家失望!
  首先我们看下静态的效果图:

  文章末尾有动态的效果图,滑动即可看到! 
  JavaScript代码如下:
  1. $(function() {
  2. var canvas = $('#canvas')[0];
  3. canvas.width = $(window).width();
  4. canvas.height = $(window).height();
  5. var ctx = canvas.getContext('2d');
  6. // resize
  7. $(window).on('resize', function() {
  8. canvas.width = $(window).width();
  9. canvas.height = $(window).height();
  10. ctx.fillStyle = '#000003';
  11. ctx.fillRect(0, 0, canvas.width, canvas.height);
  12. center = { x: canvas.width / 2, y: canvas.height / 2 };
  13. });
  14. // init
  15. ctx.fillStyle = '#000003';
  16. ctx.fillRect(0, 0, canvas.width, canvas.height);
  17. // objects
  18. var listFire = [];
  19. var listFirework = [];
  20. var listText = [];
  21. var listSpecial = [];
  22. var listSpark = [];
  23. var lights = [];
  24. var fireNumber = 10;
  25. var center = { x: canvas.width / 2, y: canvas.height / 2 };
  26. var range = 100;
  27. var fired = 0;
  28. var onHold = 0;
  29. var supprise = false;
  30. var textIndex = 0;
  31. var actions = [makeDoubleFullCircleFirework, makePlanetCircleFirework, makeFullCircleFirework, makeDoubleCircleFirework, makeHeartFirework, makeCircleFirework, makeRandomFirework];
  32. for (var i = 0; i ‹ fireNumber; i++) {
  33. var fire = {
  34. x: Math.random() * range / 2 - range / 4 + center.x,
  35. y: Math.random() * range * 2.5 + canvas.height,
  36. size: Math.random() + 0.5,
  37. fill: '#ff3',
  38. vx: Math.random() - 0.5,
  39. vy: -(Math.random() + 4),
  40. ax: Math.random() * 0.06 - 0.03,
  41. delay: Math.round(Math.random() * range) + range * 4,
  42. hold: false,
  43. alpha: 1,
  44. far: Math.random() * range + (center.y - range)
  45. };
  46. fire.base = {
  47. x: fire.x,
  48. y: fire.y,
  49. vx: fire.vx,
  50. vy: fire.vy
  51. };
  52. //
  53. listFire.push(fire);
  54. // play sound
  55. playLaunchSound();
  56. }
  57. // define array of sound
  58. var listExpSound = $('audio.exp');
  59. var listLaunchSound = $('audio.launch');
  60. // define array position of text
  61. var textString = 'happylunarnewyear2018';
  62. var textMatrix = [
  63. 4.5, 0, 5.5, 0, 6.5, 0, 7.5, 0, 8.5, 0,
  64. 0, 1, 1, 1, 2, 1, 3, 1, 4, 1, 6, 1, 7, 1, 8, 1, 10, 1, 11, 1, 12, 1, 13, 1,
  65. 5, 2, 6, 2, 7, 2, 8, 2
  66. ]
  67. var chars = {
  68. h: [
  69. 0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
  70. 1, 3, 2, 3, 3, 3, 4, 3,
  71. 5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6, 5, 7
  72. ],
  73. a: [
  74. 2, 0, 2, 1, 2, 2, 1, 2, 1, 3, 1, 4, 1, 5, 0, 5, 0, 6, 0, 7, 2, 5,
  75. 3, 0, 3, 1, 3, 2, 4, 2, 4, 3, 4, 4, 4, 1, 5, 5, 5, 6, 5, 7, 3, 5
  76. ],
  77. p: [
  78. 0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
  79. 1, 0, 2, 0, 3, 0, 4, 1, 5, 2, 4, 3, 3, 4, 2, 4, 1, 4
  80. ],
  81. y: [
  82. 0, 0, 0, 1, 1, 1, 1, 2, 1, 3, 2, 3, 2, 4, 2, 5, 2, 6, 2, 7,
  83. 3, 2, 3, 3, 4, 1, 4, 2, 5, 0, 5, 1
  84. ],
  85. l: [
  86. 0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
  87. 1, 7, 2, 7, 3, 7, 4, 7, 5, 7
  88. ],
  89. u: [
  90. 0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6,
  91. 1, 7, 2, 7, 3, 7, 4, 7,
  92. 5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6
  93. ],
  94. n: [
  95. 0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
  96. 1, 1, 1, 2, 2, 2, 2, 3, 2, 4, 3, 4, 3, 5, 4, 5, 4, 6,
  97. 5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6, 5, 7
  98. ],
  99. e: [
  100. 0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
  101. 1, 0, 2, 0, 3, 0, 4, 0, 5, 0,
  102. 1, 3, 2, 3, 3, 3, 4, 3,
  103. 1, 7, 2, 7, 3, 7, 4, 7, 5, 7
  104. ],
  105. w: [
  106. 0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 1, 6,
  107. 2, 1, 2, 2, 2, 3, 2, 4, 2, 5, 2, 6, 2, 7, 3, 7,
  108. 5, 0, 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 4, 5, 4, 6
  109. ],
  110. r: [
  111. 0, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6, 0, 7,
  112. 1, 0, 2, 0, 3, 0, 4, 1, 5, 2, 4, 3, 3, 4, 2, 4, 1, 4,
  113. 1, 5, 2, 5, 3, 6, 4, 6, 5, 7
  114. ],
  115. 2: [
  116. 0, 1, 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 5, 1, 5, 2, 5, 3,
  117. 4, 3, 3, 3, 2, 3, 2, 4, 1, 4, 1, 5,
  118. 0, 5, 0, 6, 0, 7, 1, 7, 2, 7, 3, 7, 4, 7, 5, 7, 5, 6
  119. ],
  120. 0: [
  121. 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0, 6,
  122. 1, 0, 2, 0, 3, 0, 4, 0,
  123. 1, 7, 2, 7, 3, 7, 4, 7,
  124. 5, 1, 5, 2, 5, 3, 5, 4, 5, 5, 5, 6
  125. ],
  126. 1: [
  127. 1, 2, 2, 2, 2, 1, 3, 1, 3, 0,
  128. 4, 0, 4, 1, 4, 2, 4, 3, 4, 4, 4, 5, 4, 6, 4, 7,
  129. 1, 7, 2, 7, 3, 7, 5, 7
  130. ],
  131. 7: [
  132. 0, 0, 1, 0, 2, 0, 3, 0, 4, 0, 5, 0,
  133. 5, 1, 5, 2, 5, 3, 4, 3, 4, 4,
  134. 3, 4, 3, 5, 3, 6, 3, 7
  135. ]
  136. }
  137. function initText() {
  138. var i = textIndex;
  139. var velocity = Math.random() * 0.25 + 1;
  140. var shift = { x: -(Math.random() + 2), y: -(Math.random() + 3) };
  141. var char = chars[textString[i]];
  142. var width = 80;
  143. var half = 6.5 * width;
  144. var left = textMatrix[i * 2] * width - half;
  145. var top = textMatrix[i * 2 + 1] * range * 1.2 - range * 2.4;
  146. for (var j = 0; j ‹ fireNumber * char.length * 0.25; j++) {
  147. var rand = Math.floor(Math.random() * char.length * 0.5);
  148. var x = char[rand * 2] + shift.x;
  149. var y = char[rand * 2 + 1] + shift.y;
  150. var text = {
  151. x: center.x + left * 0.9,
  152. y: center.y + top,
  153. left: center.x + left,
  154. size: Math.random() + 0.5,
  155. fill: '#ff3',
  156. vx: x * (velocity + (Math.random() - 0.5) * 0.5),
  157. vy: y * (velocity + (Math.random() - 0.5) * 0.5),
  158. ay: 0.08,
  159. alpha: 1,
  160. life: Math.round(Math.random() * range / 2) + range / 1.5
  161. }
  162. text.base = {
  163. life: text.life,
  164. size: text.size,
  165. };
  166. text.direct = (text.left - text.x) * 0.08;
  167. listText.push(text);
  168. }
  169. // play sound
  170. playExpSound();
  171. //
  172. lights.push({ x: center.x + left * 0.9, y: center.y + top, color: text.fill, radius: range * 2 });
  173. if (++textIndex ‹ textString.length) {
  174. setTimeout(initText, 10);
  175. }
  176. else {
  177. textIndex = 0;
  178. }
  179. }
  180. function initSpark() {
  181. var x = Math.random() * range * 3 - range * 1.5 + center.x;
  182. var vx = Math.random() - 0.5;
  183. var vy = -(Math.random() + 4);
  184. var ax = Math.random() * 0.04 - 0.02;
  185. var far = Math.random() * range * 4 - range + center.y;
  186. var direct = ax * 10 * Math.PI;
  187. var max = fireNumber * 0.5;
  188. for (var i = 0; i ‹ max; i++) {
  189. var special = {
  190. x: x,
  191. y: Math.random() * range * 0.25 + canvas.height,
  192. size: Math.random() + 2,
  193. fill: '#ff3',
  194. vx: vx,
  195. vy: vy,
  196. ax: ax,
  197. direct: direct,
  198. alpha: 1
  199. };
  200. special.far = far - (special.y - canvas.height);
  201. listSpecial.push(special);
  202. // play sound
  203. playLaunchSound();
  204. }
  205. }
  206. function randColor() {
  207. var r = Math.floor(Math.random() * 256);
  208. var g = Math.floor(Math.random() * 256);
  209. var b = Math.floor(Math.random() * 256);
  210. var color = 'rgb($r, $g, $b)';
  211. color = color.replace('$r', r);
  212. color = color.replace('$g', g);
  213. color = color.replace('$b', b);
  214. return color;
  215. }
  216. function playExpSound() {
  217. var sound = listExpSound[Math.floor(Math.random() * listExpSound.length)];
  218. sound.volume = Math.random() * 0.4 + 0.1;
  219. sound.play();
  220. }
  221. function playLaunchSound() {
  222. setTimeout(function() {
  223. var sound = listLaunchSound[Math.floor(Math.random() * listLaunchSound.length)];
  224. sound.volume = 0.05;
  225. sound.play();
  226. }, 200);
  227. }
  228. function makeCircleFirework(fire) {
  229. var color = randColor();
  230. var velocity = Math.random() * 2 + 6;
  231. var max = fireNumber * 5;
  232. for (var i = 0; i ‹ max; i++) {
  233. var rad = (i * Math.PI * 2) / max;
  234. var firework = {
  235. x: fire.x,
  236. y: fire.y,
  237. size: Math.random() + 1.5,
  238. fill: color,
  239. vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  240. vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  241. ay: 0.04,
  242. alpha: 1,
  243. life: Math.round(Math.random() * range / 2) + range / 2
  244. };
  245. firework.base = {
  246. life: firework.life,
  247. size: firework.size
  248. };
  249. listFirework.push(firework);
  250. }
  251. return color;
  252. }
  253. function makeDoubleCircleFirework(fire) {
  254. var color = randColor();
  255. var velocity = Math.random() * 2 + 8;
  256. var max = fireNumber * 3;
  257. for (var i = 0; i ‹ max; i++) {
  258. var rad = (i * Math.PI * 2) / max;
  259. var firework = {
  260. x: fire.x,
  261. y: fire.y,
  262. size: Math.random() + 1.5,
  263. fill: color,
  264. vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  265. vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  266. ay: 0.04,
  267. alpha: 1,
  268. life: Math.round(Math.random() * range / 2) + range / 1.5
  269. };
  270. firework.base = {
  271. life: firework.life,
  272. size: firework.size
  273. };
  274. listFirework.push(firework);
  275. }
  276. color = randColor();
  277. velocity = Math.random() * 3 + 4;
  278. for (var i = 0; i ‹ max; i++) {
  279. var rad = (i * Math.PI * 2) / max;
  280. var firework = {
  281. x: fire.x,
  282. y: fire.y,
  283. size: Math.random() + 1.5,
  284. fill: color,
  285. vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  286. vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  287. ay: 0.04,
  288. alpha: 1,
  289. life: Math.round(Math.random() * range / 2) + range / 1.5
  290. };
  291. firework.base = {
  292. life: firework.life,
  293. size: firework.size
  294. };
  295. listFirework.push(firework);
  296. }
  297. return color;
  298. }
  299. function makePlanetCircleFirework(fire) {
  300. var color = '#aa0609';
  301. var velocity = Math.random() * 2 + 4;
  302. var max = fireNumber * 2;
  303. for (var i = 0; i ‹ max; i++) {
  304. var rad = (i * Math.PI * 2) / max;
  305. var firework = {
  306. x: fire.x,
  307. y: fire.y,
  308. size: Math.random() + 1.5,
  309. fill: color,
  310. vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  311. vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  312. ay: 0.04,
  313. alpha: 1,
  314. life: Math.round(Math.random() * range / 2) + range / 1.5
  315. };
  316. firework.base = {
  317. life: firework.life,
  318. size: firework.size
  319. };
  320. listFirework.push(firework);
  321. }
  322. max = fireNumber * 4;
  323. for (var i = 0; i ‹ max; i++) {
  324. var rad = (i * Math.PI * 2) / max;
  325. var firework = {
  326. x: fire.x,
  327. y: fire.y,
  328. size: Math.random() + 1.5,
  329. fill: color,
  330. vx: Math.cos(rad) * velocity * Math.random(),
  331. vy: Math.sin(rad) * velocity * Math.random(),
  332. ay: 0.04,
  333. alpha: 1,
  334. life: Math.round(Math.random() * range / 2) + range / 1.5
  335. };
  336. firework.base = {
  337. life: firework.life,
  338. size: firework.size
  339. };
  340. listFirework.push(firework);
  341. }
  342. max = fireNumber * 3;
  343. color = '#ff9';
  344. var rotate = Math.random() * Math.PI * 2;
  345. var vx = velocity *  (Math.random() + 2);
  346. var vy = velocity * 0.6;
  347. for (var i = 0; i ‹ max; i++) {
  348. var rad = (i * Math.PI * 2) / max;
  349. // calc x, y for ellipse
  350. var cx = Math.cos(rad) * vx + (Math.random() - 0.5) * 0.5;
  351. var cy = Math.sin(rad) * vy + (Math.random() - 0.5) * 0.5;
  352. var firework = {
  353. x: fire.x,
  354. y: fire.y,
  355. size: Math.random() + 1.5,
  356. fill: color,
  357. vx: cx * Math.cos(rotate) - cy * Math.sin(rotate), // rotate x ellipse
  358. vy: cx * Math.sin(rotate) + cy * Math.cos(rotate), // rotate y ellipse
  359. ay: 0.02,
  360. alpha: 1,
  361. life: Math.round(Math.random() * range / 2) + range / 1.5
  362. };
  363. firework.base = {
  364. life: firework.life,
  365. size: firework.size
  366. };
  367. listFirework.push(firework);
  368. }
  369. return '#aa0609';
  370. }
  371. function makeFullCircleFirework(fire) {
  372. var color = randColor();
  373. var velocity = Math.random() * 8 + 8;
  374. var max = fireNumber * 3;
  375. for (var i = 0; i ‹ max; i++) {
  376. var rad = (i * Math.PI * 2) / max;
  377. var firework = {
  378. x: fire.x,
  379. y: fire.y,
  380. size: Math.random() + 1.5,
  381. fill: color,
  382. vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  383. vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  384. ay: 0.06,
  385. alpha: 1,
  386. life: Math.round(Math.random() * range / 2) + range / 1.5
  387. };
  388. firework.base = {
  389. life: firework.life,
  390. size: firework.size
  391. };
  392. listFirework.push(firework);
  393. }
  394. max = fireNumber * Math.round(Math.random() * 4 + 4);
  395. for (var i = 0; i ‹ max; i++) {
  396. var rad = (i * Math.PI * 2) / max;
  397. var firework = {
  398. x: fire.x,
  399. y: fire.y,
  400. size: Math.random() + 1.5,
  401. fill: color,
  402. vx: Math.cos(rad) * velocity * Math.random(),
  403. vy: Math.sin(rad) * velocity * Math.random(),
  404. ay: 0.06,
  405. alpha: 1,
  406. life: Math.round(Math.random() * range / 2) + range / 1.5
  407. };
  408. firework.base = {
  409. life: firework.life,
  410. size: firework.size
  411. };
  412. listFirework.push(firework);
  413. }
  414. return color;
  415. }
  416. function makeDoubleFullCircleFirework(fire) {
  417. var color = randColor();
  418. var velocity = Math.random() * 8 + 8;
  419. var max = fireNumber * 3;
  420. for (var i = 0; i ‹ max; i++) {
  421. var rad = (i * Math.PI * 2) / max;
  422. var firework = {
  423. x: fire.x,
  424. y: fire.y,
  425. size: Math.random() + 1.5,
  426. fill: color,
  427. vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  428. vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  429. ay: 0.04,
  430. alpha: 1,
  431. life: Math.round(Math.random() * range / 2) + range / 1.5
  432. };
  433. firework.base = {
  434. life: firework.life,
  435. size: firework.size
  436. };
  437. listFirework.push(firework);
  438. }
  439. color = randColor();
  440. velocity = Math.random() * 3 + 4;
  441. max = fireNumber * 2;
  442. for (var i = 0; i ‹ max; i++) {
  443. var rad = (i * Math.PI * 2) / max;
  444. var firework = {
  445. x: fire.x,
  446. y: fire.y,
  447. size: Math.random() + 1.5,
  448. fill: color,
  449. vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  450. vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  451. ay: 0.06,
  452. alpha: 1,
  453. life: Math.round(Math.random() * range / 2) + range / 1.5
  454. };
  455. firework.base = {
  456. life: firework.life,
  457. size: firework.size
  458. };
  459. listFirework.push(firework);
  460. }
  461. max = fireNumber * 4;
  462. for (var i = 0; i ‹ max; i++) {
  463. var rad = (i * Math.PI * 2) / max;
  464. var firework = {
  465. x: fire.x,
  466. y: fire.y,
  467. size: Math.random() + 1.5,
  468. fill: color,
  469. vx: Math.cos(rad) * velocity * Math.random(),
  470. vy: Math.sin(rad) * velocity * Math.random(),
  471. ay: 0.06,
  472. alpha: 1,
  473. life: Math.round(Math.random() * range / 2) + range / 1.5
  474. };
  475. firework.base = {
  476. life: firework.life,
  477. size: firework.size
  478. };
  479. listFirework.push(firework);
  480. }
  481. return color;
  482. }
  483. function makeHeartFirework(fire) {
  484. var color = randColor();
  485. var velocity = Math.random() * 3 + 3;
  486. var max = fireNumber * 5;
  487. var rotate = Math.random() * Math.PI * 2;
  488. for (var i = 0; i ‹ max; i++) {
  489. var rad = (i * Math.PI * 2) / max + rotate;
  490. var v, p;
  491. if (rad - rotate ‹ Math.PI * 0.5) {
  492. p = (rad - rotate) / (Math.PI * 0.5);
  493. v = velocity + velocity * p;
  494. }
  495. else if (rad - rotate > Math.PI * 0.5 && rad - rotate ‹ Math.PI) {
  496. p = (rad - rotate - Math.PI * 0.5) / (Math.PI * 0.5);
  497. v = velocity * (2 - p);
  498. }
  499. else if (rad - rotate > Math.PI && rad - rotate ‹ Math.PI * 1.5) {
  500. p = (rad - rotate - Math.PI) / (Math.PI * 0.5);
  501. v = velocity * (1 - p);
  502. }
  503. else if (rad - rotate > Math.PI * 1.5 && rad - rotate ‹ Math.PI * 2) {
  504. p = (rad - rotate - Math.PI * 1.5) / (Math.PI * 0.5);
  505. v = velocity * p;
  506. }
  507. else {
  508. v = velocity;
  509. }
  510. v = v + (Math.random() - 0.5) * 0.25;
  511. var firework = {
  512. x: fire.x,
  513. y: fire.y,
  514. size: Math.random() + 1.5,
  515. fill: color,
  516. vx: Math.cos(rad) * v,
  517. vy: Math.sin(rad) * v,
  518. ay: 0.02,
  519. alpha: 1,
  520. life: Math.round(Math.random() * range / 2) + range / 1.5
  521. };
  522. firework.base = {
  523. life: firework.life,
  524. size: firework.size
  525. };
  526. listFirework.push(firework);
  527. }
  528. return color;
  529. }
  530. function makeRandomFirework(fire) {
  531. var color = randColor();
  532. for (var i = 0; i ‹ fireNumber * 5; i++) {
  533. var firework = {
  534. x: fire.x,
  535. y: fire.y,
  536. size: Math.random() + 1.5,
  537. fill: color,
  538. vx: Math.random() * 15 - 7.5,
  539. vy: Math.random() * -15 + 5,
  540. ay: 0.05,
  541. alpha: 1,
  542. life: Math.round(Math.random() * range / 2) + range / 2
  543. };
  544. firework.base = {
  545. life: firework.life,
  546. size: firework.size
  547. };
  548. listFirework.push(firework);
  549. }
  550. return color;
  551. }
  552. function makeSpark(special) {
  553. var color = special.fill;
  554. var velocity = Math.random() * 6 + 12;
  555. var max = fireNumber;
  556. for (var i = 0; i ‹ max; i++) {
  557. var rad = (Math.random() * Math.PI * 0.3 + Math.PI * 0.35) + Math.PI + special.direct;
  558. var spark = {
  559. x: special.x,
  560. y: special.y,
  561. size: Math.random() + 1,
  562. fill: color,
  563. vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  564. vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  565. ay: 0.02,
  566. alpha: 1,
  567. rad: rad,
  568. direct: special.direct,
  569. chain: Math.round(Math.random() * 2) + 2,
  570. life: Math.round(Math.random() * range / 2) + range / 2
  571. };
  572. spark.base = {
  573. life: spark.life,
  574. velocity: velocity
  575. };
  576. listSpark.push(spark);
  577. }
  578. return color;
  579. }
  580. function chainSpark(parentSpark) {
  581. var color = parentSpark.fill;
  582. if (parentSpark.chain > 0) {
  583. var velocity = parentSpark.base.velocity * 0.6;
  584. var max = Math.round(Math.random() * 5);
  585. for (var i = 0; i ‹ max; i++) {
  586. var rad = (Math.random() * Math.PI * 0.3 - Math.PI * 0.15) + parentSpark.rad + parentSpark.direct;
  587. var spark = {
  588. x: parentSpark.x,
  589. y: parentSpark.y,
  590. size: parentSpark.size * 0.6,
  591. fill: color,
  592. vx: Math.cos(rad) * velocity + (Math.random() - 0.5) * 0.5,
  593. vy: Math.sin(rad) * velocity + (Math.random() - 0.5) * 0.5,
  594. ay: 0.02,
  595. alpha: 1,
  596. rad: rad,
  597. direct: parentSpark.direct,
  598. chain: parentSpark.chain,
  599. life: parentSpark.base.life * 0.8
  600. };
  601. spark.base = {
  602. life: spark.life,
  603. size: spark.size,
  604. velocity: velocity
  605. };
  606. listSpark.push(spark);
  607. }
  608. if (Math.random() > 0.9 && parentSpark.chain > 1) {
  609. // play sound
  610. playExpSound();
  611. }
  612. }
  613. return color;
  614. }
  615. (function loop() {
  616. requestAnimationFrame(loop);
  617. update();
  618. draw();
  619. })();
  620. function update() {
  621. // update fire logic
  622. for (var i = 0; i ‹ listFire.length; i++) {
  623. var fire = listFire[i];
  624. //
  625. if (fire.y ‹= fire.far) {
  626. // play sound
  627. playExpSound();
  628. // case add firework
  629. fired++;
  630. var color = actions[Math.floor(Math.random() * actions.length)](fire);
  631. // light
  632. lights.push({ x: fire.x, y: fire.y, color: color, radius: range * 2 });
  633. // reset
  634. fire.y = fire.base.y;
  635. fire.x = fire.base.x;
  636. // special
  637. if (fired % 33 == 0) {
  638. initSpark();
  639. }
  640. // on hold
  641. supprise = fired % 100 == 0 ? true : supprise;
  642. if (supprise) {
  643. fire.vx = 0;
  644. fire.vy = 0;
  645. fire.ax = 0;
  646. fire.hold = true;
  647. onHold++;
  648. }
  649. else {
  650. fire.vx = fire.base.vx;
  651. fire.vy = fire.base.vy;
  652. fire.ax = Math.random() * 0.06 - 0.03;
  653. // play sound
  654. playLaunchSound();
  655. }
  656. }
  657. //
  658. if (fire.hold && fire.delay ‹= 0) {
  659. onHold--;
  660. fire.hold = false;
  661. fire.delay = Math.round(Math.random() * range) + range * 4;
  662. fire.vx = fire.base.vx;
  663. fire.vy = fire.base.vy;
  664. fire.ax = Math.random() * 0.06 - 0.03;
  665. fire.alpha = 1;
  666. // play sound
  667. playLaunchSound();
  668. }
  669. else if (fire.hold && fire.delay > 0) {
  670. fire.delay--;
  671. }
  672. else {
  673. fire.x += fire.vx;
  674. fire.y += fire.vy;
  675. fire.vx += fire.ax;
  676. fire.alpha = (fire.y - fire.far) / fire.far;
  677. }
  678. }
  679. // update firework logic
  680. for (var i = listFirework.length - 1; i >= 0; i--) {
  681. var firework = listFirework[i];
  682. if (firework) {
  683. firework.vx *= 0.9;
  684. firework.vy *= 0.9;
  685. firework.x += firework.vx;
  686. firework.y += firework.vy;
  687. firework.vy += firework.ay;
  688. firework.alpha = firework.life / firework.base.life;
  689. firework.size = firework.alpha * firework.base.size;
  690. firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
  691. //
  692. firework.life--;
  693. if (firework.life ‹= 0) {
  694. listFirework.splice(i, 1);
  695. }
  696. }
  697. }
  698. // supprise happy new year!
  699. if (supprise && onHold == 10) {
  700. supprise = false;
  701. setTimeout(initText, 3000);
  702. }
  703. // update text logic
  704. for (var i = listText.length - 1; i >= 0; i--) {
  705. var text = listText[i];
  706. text.vx *= 0.9;
  707. text.vy *= 0.9;
  708. text.direct *= 0.9;
  709. text.x += text.vx + text.direct;
  710. text.y += text.vy;
  711. text.vy += text.ay;
  712. text.alpha = text.life / text.base.life;
  713. text.size = text.alpha * text.base.size;
  714. text.alpha = text.alpha > 0.6 ? 1 : text.alpha;
  715. //
  716. text.life--;
  717. if (text.life ‹= 0) {
  718. listText.splice(i, 1);
  719. }
  720. }
  721. // update special logic
  722. for (var i = listSpecial.length - 1; i >= 0; i--) {
  723. var special = listSpecial[i];
  724. if (special.y ‹= special.far) {
  725. // play sound
  726. playExpSound();
  727. // light
  728. lights.push({ x: special.x, y: special.y, color: special.fill, alpha: 0.02, radius: range * 2 });
  729. //
  730. makeSpark(special);
  731. // remove from list
  732. listSpecial.splice(i, 1);
  733. }
  734. else {
  735. special.x += special.vx;
  736. special.y += special.vy;
  737. special.vx += special.ax;
  738. special.alpha = (special.y - special.far) / special.far;
  739. }
  740. }
  741. // update spark logic
  742. for (var i = listSpark.length - 1; i >= 0; i--) {
  743. var spark = listSpark[i];
  744. if (spark) {
  745. spark.vx *= 0.9;
  746. spark.vy *= 0.9;
  747. spark.x += spark.vx;
  748. spark.y += spark.vy;
  749. spark.vy += spark.ay;
  750. spark.alpha = spark.life / spark.base.life + 0.2;
  751. //
  752. spark.life--;
  753. if (spark.life ‹ spark.base.life * 0.8 && spark.life > 0) {
  754. //
  755. spark.chain--;
  756. chainSpark(spark);
  757. }
  758. if (spark.life ‹= 0) {
  759. listSpark.splice(i, 1);
  760. }
  761. }
  762. }
  763. }
  764. function draw() {
  765. // clear
  766. ctx.globalCompositeOperation = 'source-over';
  767. ctx.globalAlpha = 0.2;
  768. ctx.fillStyle = '#000003';
  769. ctx.fillRect(0, 0, canvas.width, canvas.height);
  770. // re-draw
  771. ctx.globalCompositeOperation = 'screen';
  772. for (var i = 0; i ‹ listFire.length; i++) {
  773. var fire = listFire[i];
  774. ctx.globalAlpha = fire.alpha;
  775. ctx.beginPath();
  776. ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
  777. ctx.closePath();
  778. ctx.fillStyle = fire.fill;
  779. ctx.fill();
  780. }
  781. for (var i = 0; i ‹ listFirework.length; i++) {
  782. var firework = listFirework[i];
  783. ctx.globalAlpha = firework.alpha;
  784. ctx.beginPath();
  785. ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
  786. ctx.closePath();
  787. ctx.fillStyle = firework.fill;
  788. ctx.fill();
  789. }
  790. for (var i = 0; i ‹ listSpecial.length; i++) {
  791. var special = listSpecial[i];
  792. ctx.globalAlpha = special.alpha;
  793. // ctx.beginPath();
  794. // ctx.arc(special.x, special.y, special.size, 0, Math.PI * 2);
  795. // ctx.closePath();
  796. // ctx.fill();
  797. ctx.fillStyle = special.fill;
  798. ctx.fillRect(special.x - special.size, special.y - special.size, special.size * 2, special.size *2);
  799. }
  800. for (var i = 0; i ‹ listSpark.length; i++) {
  801. var spark = listSpark[i];
  802. ctx.globalAlpha = spark.alpha;
  803. // ctx.beginPath();
  804. // ctx.arc(spark.x, spark.y, spark.size, 0, Math.PI * 2);
  805. // ctx.closePath();
  806. // ctx.fill();
  807. ctx.fillStyle = spark.fill;
  808. ctx.fillRect(spark.x - spark.size, spark.y - spark.size, spark.size * 2, spark.size *2);
  809. }
  810. // light effect
  811. while (lights.length) {
  812. var light = lights.pop();
  813. var gradient = ctx.createRadialGradient(light.x, light.y, 0, light.x, light.y, light.radius);
  814. gradient.addColorStop(0, '#fff');
  815. gradient.addColorStop(0.2, light.color);
  816. gradient.addColorStop(0.8, 'rgba(0, 0, 0, 0)');
  817. gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
  818. ctx.globalAlpha = light.alpha ? light.alpha : 0.25;
  819. ctx.fillStyle = gradient;
  820. ctx.fillRect(light.x - light.radius, light.y - light.radius, light.radius * 2, light.radius * 2);
  821. }
  822. // supprise: HAPPY LUNAR NEW YEAR 2018!
  823. for (var i = 0; i ‹ listText.length; i++) {
  824. var text = listText[i];
  825. ctx.globalAlpha = text.alpha;
  826. ctx.fillStyle = text.fill;
  827. ctx.fillRect(text.x - text.size, text.y - text.size, text.size * 2, text.size * 2);
  828. }
  829. }
  830. })
复制代码
  index首页代码如下:
  1. ‹!DOCTYPE html>
  2. ‹html lang="en" >
  3. ‹head>
  4. ‹meta charset="UTF-8">
  5. ‹title>新年快乐‹/title>
  6. ‹link rel="stylesheet" href="css/style.css" rel="external nofollow" >
  7. ‹/head>
  8. ‹body>
  9. ‹canvas id="canvas">‹/canvas>
  10. ‹div class="block-audio">
  11.   ‹audio class="exp" src="m/exp1.mp3" controls>‹/audio>
  12.   ‹audio class="exp" src="m/exp1.mp3" controls>‹/audio>
  13.   ‹audio class="exp" src="m/exp1.mp3" controls>‹/audio>
  14.   ‹audio class="exp" src="m/exp2.mp3" controls>‹/audio>
  15.   ‹audio class="exp" src="m/exp2.mp3" controls>‹/audio>
  16.   ‹audio class="exp" src="m/exp2.mp3" controls>‹/audio>
  17.   ‹audio class="exp" src="m/exp3.mp3" controls>‹/audio>
  18.   ‹audio class="exp" src="m/exp3.mp3" controls>‹/audio>
  19.   ‹audio class="exp" src="m/exp3.mp3" controls>‹/audio>
  20.   ‹audio class="exp" src="m/exp4.mp3" controls>‹/audio>
  21.   ‹audio class="exp" src="m/exp4.mp3" controls>‹/audio>
  22.   ‹audio class="exp" src="m/exp4.mp3" controls>‹/audio>
  23.   ‹audio class="exp" src="m/exp5.mp3" controls>‹/audio>
  24.   ‹audio class="exp" src="m/exp5.mp3" controls>‹/audio>
  25.   ‹audio class="exp" src="m/exp5.mp3" controls>‹/audio>
  26.   ‹audio class="exp" src="m/exp6.mp3" controls>‹/audio>
  27.   ‹audio class="exp" src="m/exp6.mp3" controls>‹/audio>
  28.   ‹audio class="exp" src="m/exp6.mp3" controls>‹/audio>
  29.   ‹audio class="exp" src="m/exp7.mp3" controls>‹/audio>
  30.   ‹audio class="exp" src="m/exp7.mp3" controls>‹/audio>
  31.   ‹audio class="exp" src="m/exp7.mp3" controls>‹/audio>
  32.   ‹audio class="exp" src="m/exp8.mp3" controls>‹/audio>
  33.   ‹audio class="exp" src="m/exp8.mp3" controls>‹/audio>
  34.   ‹audio class="exp" src="m/exp8.mp3" controls>‹/audio>
  35.   ‹audio class="launch" src="m/launch1.mp3" controls>‹/audio>
  36.   ‹audio class="launch" src="m/launch1.mp3" controls>‹/audio>
  37.   ‹audio class="launch" src="m/launch2.mp3" controls>‹/audio>
  38.   ‹audio class="launch" src="m/launch2.mp3" controls>‹/audio>
  39.   ‹audio class="launch" src="m/launch3.mp3" controls>‹/audio>
  40.   ‹audio class="launch" src="m/launch3.mp3" controls>‹/audio>
  41.   ‹audio class="launch" src="m/launch4.mp3" controls>‹/audio>
  42.   ‹audio class="launch" src="m/launch4.mp3" controls>‹/audio>
  43.   ‹audio class="launch" src="m/launch5.mp3" controls>‹/audio>
  44.   ‹audio class="launch" src="m/launch5.mp3" controls>‹/audio>
  45. ‹/div>
  46. ‹script type="text/javascript" src="js/jquery.min.js">‹/script>
  47. ‹script type="text/javascript" src="js/index.js">‹/script>
  48. ‹/body>
  49. ‹/html>
复制代码
  css代码如下:
  1. canvas {
  2.   display: block;
  3. }
  4. .block-audio {
  5.   display: none;
  6. }
  7. body{padding: 0px;margin: 0px}
复制代码
  最后运行烟花特效动态图如下: 

  以上就是JavaScript实现带音效的烟花特效的详细内容,更多关于JavaScript烟花特效的资料请关注脚本之家其它相关文章!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 19:57 , Processed in 0.077857 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表