烟花代码(本人亲测,有效)

代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>过年好</title> 
<script type="text/javascript"> <style>
html,body{margin:80px;width:100%;height:100%;overflow:hidden;background:#80;
}#canvas{width:300%;height:300%;
}
</script> 
<style type="text/css">.aa{font: "微软雅黑";font-size: 30px;color: gold;   text-align: center;  } 
</style> 
</head><body style="background:#000;font:12px Arial"><p class="aa">新年快乐</p>  <audio src="audio/"></audio> } 
<canvas id="canvas" width="1888" height="790"></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>

效果如下:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/14672.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML烟花特效,除夕快到了,把它收藏下来,过年和最重要的她一起看烟花。

文章目录 前言一、效果图二、操作步骤第一步第二步第三步第四步第五步第六步 源码 前言 最近随着电视剧《点燃我温暖你》的火热播出&#xff0c;剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈&#xff0c;爱心素材异常火爆&#xff0c;烟花也异常火爆&#xff0c;毕竟在这绿色…

分析网上的一篇“浪漫烟花“程序<VS-C++>

结果:多个烟花弹同时上升,然后进行爆炸,并进行了花样设计,采取心型设计方案,背景音乐设置为"小幸运",除此在最初,窗口设置有文本. 接下来,就让我们来分析代码: // 烟花结构 struct FIRE {int r; // 当前爆炸半径int max_r; // 爆炸中心距离边缘最大半径int …

程序员浪漫之微信烟花

2023年的到来&#xff0c;昨晚花了一些时间去网上查找异地情侣的跨年攻略&#xff0c;烟花&#xff0c;永远都是喜庆和浪漫的代言词&#xff0c;也许跨年只想和重要的那个她一起&#xff0c;那么微信烟花何尝不是一个好的方式呢&#xff1f;刚好微信发送烟花的表情就会有真正的…

ChatGPT 紧急暂停 Bing 集成,下线搜索功能

整理 | 屠敏 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; ChatGPT 的潜力边界在哪里&#xff1f;恐怕连开发它的 OpenAI 也不知道。 正因此&#xff0c;在这项名为“Browse with Bing”的新功能&#xff0c;在ChatGPT APP上线短短一周后&#xff0c;因为不知道…

自己动手做一个mini-智能小助理

开场 最近chatgpt已经火爆了&#xff0c;几乎是家喻户晓老少皆知啊&#xff0c;公测推出60天后就已经是UV人数过亿&#xff0c;日访问量号称也是过亿。投资chatgpt研发团队的微软也是2个月内迅速推出自己的chatgpt的bing搜索&#xff0c;股票下载量都是暴增啊。前面文章已经介绍…

放弃蚂蚁offer,选择农行软开!

往期热门文章&#xff1a;1、告警&#xff1a;线上慎用 BigDecimal &#xff0c;坑的差点被开了 2、哪有这么多从零项目给你开发 3、从微服务转为单体架构、成本降低 90%&#xff01;是的&#xff0c;你没看反&#xff01; 4、Lombok 造成的翻车事故&#xff0c;太坑了&#xf…

2023中国智能客服领域最具商业合作价值企业盘点

‍数据智能产业创新服务媒体 ——聚焦数智 改变商业 随着科技的飞速发展&#xff0c;人工智能已经逐渐渗透到我们生活的方方面面。在这个波澜壮阔的时代背景下&#xff0c;智能客服作为人工智能与现代服务业的跨界融合&#xff0c;正以一种前所未有的力量改变着我们的生活。 伴…

简单体验智能AI,跟ChatGPT聊聊物通博联工业物联网

随着两会热点聚焦&#xff0c;ChatGPT、自动驾驶、仿生机器人等前沿科技热词逐渐受到社会各行各业的关注。ChatGPT的横空出世&#xff0c;使得智能AI以一种更直观的方式被大众知晓&#xff0c;有人拿它翻译文章、有人拿它写代码、还有人用它写论文。对此&#xff0c;物通博联也…

和狂飙的 ChatGPT 聊聊软件开发的现在与未来

今天&#xff0c;极小狐和科技圈“顶流”—— ChatGPT&#xff0c;聊了聊 TA 眼中的软件定义世界、研发效能方面的问题。文章的最后&#xff0c;还请 ChatGPT 留了一个彩蛋&#x1f61c;。 这场别开生面的对谈&#xff0c;就从ChatGPT的自我介绍开始吧&#xff5e; 极狐GitLa…

和ChatGPT聊了聊BDOS Online,结果……

