devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

情人节简单浪漫烟花html的代码

作者：2023面试高手 | 2024-02-16 04:45:05

赞

踩

情人节简单浪漫烟花html的代码
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>慧慧</title>
  6.  
  7. <style>
  8. html,body{
  9.     margin:0px;
  10.     width:100%;
  11.     height:100%;
  12.     overflow:hidden;
  13.     background:#FFB6C1;
  14. }
  15.  
  16. #canvas{
  17.     width:100%;
  18.     height:100%;
  19. }
  20. </style>
  21.  
  22. </head>
  23. <body>
  24.  
  25. <canvas id="canvas"></canvas><script>
  26. function initVars(){
  27.  
  28.     pi=Math.PI;
  29.     ctx=canvas.getContext("2d");
  30.     canvas.width=canvas.clientWidth;
  31.     canvas.height=canvas.clientHeight;
  32.     cx=canvas.width/2;
  33.     cy=canvas.height/2;
  34.     playerZ=-25;
  35.     playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
  36.     scale=600;
  37.     seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
  38.     seeds=new Array();
  39.     sparkPics=new Array();
  40.     s="https://cantelope.org/NYE/";
  41.     for(i=1;i<=10;++i){
  42.         sparkPic=new Image();
  43.         sparkPic.src=s+"spark"+i+".png";
  44.         sparkPics.push(sparkPic);
  45.     }
  46.     sparks=new Array();
  47.     pow1=new Audio(s+"pow1.ogg");
  48.     pow2=new Audio(s+"pow2.ogg");
  49.     pow3=new Audio(s+"pow3.ogg");
  50.     pow4=new Audio(s+"pow4.ogg");
  51.     frames = 0;
  52. }
  53.  
  54. function rasterizePoint(x,y,z){
  55.  
  56.     var p,d;
  57.     x-=playerX;
  58.     y-=playerY;
  59.     z-=playerZ;
  60.     p=Math.atan2(x,z);
  61.     d=Math.sqrt(x*x+z*z);
  62.     x=Math.sin(p-yaw)*d;
  63.     z=Math.cos(p-yaw)*d;
  64.     p=Math.atan2(y,z);
  65.     d=Math.sqrt(y*y+z*z);
  66.     y=Math.sin(p-pitch)*d;
  67.     z=Math.cos(p-pitch)*d;
  68.     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);
  69.     if(!uc) return {x:0,y:0,d:-1};
  70.     var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
  71.     var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
  72.     if(!z)z=.000000001;
  73.     if(ua>0&&ua<1&&ub>0&&ub<1){
  74.         return {
  75.             x:cx+(rx1+ua*(rx2-rx1))*scale,
  76.             y:cy+y/z*scale,
  77.             d:Math.sqrt(x*x+y*y+z*z)
  78.         };
  79.     }else{
  80.         return {
  81.             x:cx+(rx1+ua*(rx2-rx1))*scale,
  82.             y:cy+y/z*scale,
  83.             d:-1
  84.         };
  85.     }
  86. }
  87.  
  88. function spawnSeed(){
  89.     
  90.     seed=new Object();
  91.     seed.x=-50+Math.random()*100;
  92.     seed.y=25;
  93.     seed.z=-50+Math.random()*100;
  94.     seed.vx=.1-Math.random()*.2;
  95.     seed.vy=-1.5;//*(1+Math.random()/2);
  96.     seed.vz=.1-Math.random()*.2;
  97.     seed.born=frames;
  98.     seeds.push(seed);
  99. }
  100.  
  101. function splode(x,y,z){
  102.     
  103.     t=5+parseInt(Math.random()*150);
  104.     sparkV=1+Math.random()*2.5;
  105.     type=parseInt(Math.random()*3);
  106.     switch(type){
  107.         case 0:
  108.             pic1=parseInt(Math.random()*10);
  109.             break;
  110.         case 1:
  111.             pic1=parseInt(Math.random()*10);
  112.             do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
  113.             break;
  114.         case 2:
  115.             pic1=parseInt(Math.random()*10);
  116.             do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
  117.             do{ pic3=parseInt(Math.random()*10); }while(pic3==pic1 || pic3==pic2);
  118.             break;
  119.     }
  120.     for(m=1;m<t;++m){
  121.         spark=new Object();
  122.         spark.x=x; spark.y=y; spark.z=z;
  123.         p1=pi*2*Math.random();
  124.         p2=pi*Math.random();
  125.         v=sparkV*(1+Math.random()/6)
  126.         spark.vx=Math.sin(p1)*Math.sin(p2)*v;
  127.         spark.vz=Math.cos(p1)*Math.sin(p2)*v;
  128.         spark.vy=Math.cos(p2)*v;
  129.         switch(type){
  130.             case 0: spark.img=sparkPics[pic1]; break;
  131.             case 1:
  132.                 spark.img=sparkPics[parseInt(Math.random()*2)?pic1:pic2];
  133.                 break;
  134.             case 2:
  135.                 switch(parseInt(Math.random()*3)){
  136.                     case 0: spark.img=sparkPics[pic1]; break;
  137.                     case 1: spark.img=sparkPics[pic2]; break;
  138.                     case 2: spark.img=sparkPics[pic3]; break;
  139.                 }
  140.                 break;
  141.         }
  142.         spark.radius=25+Math.random()*50;
  143.         spark.alpha=1;
  144.         spark.trail=new Array();
  145.         sparks.push(spark);
  146.     }
  147.     switch(parseInt(Math.random()*4)){
  148.         case 0:    pow=new Audio(s+"pow1.ogg"); break;
  149.         case 1:    pow=new Audio(s+"pow2.ogg"); break;
  150.         case 2:    pow=new Audio(s+"pow3.ogg"); break;
  151.         case 3:    pow=new Audio(s+"pow4.ogg"); break;
  152.     }
  153.     d=Math.sqrt((x-playerX)*(x-playerX)+(y-playerY)*(y-playerY)+(z-playerZ)*(z-playerZ));
  154.     pow.volume=1.5/(1+d/10);
  155.     pow.play();
  156. }
  157.  
  158. function doLogic(){
  159.     
  160.     if(seedTimer<frames){
  161.         seedTimer=frames+seedInterval*Math.random()*10;
  162.         spawnSeed();
  163.     }
  164.     for(i=0;i<seeds.length;++i){
  165.         seeds[i].vy+=gravity;
  166.         seeds[i].x+=seeds[i].vx;
  167.         seeds[i].y+=seeds[i].vy;
  168.         seeds[i].z+=seeds[i].vz;
  169.         if(frames-seeds[i].born>seedLife){
  170.             splode(seeds[i].x,seeds[i].y,seeds[i].z);
  171.             seeds.splice(i,1);
  172.         }
  173.     }
  174.     for(i=0;i<sparks.length;++i){
  175.         if(sparks[i].alpha>0 && sparks[i].radius>5){
  176.             sparks[i].alpha-=.01;
  177.             sparks[i].radius/=1.02;
  178.             sparks[i].vy+=gravity;
  179.             point=new Object();
  180.             point.x=sparks[i].x;
  181.             point.y=sparks[i].y;
  182.             point.z=sparks[i].z;
  183.             if(sparks[i].trail.length){
  184.                 x=sparks[i].trail[sparks[i].trail.length-1].x;
  185.                 y=sparks[i].trail[sparks[i].trail.length-1].y;
  186.                 z=sparks[i].trail[sparks[i].trail.length-1].z;
  187.                 d=((point.x-x)*(point.x-x)+(point.y-y)*(point.y-y)+(point.z-z)*(point.z-z));
  188.                 if(d>9){
  189.                     sparks[i].trail.push(point);
  190.                 }
  191.             }else{
  192.                 sparks[i].trail.push(point);
  193.             }
  194.             if(sparks[i].trail.length>5)sparks[i].trail.splice(0,1);                
  195.             sparks[i].x+=sparks[i].vx;
  196.             sparks[i].y+=sparks[i].vy;
  197.             sparks[i].z+=sparks[i].vz;
  198.             sparks[i].vx/=1.075;
  199.             sparks[i].vy/=1.075;
  200.             sparks[i].vz/=1.075;
  201.         }else{
  202.             sparks.splice(i,1);
  203.         }
  204.     }
  205.     p=Math.atan2(playerX,playerZ);
  206.     d=Math.sqrt(playerX*playerX+playerZ*playerZ);
  207.     d+=Math.sin(frames/80)/1.25;
  208.     t=Math.sin(frames/200)/40;
  209.     playerX=Math.sin(p+t)*d;
  210.     playerZ=Math.cos(p+t)*d;
  211.     yaw=pi+p+t;
  212. }
  213.  
  214. function rgb(col){
  215.     
  216.     var r = parseInt((.5+Math.sin(col)*.5)*16);
  217.     var g = parseInt((.5+Math.cos(col)*.5)*16);
  218.     var b = parseInt((.5-Math.sin(col)*.5)*16);
  219.     return "#"+r.toString(16)+g.toString(16)+b.toString(16);
  220. }
  221.  
  222. function draw(){
  223.     
  224.     ctx.clearRect(0,0,cx*2,cy*2);
  225.     
  226.     ctx.fillStyle="#ff8";
  227.     for(i=-100;i<100;i+=3){
  228.         for(j=-100;j<100;j+=4){
  229.             x=i;z=j;y=25;
  230.             point=rasterizePoint(x,y,z);
  231.             if(point.d!=-1){
  232.                 size=250/(1+point.d);
  233.                 d = Math.sqrt(x * x + z * z);
  234.                 a = 0.75 - Math.pow(d / 100, 6) * 0.75;
  235.                 if(a>0){
  236.                     ctx.globalAlpha = a;
  237.                     ctx.fillRect(point.x-size/2,point.y-size/2,size,size);                
  238.                 }
  239.             }
  240.         }
  241.     }
  242.     ctx.globalAlpha=1;
  243.     for(i=0;i<seeds.length;++i){
  244.         point=rasterizePoint(seeds[i].x,seeds[i].y,seeds[i].z);
  245.         if(point.d!=-1){
  246.             size=200/(1+point.d);
  247.             ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
  248.         }
  249.     }
  250.     point1=new Object();
  251.     for(i=0;i<sparks.length;++i){
  252.         point=rasterizePoint(sparks[i].x,sparks[i].y,sparks[i].z);
  253.         if(point.d!=-1){
  254.             size=sparks[i].radius*200/(1+point.d);
  255.             if(sparks[i].alpha<0)sparks[i].alpha=0;
  256.             if(sparks[i].trail.length){
  257.                 point1.x=point.x;
  258.                 point1.y=point.y;
  259.                 switch(sparks[i].img){
  260.                     case sparkPics[0]:ctx.strokeStyle="#f84";break;
  261.                     case sparkPics[1]:ctx.strokeStyle="#84f";break;
  262.                     case sparkPics[2]:ctx.strokeStyle="#8ff";break;
  263.                     case sparkPics[3]:ctx.strokeStyle="#fff";break;
  264.                     case sparkPics[4]:ctx.strokeStyle="#4f8";break;
  265.                     case sparkPics[5]:ctx.strokeStyle="#f44";break;
  266.                     case sparkPics[6]:ctx.strokeStyle="#f84";break;
  267.                     case sparkPics[7]:ctx.strokeStyle="#84f";break;
  268.                     case sparkPics[8]:ctx.strokeStyle="#fff";break;
  269.                     case sparkPics[9]:ctx.strokeStyle="#44f";break;
  270.                 }
  271.                 for(j=sparks[i].trail.length-1;j>=0;--j){
  272.                     point2=rasterizePoint(sparks[i].trail[j].x,sparks[i].trail[j].y,sparks[i].trail[j].z);
  273.                     if(point2.d!=-1){
  274.                         ctx.globalAlpha=j/sparks[i].trail.length*sparks[i].alpha/2;
  275.                         ctx.beginPath();
  276.                         ctx.moveTo(point1.x,point1.y);
  277.                         ctx.lineWidth=1+sparks[i].radius*10/(sparks[i].trail.length-j)/(1+point2.d);
  278.                         ctx.lineTo(point2.x,point2.y);
  279.                         ctx.stroke();
  280.                         point1.x=point2.x;
  281.                         point1.y=point2.y;
  282.                     }
  283.                 }
  284.             }
  285.             ctx.globalAlpha=sparks[i].alpha;
  286.             ctx.drawImage(sparks[i].img,point.x-size/2,point.y-size/2,size,size);
  287.         }
  288.     }
  289. }
  290.  
  291. function frame(){
  292.  
  293.     if(frames>100000){
  294.         seedTimer=0;
  295.         frames=0;
  296.     }
  297.     frames++;
  298.     draw();
  299.     doLogic();
  300.     requestAnimationFrame(frame);
  301. }
  302.  
  303. window.addEventListener("resize",()=>{
  304.     canvas.width=canvas.clientWidth;
  305.     canvas.height=canvas.clientHeight;
  306.     cx=canvas.width/2;
  307.     cy=canvas.height/2;
  308. });
  309.  
  310. initVars();
  311. frame();
  312. </script>
  313.  
  314. </body>
  315. </html>

直接在linux的apache服务使用 vim /var/www/html/index.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/90822
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号