2023跨年烟花3D最炫烟花,html最酷炫动态烟花源码分享,点击即可直接运行

Posted 在下马农

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2023跨年烟花3D最炫烟花,html最酷炫动态烟花源码分享,点击即可直接运行相关的知识,希望对你有一定的参考价值。

📋 前言

  • 🖱 博客主页:在下马农的碎碎念
  • ✍ 本文由在下马农原创,首发于CSDN
  • 📆 首发时间:2022/12/25
  • 📅 最近更新时间:2022/12/25
  • 🤵 此马非凡马,房星本是星。向前敲瘦骨,犹自带铜声。
  • 🙏作者水平有限,如发现错误,请留言轰炸哦!万分感谢!
  • 🤗 欢迎关注🔎点赞👍收藏⭐️留言📝先赞后看,腰缠万贯

翩翩浊世佳公子,富贵功名总等闲 ——纳兰性德《纳兰词》

去年年末,闲来无事写了一篇除夕最炫烟花的文章,受到了大家的广泛喜爱,今年又是一个无聊的周末,找了一份3D版的烟花源码送给大家。仍然是小白也能轻松上手,一起感受html的美吧!


以下是正文

一、效果展示

二、不多哔哔,直接上代码

小白不想看代码的,可直接跳转第三步,获取源码直接运行。

全部代码(Html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5+Canvas漂亮的3D烟花动画生日特效</title>

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

</style>

</head>
<body>
<audio id="a1" loop="loop">
	<source src="https://music.163.com/song/media/outer/url?id=1877996649.mp3">
</audio>
<canvas id="canvas" style="position:absolute;width:100%;height:100%;z-index:8888"></canvas>
<canvas style="position:absolute;width:100%;height:100%;z-index:9999" class="canvas" ></canvas>
<div class="overlay">
  <div class="tabs">
    <div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div>

    <div class="tabs-panels">
      <ul class="tabs-panel commands">
      </ul>
    </div>
  </div>
</div>
<script>
window.onload=function () 
	let oA=document.querySelector("#a1");
	let timer=null;
	function autoPlay() 
		if (oA.paused) 
			oA.paused=false;
			oA.volume=0.5;
			oA.play();
		else 
			clearInterval(timer);
		
	
	timer=setInterval(autoPlay,1);

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="https://cantelope.org/NYE/";
	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=new Audio(s+"pow1.ogg"); break;
		case 1:	pow=new Audio(s+"pow2.ogg"); break;
		case 2:	pow=new Audio(s+"pow3.ogg"); break;
		case 3:	pow=new Audio(s+"pow4.ogg"); break;
	
	d=Math.sqrt((x-playerX)*(x-playerX)+(y-playerY)*(y-playerY)+(z-playerZ)*(z-playerZ));
	pow.volume=1.5/(1+d/10);
	pow.play();


function doLogic()

	if(seedTimer<frames)
		seedTimer=frames+seedInterval*Math.random()*10;
		spawnSeed();
	
	for(i=0;i<seeds.length;++i)
		seeds[i].vy+=gravity;
		seeds[i].x+=seeds[i].vx;
		seeds[i].y+=seeds[i].vy;
		seeds[i].z+=seeds[i].vz;
		if(frames-seeds[i].born>seedLife)
			splode(seeds[i].x,seeds[i].y,seeds[i].z);
			seeds.splice(i,1);
		
	
	for(i=0;i<sparks.length;++i)
		if(sparks[i].alpha>0 && sparks[i].radius>5)
			sparks[i].alpha-=.01;
			sparks[i].radius/=1.02;
			sparks[i].vy+=gravity;
			point=new Object();
			point.x=sparks[i].x;
			point.y=sparks[i].y;
			point.z=sparks[i].z;
			if(sparks[i].trail.length)
				x=sparks[i].trail[sparks[i].trail.length-1].x;
				y=sparks[i].trail[sparks[i].trail.length-1].y;
				z=sparks[i].trail[sparks[i].trail.length-1].z;
				d=((point.x-x)以上是关于2023跨年烟花3D最炫烟花,html最酷炫动态烟花源码分享,点击即可直接运行的主要内容,如果未能解决你的问题,请参考以下文章

除夕最炫烟花代码—— HTML+JQuery实现2022跨年烟花特效

HTML实现除夕最美烟花,2023春节倒计时,新年不可没有烟花,最炫烟花代码分享

HTML2023跨年烟花代码

2023跨年烟花(浪漫烟花+美妙音乐+雪花飘飘)含前端源码直接下载---系列最终篇

2023跨年烟花(浪漫烟花+美妙音乐+雪花飘飘)含前端源码直接下载---系列最终篇

跨年烟花代码合集含动态展示效果及网盘代码下载