设为首页收藏本站手机版导航 今天是: 2024-12-05    美好的一天,从现在开始
天气与日历 切换到宽版

 找回密码
 立即注册
搜索
查看: 1090|回复: 0

纯js实现页面点击爆炸效果_五颜六色特效

[复制链接]
  • 打卡总天数:114

467

主题

31

回帖

24万

积分

管理员

积分
247699

突出贡献荣誉管理论坛元老本科学士学位劳力士欧米茄奔驰宝马

QQ

皮卡丘 Lv:40
发表于 2022-3-30 09:23:22 | 显示全部楼层 |阅读模式 IP:天津
纯js实现页面点击爆炸效果 - 鼠标点击爆炸五颜六色特效,长按鼠标会大爆炸,以下js直接放h5页面中即可,调整小球颜色大小及速度等都已注释,方便修改,效果可在本页面直接预览
- sheep论坛

  1. <!-- 鼠标点击爆炸五颜六色特效 - sheep - 20220330 -->
  2. <script type="text/javascript">
  3. function clickEffect() {
  4.   let balls = [];
  5.   let longPressed = false;
  6.   let longPress;
  7.   let multiplier = 0;
  8.   let width, height;
  9.   let origin;
  10.   let normal;
  11.   let ctx;
  12.   //小球颜色
  13.   const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
  14.   const canvas = document.createElement("canvas");
  15.   document.body.appendChild(canvas);
  16.   canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
  17.   const pointer = document.createElement("span");
  18.   pointer.classList.add("pointer");
  19.   document.body.appendChild(pointer);

  20.   if (canvas.getContext && window.addEventListener) {
  21.     ctx = canvas.getContext("2d");
  22.     updateSize();
  23.     window.addEventListener('resize', updateSize, false);
  24.     loop();
  25.     window.addEventListener("mousedown", function(e) {
  26.       pushBalls(randBetween(5, 10), e.clientX, e.clientY);
  27.       document.body.classList.add("is-pressed");
  28.       longPress = setTimeout(function() {
  29.         document.body.classList.add("is-longpress");
  30.         longPressed = true;
  31.       }, 500);
  32.     }, false);
  33.     window.addEventListener("mouseup", function(e) {
  34.       clearInterval(longPress);
  35.       if (longPressed == true) {
  36.         document.body.classList.remove("is-longpress");
  37.         pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
  38.         longPressed = false;
  39.       }
  40.       document.body.classList.remove("is-pressed");
  41.     }, false);
  42.     window.addEventListener("mousemove", function(e) {
  43.       let x = e.clientX;
  44.       let y = e.clientY;
  45.       pointer.style.top = y + "px";
  46.       pointer.style.left = x + "px";
  47.     }, false);
  48.   } else {
  49.     console.log("canvas or addEventListener is unsupported!");
  50.   }


  51.   function updateSize() {
  52.     canvas.width = window.innerWidth * 2;
  53.     canvas.height = window.innerHeight * 2;
  54.     canvas.style.width = window.innerWidth + 'px';
  55.     canvas.style.height = window.innerHeight + 'px';
  56.     ctx.scale(2, 2);
  57.     width = (canvas.width = window.innerWidth);
  58.     height = (canvas.height = window.innerHeight);
  59.     origin = {
  60.       x: width / 2,
  61.       y: height / 2
  62.     };
  63.     normal = {
  64.       x: width / 2,
  65.       y: height / 2
  66.     };
  67.   }
  68.   class Ball {
  69.     constructor(x = origin.x, y = origin.y) {
  70.       this.x = x;
  71.       this.y = y;
  72.       this.angle = Math.PI * 2 * Math.random();
  73.       if (longPressed == true) {
  74.         this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
  75.       } else {
  76.         this.multiplier = randBetween(6, 12);
  77.       }
  78.       this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
  79.       this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
  80.           //小球大小
  81.       this.r = randBetween(2, 1) + 2 * Math.random();
  82.       this.color = colours[Math.floor(Math.random() * colours.length)];
  83.     }
  84.     update() {
  85.       this.x += this.vx - normal.x;
  86.       this.y += this.vy - normal.y;
  87.       normal.x = -2 / window.innerWidth * Math.sin(this.angle);
  88.       normal.y = -2 / window.innerHeight * Math.cos(this.angle);
  89.       //消失速度
  90.           this.r -= 0.1;
  91.           //横向扩大范围
  92.       this.vx *= 0.9;
  93.           //纵向扩大范围
  94.       this.vy *= 0.9;
  95.     }
  96.   }

  97.   function pushBalls(count = 1, x = origin.x, y = origin.y) {
  98.     for (let i = 0; i < count; i++) {
  99.       balls.push(new Ball(x, y));
  100.     }
  101.   }

  102.   function randBetween(min, max) {
  103.     return Math.floor(Math.random() * max) + min;
  104.   }

  105.   function loop() {
  106.     ctx.fillStyle = "rgba(255, 255, 255, 0)";
  107.     ctx.clearRect(0, 0, canvas.width, canvas.height);
  108.     for (let i = 0; i < balls.length; i++) {
  109.       let b = balls[i];
  110.       if (b.r < 0) continue;
  111.       ctx.fillStyle = b.color;
  112.       ctx.beginPath();
  113.       ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
  114.       ctx.fill();
  115.       b.update();
  116.     }
  117.     if (longPressed == true) {
  118.       multiplier += 0.2;
  119.     } else if (!longPressed && multiplier >= 0) {
  120.       multiplier -= 0.4;
  121.     }
  122.     removeBall();
  123.     requestAnimationFrame(loop);
  124.   }

  125.   function removeBall() {
  126.     for (let i = 0; i < balls.length; i++) {
  127.       let b = balls[i];
  128.       if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
  129.         balls.splice(i, 1);
  130.       }
  131.     }
  132.   }
  133.   }
  134.   clickEffect();//调用
  135. </script>
复制代码



绵羊优创 - 专注优质内容创作分享!
懒得打字嘛,点击右侧快捷回复 【乱回复纯数字纯字母将禁言】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|社区规范|心情墙|神奇宝贝||绵羊优创 ( 京ICP备19037745号-2 )|网站地图

公安备案京公网安备11011502037529号

GMT+8, 2024-12-5 18:58 , Processed in 1.316815 second(s), 16 queries , MemCache On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表