devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

2023年跨年烟花---源码_跨年代码可复制2023

作者：笔触狂放9 | 2024-02-15 15:02:03

赞

踩

跨年代码可复制2023

没有编程也可以做烟花系列

2023年款跨年烟花

 

1.首先，打开文件资源管理系统，你需要在自己的电脑上创建一个文本文件

2.打开文本文件，并将下面的代码复制到该文本文件里面

  1. ​​<!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>Happy 2023新年快乐!</title>
  6.   </head>
  7.   <body>
  8.     <script src="js/gameCanvas-4.0.js"></script>
  9.     <script src="js/script.js"></script>
  10.     <!--live2d-->
  11.     <script src="https://blog-static.cnblogs.com/files/zouwangblog/autoload.js"></script>
  12.     <!--live2dend-->
  13.  
  14.     <!--放大图片-->
  15.     <link
  16.       rel="stylesheet"
  17.       type="text/css"
  18.       href="https://blog-static.cnblogs.com/files/zouwangblog/zoom.css"
  19.     />
  20.     <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
  21.     <script src="https://cdn.bootcss.com/bootstrap/3.2.0/js/transition.js"></script>
  22.     <script src="https://blog-static.cnblogs.com/files/zouwangblog/zoom.js"></script>
  23.     <script type="text/javascript">
  24.       $("#cnblogs_post_body img").attr("data-action", "zoom");
  25.     </script>
  26.     <!--放大图片end-->
  27.  
  28.     <!--鼠标特效-->
  29.     <script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>
  30.     <canvas
  31.       width="1777"
  32.       height="841"
  33.       style="
  34.         position: fixed;
  35.         left: 0px;
  36.         top: 0px;
  37.         z-index: 2147483647;
  38.         pointer-events: none;
  39.       "
  40.     ></canvas>
  41.     <!--鼠标特效 end-->
  42.     <!-- 友链 -->
  43.     <input id="linkListFlg" type="hidden" />
  44.  
  45.     <!-- require APlayer -->
  46.     <link
  47.       rel="stylesheet"
  48.       href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"
  49.     />
  50.     <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
  51.     <!-- require MetingJS -->
  52.     <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
  53.     <meting-js
  54.       id="2829883282"
  55.       lrc-type="0"
  56.       server="netease"
  57.       order="random"
  58.       type="playlist"
  59.       fixed="true"
  60.       autoplay="false"
  61.       list-olded="true"
  62.     >
  63.     </meting-js>
  64.  
  65.     <!-- // 随机线条 -->
  66.     <script>
  67.       !(function () {
  68.         function n(n, e, t) {
  69.           return n.getAttribute(e) || t;
  70.         }
  71.         function e(n) {
  72.           return document.getElementsByTagName(n);
  73.         }
  74.         function t() {
  75.           var t = e("script"),
  76.             o = t.length,
  77.             i = t[o - 1];
  78.           return {
  79.             l: o,
  80.             z: n(i, "zIndex", -1),
  81.             o: n(i, "opacity", 0.6),
  82.             c: n(i, "color", "148,0,211"),
  83.             n: n(i, "count", 99),
  84.           };
  85.         }
  86.         function o() {
  87.           (a = m.width =
  88.             window.innerWidth ||
  89.             document.documentElement.clientWidth ||
  90.             document.body.clientWidth),
  91.             (c = m.height =
  92.               window.innerHeight ||
  93.               document.documentElement.clientHeight ||
  94.               document.body.clientHeight);
  95.         }
  96.         function i() {
  97.           r.clearRect(0, 0, a, c);
  98.           var n, e, t, o, m, l;
  99.           s.forEach(function (i, x) {
  100.             for (
  101.               i.x += i.xa,
  102.                 i.y += i.ya,
  103.                 i.xa *= i.x > a || i.x < 0 ? -1 : 1,
  104.                 i.ya *= i.y > c || i.y < 0 ? -1 : 1,
  105.                 r.fillRect(i.x - 0.5, i.y - 0.5, 1, 1),
  106.                 e = x + 1;
  107.               e < u.length;
  108.               e++
  109.             )
  110.               (n = u[e]),
  111.                 null !== n.x &&
  112.                   null !== n.y &&
  113.                   ((o = i.x - n.x),
  114.                   (m = i.y - n.y),
  115.                   (l = o * o + m * m),
  116.                   l < n.max &&
  117.                     (n === y &&
  118.                       l >= n.max / 2 &&
  119.                       ((i.x -= 0.03 * o), (i.y -= 0.03 * m)),
  120.                     (t = (n.max - l) / n.max),
  121.                     r.beginPath(),
  122.                     (r.lineWidth = t / 2),
  123.                     (r.strokeStyle = "rgba(" + d.c + "," + (t + 0.2) + ")"),
  124.                     r.moveTo(i.x, i.y),
  125.                     r.lineTo(n.x, n.y),
  126.                     r.stroke()));
  127.           }),
  128.             x(i);
  129.         }
  130.         var a,
  131.           c,
  132.           u,
  133.           m = document.createElement("canvas"),
  134.           d = t(),
  135.           l = "c_n" + d.l,
  136.           r = m.getContext("2d"),
  137.           x =
  138.             window.requestAnimationFrame ||
  139.             window.webkitRequestAnimationFrame ||
  140.             window.mozRequestAnimationFrame ||
  141.             window.oRequestAnimationFrame ||
  142.             window.msRequestAnimationFrame ||
  143.             function (n) {
  144.               window.setTimeout(n, 1e3 / 45);
  145.             },
  146.           w = Math.random,
  147.           y = { x: null, y: null, max: 2e4 };
  148.         (m.id = l),
  149.           (m.style.cssText =
  150.             "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o),
  151.           e("body")[0].appendChild(m),
  152.           o(),
  153.           (window.onresize = o),
  154.           (window.onmousemove = function (n) {
  155.             (n = n || window.event), (y.x = n.clientX), (y.y = n.clientY);
  156.           }),
  157.           (window.onmouseout = function () {
  158.             (y.x = null), (y.y = null);
  159.           });
  160.         for (var s = [], f = 0; d.n > f; f++) {
  161.           var h = w() * a,
  162.             g = w() * c,
  163.             v = 2 * w() - 1,
  164.             p = 2 * w() - 1;
  165.           s.push({ x: h, y: g, xa: v, ya: p, max: 6e3 });
  166.         }
  167.         (u = s.concat([y])),
  168.           setTimeout(function () {
  169.             i();
  170.           }, 100);
  171.       })();
  172.     </script>
  173.  
  174.     <!-- 雪花特效 -->
  175.     <script type="text/javascript">
  176.       (function ($) {
  177.         $.fn.snow = function (options) {
  178.           var $flake = $('<div id="snowbox" />')
  179.               .css({ position: "absolute", "z-index": "9999", top: "-50px" })
  180.               .html("❄"),
  181.             documentHeight = $(document).height(),
  182.             documentWidth = $(document).width(),
  183.             defaults = {
  184.               minSize: 10,
  185.               maxSize: 20,
  186.               newOn: 1000,
  187.               flakeColor:
  188.                 "#00CED1" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */,
  189.             },
  190.             options = $.extend({}, defaults, options);
  191.           var interval = setInterval(function () {
  192.             var startPositionLeft = Math.random() * documentWidth - 100,
  193.               startOpacity = 0.5 + Math.random(),
  194.               sizeFlake = options.minSize + Math.random() * options.maxSize,
  195.               endPositionTop = documentHeight - 200,
  196.               endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
  197.               durationFall = documentHeight * 10 + Math.random() * 5000;
  198.             $flake
  199.               .clone()
  200.               .appendTo("body")
  201.               .css({
  202.                 left: startPositionLeft,
  203.                 opacity: startOpacity,
  204.                 "font-size": sizeFlake,
  205.                 color: options.flakeColor,
  206.               })
  207.               .animate(
  208.                 {
  209.                   top: endPositionTop,
  210.                   left: endPositionLeft,
  211.                   opacity: 0.2,
  212.                 },
  213.                 durationFall,
  214.                 "linear",
  215.                 function () {
  216.                   $(this).remove();
  217.                 }
  218.               );
  219.           }, options.newOn);
  220.         };
  221.       })(jQuery);
  222.       $(function () {
  223.         $.fn.snow({
  224.           minSize: 5 /* 定义雪花最小尺寸 */,
  225.           maxSize: 80 /* 定义雪花最大尺寸 */,
  226.           newOn: 200 /* 定义密集程度，数字越小越密集 */,
  227.         });
  228.       });
  229.     </script>
  230.   </body>
  231. </html>

 

3.保存，退出，然后将该文本文件改名为index.html文件类型

 4.创建一个文件夹，并且重命名为js

 5.打开js文件夹，创建两个文本文件，将下面的代码分别复制粘贴到两个文本文档里面，保存退出后，分别改名为gameCanvas-4.0.js，script.js。

gameCanvas-4.0.js

  1. function GameCanvas(settings) {
  2.   let top = this;
  3.  
  4.   this.functions = [];
  5.   this.keys = [];
  6.   this.images = [];
  7.   this.spheres = [];
  8.   this.font = "Arial";
  9.   this.imageData = undefined;
  10.   this.imageDataData = undefined;
  11.   this.lastLoop = performance.now();
  12.   this.calculateFPS = true;
  13.   this.fps = -1;
  14.   this.deltaTime = 1;
  15.   let mouseLookupTable = [
  16.     "left",
  17.     "middle",
  18.     "right"
  19.   ];
  20.   this.contextMenuDisabled = false;
  21.   this.disableScrollOnMobile = false;
  22.   this.eventFunctions = {
  23.     "mousedown": typeof OnMouseDown !== "undefined",
  24.     "mouseup": typeof OnMouseUp !== "undefined",
  25.     "mousemove": typeof OnMouseMove !== "undefined",
  26.     "contextmenu": typeof OnContextMenu !== "undefined",
  27.     "touchstart": typeof OnTouchStart !== "undefined",
  28.     "touchend": typeof OnTouchEnd !== "undefined",
  29.     "touchmove": typeof OnTouchMove !== "undefined",
  30.   };
  31.   this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
  32.  
  33.   this.createCanvas = function () {
  34.     let canvas = document.createElement("canvas");
  35.     document.body.appendChild(canvas);
  36.     return canvas;
  37.   }
  38.   this.setSize = function (width, height) {
  39.     if (top.canvas) {
  40.       top.canvas.width = top.width = width;
  41.       top.canvas.height = top.height = height;
  42.       window.width = this.width;
  43.       window.height = this.height;
  44.     }
  45.     else {
  46.       console.error("There is no canvas!");
  47.     }
  48.   }
  49.   this.fillPageWithCanvas = function () {
  50.     top.canvas.style.position = "fixed";
  51.     top.canvas.style.top = "0px";
  52.     top.canvas.style.left = "0px";
  53.     top.setSize(window.innerWidth, window.innerHeight);
  54.     top.disableScrollOnMobile = true;
  55.     top.contextMenuDisabled = true;
  56.     this.updateSizeOnResize = true;
  57.   }
  58.   this.requestFullscreen = function () {
  59.     if (top.canvas.requestFullscreen)
  60.       top.canvas.requestFullscreen();
  61.     else if (top.canvas.mozRequestFullScreen)
  62.       top.canvas.mozRequestFullScreen();
  63.     else if (top.canvas.webkitRequestFullscreen)
  64.       top.canvas.webkitRequestFullscreen();
  65.     else if (top.canvas.msRequestFullscreen)
  66.       top.canvas.msRequestFullscreen();
  67.   }
  68.   this.exitFullscreen = function () {
  69.     if (document.exitFullscreen)
  70.       document.exitFullscreen();
  71.     else if (document.mozCancelFullScreen)
  72.       document.mozCancelFullScreen();
  73.     else if (document.webkitExitFullscreen)
  74.       document.webkitExitFullscreen();
  75.     else if (document.msExitFullscreen)
  76.       document.msExitFullscreen();
  77.   }
  78.   this.lockPointer = function () {
  79.     top.canvas.requestPointerLock = top.canvas.requestPointerLock || top.canvas.mozRequestPointerLock;
  80.     top.canvas.requestPointerLock();
  81.   }
  82.   this.unlockPointer = function () {
  83.     document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;
  84.     document.exitPointerLock();
  85.   }
  86.   this.disableContextMenu = function () {
  87.     top.contextMenuDisabled = true;
  88.   }
  89.   this.enableContextMenu = function () {
  90.     top.contextMenuDisabled = false;
  91.   }
  92.  
  93.   this.key = function (key) {
  94.     return top.keys[key];
  95.   }
  96.  
  97.   this.update = function () {
  98.     if (top.calculateFPS) {
  99.       var thisLoop = performance.now();
  100.       top.fps = 1000 / (thisLoop - top.lastLoop);
  101.       top.deltaTime = 60 / top.fps;
  102.       top.lastLoop = thisLoop;
  103.  
  104.       if (top.globalFunctions) {
  105.         window.fps = top.fps;
  106.         window.deltaTime = top.deltaTime;
  107.       }
  108.     }
  109.  
  110.     top.mouse.movementX = 0;
  111.     top.mouse.movementY = 0;
  112.     top.mouse.lastX = top.mouse.x;
  113.     top.mouse.lastY = top.mouse.y;
  114.   }
  115.  
  116.   /******************
  117.   
  118.        Rendering
  119.      
  120.    ******************/
  121.  
  122.   this.clearScreen = function () {
  123.     top.ctx.clearRect(0, 0, top.width, top.height);
  124.   }
  125.  
  126.   this.background = function (color) {
  127.     top.ctx.fillStyle = color;
  128.     top.ctx.fillRect(0, 0, top.width, top.height);
  129.   }
  130.  
  131.   this.circle = function (x, y, radius, color, strokeColor, lineWidth) {
  132.     top.ctx.beginPath();
  133.     top.ctx.arc(x, y, radius, 0, Math.PI * 2);
  134.     top.ctx.fillStyle = color;
  135.     if (strokeColor) top.ctx.strokeStyle = strokeColor;
  136.     if (lineWidth) top.ctx.lineWidth = lineWidth;
  137.     top.ctx.fill();
  138.     if (strokeColor) top.ctx.stroke();
  139.   }
  140.  
  141.   this.ring = function (x, y, radius, color, lineWidth) {
  142.     top.ctx.beginPath();
  143.     top.ctx.arc(x, y, radius, 0, Math.PI * 2);
  144.     top.ctx.strokeStyle = color;
  145.     if (lineWidth) top.ctx.lineWidth = lineWidth;
  146.     top.ctx.stroke();
  147.   }
  148.  
  149.   this.ellipse = function (x, y, radiusX, radiusY, color, rotation = 0, strokeColor, lineWidth) {
  150.     top.ctx.beginPath();
  151.     top.ctx.ellipse(x, y, radiusX, radiusY, rotation, 0, Math.PI * 2);
  152.     top.ctx.fillStyle = color;
  153.     if (strokeColor) top.ctx.strokeStyle = strokeColor;
  154.     if (lineWidth) top.ctx.lineWidth = lineWidth;
  155.     top.ctx.fill();
  156.     if (strokeColor) top.ctx.stroke();
  157.   }
  158.  
  159.   this.rectangle = function (x, y, width, height, color, strokeColor, lineWidth) {
  160.     top.ctx.fillStyle = color;
  161.     if (lineWidth) top.ctx.lineWidth = lineWidth;
  162.     if (strokeColor) {
  163.       top.ctx.beginPath();
  164.       top.ctx.strokeStyle = strokeColor;
  165.       top.ctx.rect(x, y, width, height);
  166.       top.ctx.fill();
  167.       top.ctx.stroke();
  168.     }
  169.     else
  170.       top.ctx.fillRect(x, y, width, height);
  171.   }
  172.  
  173.   this.triangle = function (x1, y1, x2, y2, x3, y3, color, strokeColor, lineWidth) {
  174.     top.ctx.beginPath();
  175.     top.ctx.moveTo(x1, y1);
  176.     top.ctx.lineTo(x2, y2);
  177.     top.ctx.lineTo(x3, y3);
  178.     top.ctx.closePath();
  179.     top.ctx.fillStyle = color;
  180.     if (lineWidth) top.ctx.lineWidth = lineWidth;
  181.     top.ctx.fill();
  182.     if (strokeColor) {
  183.       top.ctx.strokeStyle = strokeColor;
  184.       top.ctx.stroke();
  185.     }
  186.   }
  187.  
  188.   this.setLineCap = function (lineCap) {
  189.     top.ctx.lineCap = lineCap;
  190.   }
  191.  
  192.   this.resetLineCap = function () {
  193.     top.ctx.lineCap = "butt";
  194.   }
  195.  
  196.   this.line = function (x1, y1, x2, y2, strokeWeight, color) {
  197.     top.ctx.beginPath();
  198.     top.ctx.moveTo(x1, y1);
  199.     top.ctx.lineTo(x2, y2);
  200.     if (color) top.ctx.strokeStyle = color;
  201.     if (strokeWeight) top.ctx.lineWidth = strokeWeight;
  202.     top.ctx.stroke();
  203.   }
  204.  
  205.   this.picture = function (url, x, y, width, height) {
  206.     var imageElement = top.images[url];
  207.     if (!imageElement) {
  208.       var img = new Image();
  209.       img.src = url;
  210.       img.onload = function () {
  211.         top.ctx.drawImage(img, x, y, width, height);
  212.       }
  213.       top.images[url] = img;
  214.     }
  215.     else if (imageElement.complete) {
  216.       top.ctx.drawImage(imageElement, x, y, width, height);
  217.     }
  218.   }
  219.  
  220.   this.setFont = function (font) {
  221.     top.font = font;
  222.   }
  223.  
  224.   this.setTextAlign = function (align) {
  225.     top.ctx.textAlign = align;
  226.   }
  227.  
  228.   this.setTextXAlign = function (align) {
  229.     top.ctx.textAlign = align;
  230.   }
  231.  
  232.   this.setTextYAlign = function (align) {
  233.     top.ctx.textBaseline = align;
  234.   }
  235.  
  236.   this.resetTextXAlign = function () {
  237.     top.ctx.textAlign = "left";
  238.   }
  239.  
  240.   this.resetTextYAlign = function () {
  241.     top.ctx.textBaseline = "alphabetic";
  242.   }
  243.  
  244.   this.text = function (textString, x, y, fontSize, color, strokeColor, lineWidth) {
  245.     top.ctx.beginPath();
  246.     top.ctx.font = fontSize + "px " + top.font;
  247.     top.ctx.fillStyle = color;
  248.     if (lineWidth) top.ctx.lineWidth = lineWidth;
  249.     top.ctx.fillText(textString, x, y);
  250.     if (strokeColor) {
  251.       top.ctx.strokeStyle = strokeColor;
  252.       top.ctx.strokeText(textString, x, y);
  253.     }
  254.   }
  255.  
  256.   this.getPixelData = function () {
  257.     top.imageData = top.ctx.getImageData(0, 0, top.width, top.height);
  258.     top.imageDataData = top.imageData.data;
  259.   }
  260.  
  261.   this.updatePixel = function (x, y, r, g, b, a = 255) {
  262.     let i = (x + y * top.width) * 4;
  263.     top.imageDataData[i] = r;
  264.     top.imageDataData[i + 1] = g;
  265.     top.imageDataData[i + 2] = b;
  266.     top.imageDataData[i + 3] = a;
  267.   }
  268.  
  269.   this.updatePixelIndex = function (index, r, g, b, a = 255) {
  270.     var i = index * 4;
  271.     top.imageDataData[i] = r;
  272.     top.imageDataData[i + 1] = g;
  273.     top.imageDataData[i + 2] = b;
  274.     top.imageDataData[i + 3] = a;
  275.   }
  276.  
  277.   this.getPixel = function (x, y) {
  278.     let i = (x + y * top.width) * 4;
  279.     return [
  280.       top.imageDataData[i],
  281.       top.imageDataData[i + 1],
  282.       top.imageDataData[i + 2],
  283.       top.imageDataData[i + 3]
  284.     ];
  285.   }
  286.  
  287.   this.getPixelIndex = function (index) {
  288.     let i = index * 4;
  289.     return [
  290.       top.imageDataData[i],
  291.       top.imageDataData[i + 1],
  292.       top.imageDataData[i + 2],
  293.       top.imageDataData[i + 3]
  294.     ];
  295.   }
  296.  
  297.   this.renderPixelData = function () {
  298.     /*createImageBitmap(top.imageData).then(function(imgBitmap) {
  299.       top.ctx.drawImage(imgBitmap, 0, 0);
  300.     });*/
  301.  
  302.     top.ctx.putImageData(top.imageData, 0, 0);
  303.   }
  304.  
  305.   this.save = function () {
  306.     top.ctx.save();
  307.   }
  308.  
  309.   this.restore = function () {
  310.     top.ctx.restore();
  311.   }
  312.  
  313.   this.rotate = function (angle) {
  314.     top.ctx.rotate(angle);
  315.   }
  316.  
  317.   this.translate = function (x, y) {
  318.     top.ctx.translate(x, y);
  319.   }
  320.  
  321.   this.beginPath = function () {
  322.     top.ctx.beginPath();
  323.   }
  324.  
  325.   this.closePath = function () {
  326.     top.ctx.closePath();
  327.   }
  328.  
  329.   this.moveTo = function (x, y) {
  330.     top.ctx.moveTo(x, y);
  331.   }
  332.  
  333.   this.lineTo = function (x, y) {
  334.     top.ctx.lineTo(x, y);
  335.   }
  336.  
  337.   this.fill = function () {
  338.     top.ctx.fill();
  339.   }
  340.  
  341.   this.stroke = function () {
  342.     top.ctx.stroke();
  343.   }
  344.  
  345.   this.fillStyle = function (color) {
  346.     top.ctx.fillStyle = color;
  347.   }
  348.  
  349.   this.strokeStyle = function (color) {
  350.     top.ctx.strokeStyle = color;
  351.   }
  352.  
  353.   this.setLineWidth = function (lineWidth) {
  354.     top.ctx.lineWidth = lineWidth;
  355.   }
  356.  
  357.   /******************
  358.   
  359.        3D
  360.      
  361.    ******************/
  362.  
  363.   this.drawSphere = function (screenX, screenY, radius, color, lightDir = { x: 0, y: 0, z: 1 }) {
  364.     var id = (screenX + screenY) * radius * (color[0] + 1) * (color[1] + 1) * (color[2] + 1) * (lightDir.x + 1) * (lightDir.y + 1) * (lightDir.z + 1);
  365.     if (top.spheres[id]) {
  366.       if (top.spheres[id].imageData)
  367.         top.ctx.putImageData(top.spheres[id].imageData, screenX - radius, screenY - radius);
  368.       else if (top.spheres[id].image)
  369.         top.ctx.drawImage(top.spheres[id].image, screenX - radius, screenY - radius);
  370.     }
  371.     else {
  372.       var imageData = top.ctx.createImageData(radius * 2, radius * 2);
  373.  
  374.       for (var y = 0; y < radius * 2; y++) {
  375.         for (var x = 0; x < radius * 2; x++) {
  376.           var line = {
  377.             origin: { x: x, y: y, z: 0 },
  378.             direction: { x: 0, y: 0, z: 1 }
  379.           };
  380.           var o = {
  381.             position: { x: radius, y: radius, z: radius * 2 }
  382.           }
  383.  
  384.           var oc = {
  385.             x: line.origin.x - o.position.x,
  386.             y: line.origin.y - o.position.y,
  387.             z: line.origin.z - o.position.z
  388.           };
  389.           var loc = top.dot3D(line.direction, oc);
  390.           var ocLength = top.getLength(oc.x, oc.y, oc.z);
  391.           var underSqrt = loc * loc - (ocLength * ocLength - radius * radius);
  392.  
  393.           if (underSqrt >= 0) {
  394.             var d = -loc - Math.sqrt(underSqrt);
  395.             if (d > 0) { // Circle is not behind player and is closest to player
  396.               var hitPoint = {
  397.                 x: line.origin.x + line.direction.x * d,
  398.                 y: line.origin.y + line.direction.y * d,
  399.                 z: line.origin.z + line.direction.z * d
  400.               };
  401.               var surfaceNormal = top.normalize3DVector({
  402.                 x: o.position.x - hitPoint.x,
  403.                 y: o.position.y - hitPoint.y,
  404.                 z: o.position.z - hitPoint.z
  405.               });
  406.  
  407.               var diffuse = top.dot3D(lightDir, surfaceNormal);
  408.  
  409.               var index = (x + y * radius * 2) * 4;
  410.               imageData.data[index] = color[0] * diffuse;
  411.               imageData.data[index + 1] = color[1] * diffuse;
  412.               imageData.data[index + 2] = color[2] * diffuse;
  413.               imageData.data[index + 3] = 255;
  414.             }
  415.           }
  416.         }
  417.       }
  418.  
  419.       if (window.createImageBitmap) {
  420.         top.spheres[id] = { imageData: undefined, image: undefined };
  421.         createImageBitmap(imageData).then(function (imgBitmap) {
  422.           top.ctx.drawImage(imgBitmap, screenX - radius, screenY - radius);
  423.           top.spheres[id] = { imageData: undefined, image: imgBitmap };
  424.         });
  425.       }
  426.       else {
  427.         top.ctx.putImageData(imageData, screenX - radius, screenY - radius);
  428.         top.spheres[id] = { imageData, image: undefined };
  429.       }
  430.     }
  431.   }
  432.  
  433.   /******************
  434.   
  435.        Audio
  436.      
  437.    ******************/
  438.  
  439.   this.createSound = function (url, volume = 1, startTime = 0, looping = false) {
  440.     var audio = new Audio(url);
  441.     audio.loop = looping;
  442.     audio.currentTime = startTime;
  443.     audio.volume = volume;
  444.  
  445.     return {
  446.       volume,
  447.       startTime,
  448.       audio
  449.     };
  450.   }
  451.  
  452.   this.playSound = function (sound) {
  453.     sound.audio.currentTime = sound.startTime;
  454.     sound.audio.volume = sound.volume;
  455.     sound.audio.play();
  456.   }
  457.  
  458.   this.stopSound = function (sound) {
  459.     sound.audio.stop();
  460.   }
  461.  
  462.   this.pauseSound = function (sound) {
  463.     sound.audio.pause();
  464.   }
  465.  
  466.   this.backgroundMusic = function (url) {
  467.     var audio = new Audio(url);
  468.     audio.loop = true;
  469.     audio.play();
  470.     return audio;
  471.   }
  472.  
  473.   this.fadeOutSound = function (sound, time = 1) {
  474.     var startVolume = sound.volume;
  475.     var count = 0;
  476.     var interv = setInterval(() => {
  477.       sound.audio.volume = (startVolume / (time * 20)) * (time * 20 - count);
  478.       count++;
  479.       if (count > time * 20) {
  480.         sound.audio.pause();
  481.         clearInterval(interv);
  482.       }
  483.     }, 50);
  484.   }
  485.  
  486.   this.playTone = function (freq = 440, time = 1, volume = 1, type = "sine") {
  487.     var oscillator = top.audioContext.createOscillator();
  488.  
  489.     var gainNode = top.audioContext.createGain()
  490.     gainNode.gain.value = volume;
  491.     gainNode.connect(top.audioContext.destination);
  492.  
  493.     oscillator.type = type;
  494.     oscillator.frequency.value = freq;
  495.     oscillator.connect(gainNode);
  496.     oscillator.start();
  497.  
  498.     setTimeout(() => {
  499.       oscillator.stop();
  500.     }, time * 1000);
  501.   }
  502.  
  503.   /******************
  504.   
  505.        Math
  506.      
  507.    ******************/
  508.  
  509.   this.DegToRad = Math.PI / 180;
  510.   this.RadToDeg = 180 / Math.PI;
  511.   this.PI = Math.PI;
  512.   this.TWO_PI = Math.PI * 2;
  513.   this.TAU = this.TWO_PI;
  514.  
  515.   this.getDistanceSqr = function (x1, y1, x2, y2) {
  516.     var a = x1 - x2;
  517.     var b = y1 - y2;
  518.     return a * a + b * b;
  519.   }
  520.  
  521.   this.getDistanceSqr3D = function (x1, y1, x2, y2, z1, z2) {
  522.     var a = x1 - x2;
  523.     var b = y1 - y2;
  524.     var c = z1 - z2;
  525.     return a * a + b * b + c * c;
  526.   }
  527.  
  528.   this.getDistance = function (x1, y1, x2, y2) {
  529.     return Math.sqrt(top.getDistanceSqr(x1, y1, x2, y2));
  530.   }
  531.  
  532.   this.getDistance3D = function (x1, y1, x2, y2, z1, z2) {
  533.     return Math.sqrt(top.getDistanceSqr3D(x1, y1, x2, y2, z1, z2));
  534.   }
  535.  
  536.   this.getAngle = function (x1, y1, x2, y2) {
  537.     return Math.atan2(y2 - y1, x2 - x1);
  538.   }
  539.  
  540.   this.normalize = function (x, y) {
  541.     var len = Math.sqrt(x * x + y * y);
  542.     return {
  543.       x: x / len,
  544.       y: y / len
  545.     };
  546.   }
  547.  
  548.   this.normalize3D = function (x, y, z) {
  549.     var len = Math.sqrt(x * x + y * y + z * z);
  550.     return {
  551.       x: x / len,
  552.       y: y / len,
  553.       z: z / len
  554.     };
  555.   }
  556.  
  557.   this.normalize3DVector = function (x) {
  558.     var len = Math.sqrt(x.x * x.x + x.y * x.y + x.z * x.z);
  559.     return {
  560.       x: x.x / len,
  561.       y: x.y / len,
  562.       z: x.z / len
  563.     };
  564.   }
  565.  
  566.   this.lengthVector = function (v) {
  567.     return Math.sqrt(v.x * v.x + v.y * v.y);
  568.   }
  569.  
  570.   this.length3DVector = function (v) {
  571.     return Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z);
  572.   }
  573.  
  574.   this.getLength = function () {
  575.     var sum = 0;
  576.     for (var i = 0; i < arguments.length; i++) {
  577.       var arg = arguments[i];
  578.       sum += arg * arg;
  579.     }
  580.     return Math.sqrt(sum);
  581.   }
  582.  
  583.   this.dot = function (a, b) {
  584.     return a.x * b.x + a.y * b.y;
  585.   }
  586.  
  587.   this.dot3D = function (a, b) {
  588.     return a.x * b.x + a.y * b.y + a.z * b.z;
  589.   }
  590.  
  591.   this.crossProduct3D = function (v1, v2) {
  592.     return {
  593.       x: v1.y * v2.z - v1.z * v2.y,
  594.       y: v1.z * v2.x - v1.x * v2.z,
  595.       z: v1.x * v2.y - v1.y * v2.x
  596.     }
  597.   }
  598.  
  599.   //Intersection
  600.   this.rectanglesIntersect = function (x1, y1, w1, h1, x2, y2, w2, h2) {
  601.     return x1 + w1 > x2 && x1 < x2 + w2 && y1 + h1 > y2 && y1 < y2 + h2;
  602.   }
  603.  
  604.   this.circlesIntersect = function (x1, y1, r1, x2, y2, r2) {
  605.     return top.getDistance(x1, y1, x2, y2) < r1 + r2;
  606.   }
  607.  
  608.   this.circleRectangleIntersect = function (x1, y1, r1, x2, y2, w2, h2) {
  609.     var circleDistanceX = Math.abs(x1 - (x2 + w2 / 2));
  610.     var circleDistanceY = Math.abs(y1 - (y2 + h2 / 2));
  611.  
  612.     if (circleDistanceX > (w2 / 2 + r1)) return false;
  613.     if (circleDistanceY > (h2 / 2 + r1)) return false;
  614.  
  615.     if (circleDistanceX <= (w2 / 2)) return true;
  616.     if (circleDistanceY <= (h2 / 2)) return true;
  617.  
  618.     var a = circleDistanceX - w2 / 2;
  619.     var b = circleDistanceY - h2 / 2;
  620.     var cornerDistance_sq = a * a + b * b;
  621.  
  622.     return cornerDistance_sq <= (r1 * r1);
  623.   }
  624.  
  625.   //Random
  626.   this.random = function (max) {
  627.     return Math.random() * max;
  628.   }
  629.  
  630.   this.randomInt = function (max) {
  631.     return Math.random() * max >> 0;
  632.   }
  633.  
  634.   this.randomArray = function (array) {
  635.     return array[Math.random() * array.length >> 0];
  636.   }
  637.  
  638.   this.randomColor = function (colorDepth) {
  639.     if (colorDepth) {
  640.       var colorStep = 256 / colorDepth;
  641.       var r = Math.ceil((Math.random() * 256 >> 0) / colorStep) * colorStep;
  642.       var g = Math.ceil((Math.random() * 256 >> 0) / colorStep) * colorStep;
  643.       var b = Math.ceil((Math.random() * 256 >> 0) / colorStep) * colorStep;
  644.  
  645.       return "rgb(" + r + "," + g + "," + b + ")";
  646.     }
  647.     else {
  648.       return "rgb(" + (Math.random() * 256 >> 0) + "," + (Math.random() * 256 >> 0) + "," + (Math.random() * 256 >> 0) + ")";
  649.     }
  650.   }
  651.  
  652.   this.create2DArray = function (w, h, value = () => 0) {
  653.     var array = new Array(w);
  654.     for (var i = 0; i < w; i++) {
  655.       array[i] = new Array(h);
  656.       for (var j = 0; j < h; j++) {
  657.         array[i][j] = value(i, j);
  658.       }
  659.     }
  660.  
  661.     return array;
  662.   }
  663.  
  664.   /******************
  665.   
  666.        Export
  667.      
  668.    ******************/
  669.  
  670.   this.canvasToURL = function () {
  671.     return top.canvas.toDataURL();
  672.   }
  673.  
  674.   this.canvasToImage = function () {
  675.     var img = new Image();
  676.     img.src = top.canvas.toDataURL();
  677.     return img;
  678.   }
  679.  
  680.   this.saveToFile = function (filename = "canvas.png") {
  681.     var a = document.createElement("a");
  682.     a.download = filename;
  683.     a.href = top.canvas.toDataURL();
  684.     a.click();
  685.   }
  686.  
  687.   /******************
  688.   
  689.        Cookies
  690.      
  691.    ******************/
  692.  
  693.   this.setCookie = function (name, value, expireDays = 36500) {
  694.     let d = new Date();
  695.     d.setTime(d.getTime() + (expireDays * 24 * 60 * 60 * 1000));
  696.     let expires = "expires=" + d.toUTCString();
  697.     document.cookie = name + "=" + value + ";" + expires + ";path=/";
  698.   }
  699.  
  700.   this.getCookie = function (name) {
  701.     if (name.length == 0)
  702.       return false;
  703.  
  704.     var cname = name + "=";
  705.     var split = document.cookie.split(";");
  706.     for (let i = 0; i < split.length; i++) {
  707.       let s = split[i];
  708.       var index = s.indexOf(cname);
  709.       if (index > 0) {
  710.         return s.substr(index + cname.length);
  711.       }
  712.     }
  713.     return false;
  714.   }
  715.  
  716.   this.deleteCookie = function (name) {
  717.     document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/";
  718.   }
  719.  
  720.   /******************
  721.   
  722.        Misc.
  723.      
  724.    ******************/
  725.  
  726.   //Battery level
  727.   if (navigator.getBattery) {
  728.     navigator.getBattery().then(function (battery) {
  729.       battery.addEventListener('levelchange', function () {
  730.         top.batteryLevel = battery.level * 100;
  731.       });
  732.       top.batteryLevel = battery.level * 100;
  733.     });
  734.   }
  735.  
  736.   this.getBatteryLevel = function () {
  737.     return top.batteryLevel;
  738.   }
  739.  
  740.   /******************
  741.   
  742.        Functions
  743.      
  744.    ******************/
  745.  
  746.   this.functions = [
  747.     { func: this.createCanvas, name: "createCanvas" },
  748.     { func: this.setSize, name: "setSize" },
  749.     { func: this.fillPageWithCanvas, name: "fillPageWithCanvas" },
  750.     { func: this.requestFullscreen, name: "requestFullscreen" },
  751.     { func: this.exitFullscreen, name: "exitFullscreen" },
  752.     { func: this.lockPointer, name: "lockPointer" },
  753.     { func: this.unlockPointer, name: "unlockPointer" },
  754.     { func: this.disableContextMenu, name: "disableContextMenu" },
  755.     { func: this.enableContextMenu, name: "enableContextMenu" },
  756.     { func: this.key, name: "key" },
  757.     { func: this.update, name: "update" },
  758.  
  759.     { func: this.clearScreen, name: "clearScreen" },
  760.     { func: this.background, name: "background" },
  761.     { func: this.circle, name: "circle" },
  762.     { func: this.ring, name: "ring" },
  763.     { func: this.ellipse, name: "ellipse" },
  764.     { func: this.rectangle, name: "rectangle" },
  765.     { func: this.triangle, name: "triangle" },
  766.     { func: this.picture, name: "picture" },
  767.     { func: this.setLineCap, name: "setLineCap" },
  768.     { func: this.resetLineCap, name: "resetLineCap" },
  769.     { func: this.line, name: "line" },
  770.     { func: this.setFont, name: "setFont" },
  771.     { func: this.setTextAlign, name: "setTextAlign" },
  772.     { func: this.setTextXAlign, name: "setTextXAlign" },
  773.     { func: this.setTextYAlign, name: "setTextYAlign" },
  774.     { func: this.resetTextXAlign, name: "resetTextXAlign" },
  775.     { func: this.resetTextYAlign, name: "resetTextYAlign" },
  776.     { func: this.text, name: "text" },
  777.     { func: this.getPixelData, name: "getPixelData" },
  778.     { func: this.updatePixel, name: "updatePixel" },
  779.     { func: this.updatePixelIndex, name: "updatePixelIndex" },
  780.     { func: this.getPixel, name: "getPixel" },
  781.     { func: this.getPixelIndex, name: "getPixelIndex" },
  782.     { func: this.renderPixelData, name: "renderPixelData" },
  783.     { func: this.save, name: "save" },
  784.     { func: this.restore, name: "restore" },
  785.     { func: this.rotate, name: "rotate" },
  786.     { func: this.translate, name: "translate" },
  787.     { func: this.beginPath, name: "beginPath" },
  788.     { func: this.closePath, name: "closePath" },
  789.     { func: this.moveTo, name: "moveTo" },
  790.     { func: this.lineTo, name: "lineTo" },
  791.     { func: this.fill, name: "fill" },
  792.     { func: this.stroke, name: "stroke" },
  793.     { func: this.fillStyle, name: "fillStyle" },
  794.     { func: this.strokeStyle, name: "strokeStyle" },
  795.     { func: this.setLineWidth, name: "setLineWidth" },
  796.  
  797.     { func: this.drawSphere, name: "drawSphere" },
  798.  
  799.     { func: this.createSound, name: "createSound" },
  800.     { func: this.playSound, name: "playSound" },
  801.     { func: this.stopSound, name: "stopSound" },
  802.     { func: this.pauseSound, name: "pauseSound" },
  803.     { func: this.fadeOutSound, name: "fadeOutSound" },
  804.     { func: this.playTone, name: "playTone" },
  805.  
  806.     { func: this.getDistanceSqr, name: "getDistanceSqr" },
  807.     { func: this.getDistance, name: "getDistance" },
  808.     { func: this.getDistanceSqr3D, name: "getDistanceSqr3D" },
  809.     { func: this.getDistance3D, name: "getDistance3D" },
  810.     { func: this.getAngle, name: "getAngle" },
  811.     { func: this.normalize, name: "normalize" },
  812.     { func: this.normalize3D, name: "normalize3D" },
  813.     { func: this.normalize3D, name: "normalize3DVector" },
  814.     { func: this.getLength, name: "getLength" },
  815.     { func: this.dot, name: "dot" },
  816.     { func: this.dot3D, name: "dot3D" },
  817.     { func: this.crossProduct3D, name: "crossProduct3D" },
  818.     { func: this.lengthVector, name: "lengthVector" },
  819.     { func: this.length3DVector, name: "length3DVector" },
  820.  
  821.     { func: this.rectanglesIntersect, name: "rectanglesIntersect" },
  822.     { func: this.circlesIntersect, name: "circlesIntersect" },
  823.     { func: this.circleRectangleIntersect, name: "circleRectangleIntersect" },
  824.  
  825.     { func: this.random, name: "random" },
  826.     { func: this.randomInt, name: "randomInt" },
  827.     { func: this.randomArray, name: "randomArray" },
  828.     { func: this.randomColor, name: "randomColor" },
  829.  
  830.     { func: this.create2DArray, name: "create2DArray" },
  831.  
  832.     { func: this.canvasToURL, name: "canvasToURL" },
  833.     { func: this.canvasToImage, name: "canvasToImage" },
  834.     { func: this.saveToFile, name: "saveToFile" },
  835.  
  836.     { func: this.setCookie, name: "setCookie" },
  837.     { func: this.getCookie, name: "getCookie" },
  838.     { func: this.deleteCookie, name: "deleteCookie" },
  839.  
  840.     { func: this.getBatteryLevel, name: "getBatteryLevel" }
  841.   ];
  842.  
  843.   this.variables = [
  844.     { variable: this.RadToDeg, name: "RadToDeg" },
  845.     { variable: this.DegToRad, name: "DegToRad" },
  846.     { variable: this.PI, name: "PI" },
  847.     { variable: this.TWO_PI, name: "TWO_PI" },
  848.     { variable: this.TAU, name: "TAU" }
  849.   ];
  850.  
  851.   this.makeFunctionsGlobal = function () {
  852.     this.globalFunctions = true;
  853.     this.functions.forEach(item => {
  854.       window[item.name] = item.func;
  855.     });
  856.     this.variables.forEach(item => {
  857.       window[item.name] = item.variable;
  858.     });
  859.  
  860.     window.fps = this.fps;
  861.     window.deltaTime = this.deltaTime;
  862.   }
  863.  
  864.   /******************
  865.   
  866.        Init
  867.      
  868.    ******************/
  869.  
  870.   this.settings = settings;
  871.   if (typeof this.settings === 'undefined') {
  872.     //Create a canvas and make it fullscreen
  873.     this.canvas = this.createCanvas();
  874.     this.fillPageWithCanvas();
  875.  
  876.     this.makeFunctionsGlobal();
  877.   }
  878.   else {
  879.     if (typeof this.settings.canvas !== "undefined")
  880.       this.canvas = this.settings.canvas;
  881.     else {
  882.       this.canvas = this.createCanvas();
  883.       if (typeof this.settings.width === "undefined" &&
  884.         typeof this.settings.height === "undefined")
  885.         this.fillPageWithCanvas();
  886.  
  887.       if (typeof this.settings.globalFunctions === "undefined" || (typeof this.settings.globalFunctions !== "undefined" && this.settings.globalFunctions))
  888.         this.makeFunctionsGlobal();
  889.     }
  890.     if (typeof this.settings.width !== "undefined") {
  891.       this.width = this.settings.width;
  892.       this.canvas.width = window.width = this.width;
  893.     }
  894.     if (typeof this.settings.height !== "undefined") {
  895.       this.height = this.settings.height;
  896.       this.canvas.height = window.height = this.height;
  897.     }
  898.     if (typeof this.settings.updateSizeOnResize !== "undefined") {
  899.       this.updateSizeOnResize = this.settings.updateSizeOnResize;
  900.     }
  901.   }
  902.  
  903.   document.addEventListener("keydown", event => {
  904.     this.keys[event.key] = this.keys[event.keyCode] = true;
  905.   });
  906.   document.addEventListener("keyup", event => {
  907.     this.keys[event.key] = this.keys[event.keyCode] = false;
  908.   });
  909.  
  910.   if (this.canvas) {
  911.     this.ctx = this.canvas.getContext("2d");
  912.  
  913.     if (this.updateSizeOnResize) {
  914.       window.addEventListener("resize", () => {
  915.         this.setSize(window.innerWidth, window.innerHeight);
  916.       });
  917.     }
  918.  
  919.     this.mouse = { x: 0, y: 0, lastX: 0, lastY: 0, movementX: 0, movementY: 0, left: false, middle: false, right: false, down: false };
  920.     this.touches = [];
  921.     if (this.globalFunctions) {
  922.       window.mouse = this.mouse;
  923.       window.touches = this.touches;
  924.     }
  925.  
  926.     this.canvas.addEventListener("mousemove", event => {
  927.       let br = this.canvas.getBoundingClientRect();
  928.       this.mouse.x = (event.clientX - br.left) / (br.width / this.width);
  929.       this.mouse.y = (event.clientY - br.top) / (br.height / this.height);
  930.       this.mouse.movementX = event.movementX;
  931.       this.mouse.movementY = event.movementY;
  932.  
  933.       this.eventFunctions["mousemove"] && OnMouseMove(event);
  934.     });
  935.  
  936.     this.canvas.addEventListener("mousedown", event => {
  937.       let button = event.button;
  938.       if (button < 3)
  939.         this.mouse[mouseLookupTable[button]] = true;
  940.  
  941.       if (!this.audioContext)
  942.         this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
  943.  
  944.       this.eventFunctions["mousedown"] && OnMouseDown(event);
  945.     });
  946.  
  947.     this.canvas.addEventListener("mouseup", event => {
  948.       let button = event.button;
  949.       if (button < 3)
  950.         this.mouse[mouseLookupTable[button]] = false;
  951.  
  952.       this.eventFunctions["mouseup"] && OnMouseUp(event);
  953.     });
  954.  
  955.     this.canvas.addEventListener("contextmenu", event => {
  956.       this.eventFunctions["contextmenu"] && OnContextMenu(event);
  957.  
  958.       if (this.contextMenuDisabled) {
  959.         event.preventDefault();
  960.         return false;
  961.       }
  962.       return true;
  963.     });
  964.  
  965.     //Touch
  966.  
  967.     this.updateTouches = function () {
  968.       let br = this.canvas.getBoundingClientRect();
  969.  
  970.       this.touches = [];
  971.       for (let i = 0; i < event.touches.length; i++) {
  972.         var e = event.touches[i];
  973.         var x = (e.pageX - br.left) / (br.width / this.width);
  974.         var y = (e.pageY - br.top) / (br.height / this.height);
  975.         this.touches[i] = { x, y, id: e.identifier, force: e.force };
  976.       }
  977.  
  978.       if (this.globalFunctions)
  979.         window.touches = this.touches;
  980.     }
  981.  
  982.     this.canvas.addEventListener("touchmove", event => {
  983.       if (this.disableScrollOnMobile)
  984.         event.preventDefault();
  985.  
  986.       this.updateTouches();
  987.       this.mouse.x = this.touches[0].x;
  988.       this.mouse.y = this.touches[0].y;
  989.  
  990.       this.eventFunctions["touchmove"] && OnTouchMove(event);
  991.     });
  992.  
  993.     this.canvas.addEventListener("touchend", event => {
  994.       if (this.disableScrollOnMobile)
  995.         event.preventDefault();
  996.  
  997.       this.touches = [];
  998.       if (this.globalFunctions)
  999.         window.touches = this.touches;
  1000.  
  1001.       this.mouse.left = false;
  1002.  
  1003.       this.eventFunctions["touchend"] && OnTouchEnd(event);
  1004.     });
  1005.  
  1006.     this.canvas.addEventListener("touchstart", event => {
  1007.       if (this.disableScrollOnMobile)
  1008.         event.preventDefault();
  1009.  
  1010.       this.updateTouches();
  1011.       this.mouse.x = this.touches[0].x;
  1012.       this.mouse.y = this.touches[0].y;
  1013.       this.mouse.left = true;
  1014.  
  1015.       if (!this.audioContext)
  1016.         this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
  1017.  
  1018.       this.eventFunctions["touchstart"] && OnTouchStart(event);
  1019.     });
  1020.   }
  1021. }

