☰

click beatiful

会在你点击鼠标时生成特效，并且会持续生成流星雨特效，美观又时尚

目前为 2025-01-21 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         click beatiful
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2025-1-21
  5. // @description  会在你点击鼠标时生成特效，并且会持续生成流星雨特效，美观又时尚
  6. // @author       BarkFlorr
  7. // @match        https://*/*
  8. // @match        http://*/*
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.     function clickEffect() {
  16.         let balls = [];
  17.         let longPressed = false;
  18.         let longPress;
  19.         let multiplier = 0;
  20.         let width, height;
  21.         let origin;
  22.         let normal;
  23.         let ctx;
  24.         const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
  25.         const canvas = document.createElement("canvas");
  26.         document.body.appendChild(canvas);
  27.         canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
  28.         const pointer = document.createElement("span");
  29.         pointer.classList.add("pointer");
  30.         document.body.appendChild(pointer);
  31.  
  32.         if (canvas.getContext && window.addEventListener) {
  33.             ctx = canvas.getContext("2d");
  34.             updateSize();
  35.             window.addEventListener('resize', updateSize, false);
  36.             loop();
  37.             window.addEventListener("mousedown", function(e) {
  38.                 pushBalls(randBetween(10, 15), e.clientX, e.clientY);
  39.                 document.body.classList.add("is-pressed");
  40.                 longPress = setTimeout(function(){
  41.                     document.body.classList.add("is-longpress");
  42.                     longPressed = true;
  43.                 }, 500);
  44.             }, false);
  45.             window.addEventListener("mouseup", function(e) {
  46.                 clearInterval(longPress);
  47.                 if (longPressed == true) {
  48.                     document.body.classList.remove("is-longpress");
  49.                     pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
  50.                     longPressed = false;
  51.                 }
  52.                 document.body.classList.remove("is-pressed");
  53.             }, false);
  54.         } else {
  55.             console.log("canvas or addEventListener is unsupported!");
  56.         }
  57.  
  58.  
  59.         function updateSize() {
  60.             canvas.width = window.innerWidth * 2;
  61.             canvas.height = window.innerHeight * 2;
  62.             canvas.style.width = window.innerWidth + 'px';
  63.             canvas.style.height = window.innerHeight + 'px';
  64.             ctx.scale(2, 2);
  65.             width = (canvas.width = window.innerWidth);
  66.             height = (canvas.height = window.innerHeight);
  67.             origin = {
  68.                 x: width / 2,
  69.                 y: height / 2
  70.             };
  71.             normal = {
  72.                 x: width / 2,
  73.                 y: height / 2
  74.             };
  75.         }
  76.         class Ball {
  77.             constructor(x = origin.x, y = origin.y) {
  78.                 this.x = x;
  79.                 this.y = y;
  80.                 this.angle = Math.random() * 2 * Math.PI;
  81.                 if (longPressed == true) {
  82.                     this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
  83.                 } else {
  84.                     this.multiplier = randBetween(6, 12);
  85.                 }
  86.                 this.vx = (this.multiplier + Math.random()) * Math.cos(this.angle);
  87.                 this.vy = (this.multiplier + Math.random()) * Math.sin(this.angle);
  88.                 this.r = randBetween(4, 0);
  89.                 this.color = colours[Math.floor(Math.random() * colours.length)];
  90.             }
  91.             update() {
  92.                 this.x += this.vx - normal.x;
  93.                 this.y += this.vy - normal.y;
  94.                 normal.x = -2 / window.innerWidth * Math.sin(this.angle);
  95.                 normal.y = -2 / window.innerHeight * Math.cos(this.angle);
  96.                 this.vx *= 1;
  97.                 this.vy *= 1;
  98.             }
  99.         }
  100.  
  101.         function pushBalls(count = 1, x = origin.x, y = origin.y) {
  102.             for (let i = 0; i < count; i++) {
  103.                 balls.push(new Ball(x, y));
  104.             }
  105.         }
  106.  
  107.         function randBetween(min, max) {
  108.             return Math.floor(Math.random() * max) + min;
  109.         }
  110.  
  111.         function loop() {
  112.             ctx.fillStyle = "rgba(255, 255, 255, 0)";
  113.             ctx.clearRect(0, 0, canvas.width, canvas.height);
  114.             for (let i = 0; i < balls.length; i++) {
  115.                 let b = balls[i];
  116.                 if (b.r < 0) continue;
  117.                 ctx.fillStyle = b.color;
  118.                 ctx.beginPath();
  119.                 ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
  120.                 ctx.fill();
  121.                 b.update();
  122.             }
  123.             if (longPressed == true) {
  124.                 multiplier += 0.2;
  125.             } else if (!longPressed && multiplier >= 0) {
  126.                 multiplier -= 0.4;
  127.             }
  128.             removeBall();
  129.             requestAnimationFrame(loop);
  130.         }
  131.  
  132.         function removeBall() {
  133.             for (let i = 0; i < balls.length; i++) {
  134.                 let b = balls[i];
  135.                 if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
  136.                     balls.splice(i, 1);
  137.                 }
  138.             }
  139.         }
  140.  
  141.         function pushBallsFromTopLeft() {
  142.             let x = randBetween(0, width);
  143.             let y = randBetween(0, height);
  144.             let xxx = randBetween(0, 2);
  145.             if(xxx==0) x=0;
  146.             else y=0;
  147.             let angle = Math.atan2(height, width);
  148.             let ball = new Ball(x, y);
  149.             ball.vx = (ball.multiplier + Math.random()) * Math.cos(angle);
  150.             ball.vy = (ball.multiplier + Math.random()) * Math.sin(angle);
  151.             balls.push(ball);
  152.         }
  153.  
  154.         setInterval(pushBallsFromTopLeft, 30);
  155.  
  156.     }
  157.     clickEffect();
  158. })();