新年快乐! javascript实现超级炫酷的3D烟花特效


Posted in Javascript onJanuary 30, 2019

本文实例为大家分享了javascript实现3D烟花特效的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 
<meta charset="utf-8">
<title>3D烟花</title>

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

#canvas{
 width:100%;
 height:100%;
}
</style>
</head>
 
 <body>
<canvas id="canvas" width="825" height="631"></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="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)*(point.x-x)+(point.y-y)*(point.y-y)+(point.z-z)*(point.z-z));
 if(d>9){
 sparks[i].trail.push(point);
 }
 }else{
 sparks[i].trail.push(point);
 }
 if(sparks[i].trail.length>5)sparks[i].trail.splice(0,1); 
 sparks[i].x+=sparks[i].vx;
 sparks[i].y+=sparks[i].vy;
 sparks[i].z+=sparks[i].vz;
 sparks[i].vx/=1.075;
 sparks[i].vy/=1.075;
 sparks[i].vz/=1.075;
 }else{
 sparks.splice(i,1);
 }
 }
 p=Math.atan2(playerX,playerZ);
 d=Math.sqrt(playerX*playerX+playerZ*playerZ);
 d+=Math.sin(frames/80)/1.25;
 t=Math.sin(frames/200)/40;
 playerX=Math.sin(p+t)*d;
 playerZ=Math.cos(p+t)*d;
 yaw=pi+p+t;
}

function rgb(col){
 
 var r = parseInt((.5+Math.sin(col)*.5)*16);
 var g = parseInt((.5+Math.cos(col)*.5)*16);
 var b = parseInt((.5-Math.sin(col)*.5)*16);
 return "#"+r.toString(16)+g.toString(16)+b.toString(16);
}

function draw(){
 
 ctx.clearRect(0,0,cx*2,cy*2);
 
 ctx.fillStyle="#ff8";
 for(i=-100;i<100;i+=3){
 for(j=-100;j<100;j+=4){
 x=i;z=j;y=25;
 point=rasterizePoint(x,y,z);
 if(point.d!=-1){
 size=250/(1+point.d);
 d = Math.sqrt(x * x + z * z);
 a = 0.75 - Math.pow(d / 100, 6) * 0.75;
 if(a>0){
 ctx.globalAlpha = a;
 ctx.fillRect(point.x-size/2,point.y-size/2,size,size); 
 }
 }
 }
 }
 ctx.globalAlpha=1;
 for(i=0;i<seeds.length;++i){
 point=rasterizePoint(seeds[i].x,seeds[i].y,seeds[i].z);
 if(point.d!=-1){
 size=200/(1+point.d);
 ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
 }
 }
 point1=new Object();
 for(i=0;i<sparks.length;++i){
 point=rasterizePoint(sparks[i].x,sparks[i].y,sparks[i].z);
 if(point.d!=-1){
 size=sparks[i].radius*200/(1+point.d);
 if(sparks[i].alpha<0)sparks[i].alpha=0;
 if(sparks[i].trail.length){
 point1.x=point.x;
 point1.y=point.y;
 switch(sparks[i].img){
 case sparkPics[0]:ctx.strokeStyle="#f84";break;
 case sparkPics[1]:ctx.strokeStyle="#84f";break;
 case sparkPics[2]:ctx.strokeStyle="#8ff";break;
 case sparkPics[3]:ctx.strokeStyle="#fff";break;
 case sparkPics[4]:ctx.strokeStyle="#4f8";break;
 case sparkPics[5]:ctx.strokeStyle="#f44";break;
 case sparkPics[6]:ctx.strokeStyle="#f84";break;
 case sparkPics[7]:ctx.strokeStyle="#84f";break;
 case sparkPics[8]:ctx.strokeStyle="#fff";break;
 case sparkPics[9]:ctx.strokeStyle="#44f";break;
 }
 for(j=sparks[i].trail.length-1;j>=0;--j){
 point2=rasterizePoint(sparks[i].trail[j].x,sparks[i].trail[j].y,sparks[i].trail[j].z);
 if(point2.d!=-1){
 ctx.globalAlpha=j/sparks[i].trail.length*sparks[i].alpha/2;
 ctx.beginPath();
 ctx.moveTo(point1.x,point1.y);
 ctx.lineWidth=1+sparks[i].radius*10/(sparks[i].trail.length-j)/(1+point2.d);
 ctx.lineTo(point2.x,point2.y);
 ctx.stroke();
 point1.x=point2.x;
 point1.y=point2.y;
 }
 }
 }
 ctx.globalAlpha=sparks[i].alpha;
 ctx.drawImage(sparks[i].img,point.x-size/2,point.y-size/2,size,size);
 }
 }
}

function frame(){

 if(frames>100000){
 seedTimer=0;
 frames=0;
 }
 frames++;
 draw();
 doLogic();
 requestAnimationFrame(frame);
}

window.addEventListener("resize",()=>{
 canvas.width=canvas.clientWidth;
 canvas.height=canvas.clientHeight;
 cx=canvas.width/2;
 cy=canvas.height/2;
});

initVars();
frame();</script>


</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的放大镜效果
May 30 Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
什么是SOLID
Mar 24 Javascript
JavaScript之解构赋值的理解
Jan 30 #Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 #Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 #Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 #Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 #Javascript
AJAX在JQuery中的应用详解
Jan 30 #jQuery
JS实现换肤功能的方法实例详解
Jan 30 #Javascript
You might like
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
PHP7新特性简述
2017/06/11 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python实现简单socket通信的方法
2016/04/19 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Django之腾讯云短信的实现
2020/06/12 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
详解pandas赋值失败问题解决
2020/11/29 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
数据库面试要点基本概念
2013/10/31 面试题
外科实习自我鉴定
2013/10/06 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
职工运动会感言
2014/02/07 职场文书
《记金华的双龙洞》教学反思
2014/04/19 职场文书
师范生求职信
2014/06/14 职场文书
小学雷锋月活动总结
2014/07/03 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
欢送会主持词
2015/07/01 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书