script.js

 

  1. var gc = new GameCanvas();
  2.  
  3. var points = textToPoints("2023新年快乐", 20, "Anton");
  4.  
  5.  
  6. var titleParticles = [];
  7. var fireworks = [];
  8. var particles = [];
  9.  
  10. var gravity = 0.1;
  11.  
  12. setTimeout(function () {
  13.   setInterval(function () {
  14.     fireworks.push(new Firework(Math.random() * width, height, Math.random() - 0.5, -(Math.random() * 7 + 5)));
  15.   }, 200);
  16. }, 2000);
  17.  
  18. fireworks.push(new Firework(width / 2, height, 0, -9.5, 10, "gold", true));
  19. setInterval(function () {
  20.   fireworks.push(new Firework(width / 2, height, 0, -9.5, 10, "gold", true));
  21. }, 5000);
  22.  
  23. for (var i = 0; i < 250; i++) {
  24.   circle(
  25.     Math.random() * width,
  26.     Math.random() * height,
  27.     1,
  28.     "rgb(200, 200, 200)"
  29.   );
  30. }
  31. var starImage = canvasToImage();
  32.  
  33. background("black");
  34. loop();
  35. function loop() {
  36.   gc.ctx.globalCompositeOperation = "source-over";
  37.   background("rgba(0, 0, 0, 0.1)");
  38.   gc.ctx.drawImage(starImage, 0, 0);
  39.   gc.ctx.globalCompositeOperation = "lighter";
  40.  
  41.   for (var i = 0; i < fireworks.length; i++) {
  42.     var firework = fireworks[i];
  43.     firework.update();
  44.     firework.render();
  45.   }
  46.  
  47.   for (var i = 0; i < particles.length; i++) {
  48.     var particle = particles[i];
  49.     particle.update();
  50.     particle.render();
  51.   }
  52.  
  53.   for (var i = 0; i < titleParticles.length; i++) {
  54.     var p = titleParticles[i];
  55.     p.update();
  56.     p.render();
  57.   }
  58.  
  59.   requestAnimationFrame(loop);
  60. }
  61.  
  62. function TitleParticle(x, y, vx, vy) {
  63.   this.x = x;
  64.   this.y = y;
  65.   this.vx = vx;
  66.   this.vy = vy;
  67.   this.ay = 0.2;
  68.   this.radius = 4;
  69.   this.maxHealth = 200;
  70.   this.health = 200;
  71.  
  72.   this.update = function () {
  73.     this.x += this.vx;
  74.     this.y += this.vy;
  75.     this.vx *= 0.95;
  76.     this.vy *= 0.95;
  77.     this.vy += this.ay;
  78.     this.ay *= 0.95;
  79.  
  80.     this.radius = (this.health / this.maxHealth) * 4;
  81.     this.health--;
  82.     if (this.health <= 0) {
  83.       titleParticles.splice(titleParticles.indexOf(this), 1);
  84.     }
  85.   }
  86.  
  87.   this.render = function () {
  88.     circle(this.x, this.y, this.radius, "rgba(255, 255, 255, " + (this.health / this.maxHealth) + ")");
  89.   }
  90. }
  91.  
  92. function Firework(x, y, vx, vy, radius = 5, color = "white", title = false) {
  93.   this.x = x;
  94.   this.y = y;
  95.   this.vx = vx;
  96.   this.vy = vy;
  97.   this.radius = radius;
  98.   this.title = title;
  99.   this.color = color;
  100.  
  101.   this.update = function () {
  102.     this.x += this.vx;
  103.     this.y += this.vy;
  104.     this.vy += gravity;
  105.  
  106.     if (this.vy >= 0) {
  107.       fireworks.splice(fireworks.indexOf(this), 1);
  108.  
  109.       if (this.title) {
  110.         var scale = 0.3;
  111.         for (var i = 0; i < points.length; i++) {
  112.           var p = points[i];
  113.           var v = {
  114.             x: (p.x - 60) * scale + (Math.random() - 0.5) * 0.1,
  115.             y: (p.y - 20) * scale + (Math.random() - 0.5) * 0.1
  116.           }
  117.           var particle = new TitleParticle(this.x, this.y, v.x, v.y);
  118.           titleParticles.push(particle);
  119.         }
  120.       }
  121.       else {
  122.         var color = [Math.random() * 256 >> 0, Math.random() * 256 >> 0, Math.random() * 256 >> 0];
  123.         for (var i = 0; i < Math.PI * 2; i += 0.1) {
  124.           var power = (Math.random() + 0.5) * 4;
  125.           var vx = Math.cos(i) * power;
  126.           var vy = Math.sin(i) * power;
  127.           particles.push(new Particle(this.x, this.y, vx, vy, Math.random() + 3, color));
  128.         }
  129.       }
  130.     }
  131.   }
  132.  
  133.   this.render = function () {
  134.     circle(this.x, this.y, this.radius, this.color);
  135.   }
  136. }
  137.  
  138. function Particle(x, y, vx, vy, radius, color) {
  139.   this.x = x;
  140.   this.y = y;
  141.   this.vx = vx;
  142.   this.vy = vy;
  143.   this.life = 100;
  144.   this.color = color;
  145.   this.radius = radius;
  146.  
  147.   this.update = function () {
  148.     this.x += this.vx;
  149.     this.y += this.vy;
  150.     this.vy += gravity;
  151.  
  152.     this.vx *= 0.95;
  153.     this.vy *= 0.95;
  154.  
  155.     this.life--;
  156.     if (this.life <= 0) {
  157.       particles.splice(particles.indexOf(this), 1);
  158.     }
  159.   }
  160.  
  161.   this.render = function () {
  162.     circle(this.x, this.y, 3 * (this.life / 100), "rgba(" + this.color[0] + ", " + this.color[1] + ", " + this.color[2] + ", " + (this.life / 100) + ")");
  163.   }
  164. }
  165.  
  166. function textToPoints(text, textSize, font) {
  167.   var canvas = document.createElement("canvas");
  168.   canvas.width = 1024;
  169.   canvas.height = textSize * 1.3;
  170.   var ctx = canvas.getContext("2d");
  171.  
  172.   ctx.textBaseline = "middle";
  173.   ctx.font = textSize + "px " + font;
  174.   ctx.fillText(text, 0, canvas.height / 2);
  175.  
  176.   var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  177.   var data = imageData.data;
  178.  
  179.   var points = [];
  180.   var index = (x, y) => (x + canvas.width * y) * 4;
  181.   var threshold = 50;
  182.  
  183.   for (var i = 0; i < data.length; i += 4) {
  184.     if (data[i + 3] > threshold) {
  185.       var p = {
  186.         x: (i / 4) % canvas.width,
  187.         y: (i / 4) / canvas.width >> 0
  188.       };
  189.  
  190.       if (data[index(p.x + 1, p.y) + 3] < threshold ||
  191.         data[index(p.x - 1, p.y) + 3] < threshold ||
  192.         data[index(p.x, p.y + 1) + 3] < threshold ||
  193.         data[index(p.x, p.y - 1) + 3] < threshold) {
  194.         points.push({
  195.           x: (i / 4) % canvas.width,
  196.           y: (i / 4) / canvas.width >> 0
  197.         });
  198.       }
  199.     }
  200.   }
  201.  
  202.   return points;
  203. }

 6.最后点击index.html文件，就可以看见以下烟花了。

 注：左下角，可以点击播发音乐哦！

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

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

  

闽ICP备14008679号