图片来源 | 文心一格 视频来源 | 科大讯飞虚拟人 PART. 01 你对智领云的BDOS Online产品有了解吗&#xff1f; PART. 02 你觉得它和其他类似产品有什么优势或劣势&#xff1f; PART. 03 你觉得BDOS Online和其他大数据平台有什么区别&#xff1f; PART. 04 你能给我演示一下BDO…

跟ChatGPT聊聊Scratch

Scratch适合多大的孩子学习? 学习scratch有什么用? scratch是最好的少儿编程软件吗? scratch学起来会不会很难? scratch只能用来开发小游戏吗? scratch能帮助孩子考学吗? scratch对生活和工作有帮助吗? scratch与python或java 是一个层次的东西吗? scratch能赚钱吗? s…

和ChatGPT聊UML/SysML活动图模型生成测试用例

1 背景 前文讨论了UML活动图分析及用例生成实例。能够利用UML/SysML活动图模型生成测试用例&#xff0c;对软件或系统进行验证&#xff0c;自然是极好的。那是不是有了活动图模型&#xff0c;就可以生成用例呢&#xff1f;从我们看来&#xff0c;还有些问题需要澄清。 新时代新…

跟chatGpt 聊聊发布的时候老节点的线程池会怎么样

一、引言 今天同事提了一个问题&#xff0c;每次系统发布的时候在老的节点服务里面的线程池会怎么样&#xff0c;队列里面的任务会被执行完毕吗&#xff1f; 博主一直认为优雅退出一定是会等执行完才退出的&#xff0c;结果跟chatGpt聊了聊&#xff0c;一波三折。 二、分析 1…

SAP行业未来的发展如何,和chatGPT聊聊SAP行业的发展前景

序言 Chat GPT 是 OpenAI 发布的最新语言模型&#xff0c;比其前身 GPT-3 有显著提升。与许多大型语言模型类似&#xff0c;ChatGPT 能以不同样式、不同目的生成文本&#xff0c;并且在准确度、叙述细节和上下文连贯性上具有更优的表现。它代表了 OpenAI 最新一代的大型语言模…

chatgpt赋能python:Python怎么联网

Python怎么联网 介绍 Python是一种高级的编程语言&#xff0c;它能够很容易地实现联网操作。Python的标准库中包含了许多模块&#xff0c;这些模块可以用来创建网络连接、发送和接收数据以及处理网络协议等。在本篇文章中&#xff0c;我们将介绍如何使用Python进行网络操作&a…

ChatGPT推出“联网模式”!可直接读取网页内容,网友:更好用了

金磊 发自 凹非寺量子位 | 公众号 QbitAI ChatGPT又出big news了&#xff01; 官方推出了一种新模式——Default&#xff08;GPT-3.5&#xff09;with browsing。 而这个“联网模式”最大的亮点&#xff0c;就是可以随时引用网络数据。 也就是说&#xff0c;此前ChatGPT“截止2…

王炸功能ChatGPT 联网插件功能放开,视频文章一键变思维导图

就在上周5月13日&#xff0c;Open AI 发文称&#xff1a;“我们将在下周向所有ChatGPT Plus 用户开放联网功能和众多插件”。 这意味着什么&#xff1f; 首先联网功能将使得ChatGPT不再局限于回答2021年9月之前的信息&#xff0c;能直接联网查询最新消息。 而插件功能就可以在…

70多个新插件!ChatGPT可以联网啦!

Datawhale干货 体验&#xff1a;ChatGPT联网&#xff0c;编辑&#xff1a;机器之心 说不上无所不能&#xff0c;但也可以说是上天入地。 自 ChatGPT 推出以来&#xff0c;大语言模型充斥着新闻版面。很多公司都在试图追赶 OpenAI&#xff0c;但作为先行者&#xff0c;ChatGPT …

ChatGPT联网后几大功能

这周ChatGPT plus 已经可以联网了&#xff0c;联网后对我们的用处更大了&#xff0c;这里总结了几点ChatGPT联网 后的几个功能&#xff1a; 1.对给定的网页进行读取&#xff0c;并根据解读后来回答问题 给ChatGPT一个网址&#xff0c;让他总结一下这个网址&#xff0c;不到一…

Dify 基于 ChatGPT 构建本地知识库问答应用

一、Dify 自从 ChatGPT 横空出世之后&#xff0c;其极高的语言理解和交互能力不仅让人惊呼&#xff0c;ChatGPT不仅能够处理事实性问题&#xff0c;还能理解和生成情感色彩更浓厚的对话内容&#xff0c;能够识别用户的情感倾向&#xff0c;并据此作出相应的回应。这么好的东西…