js实现点击重力炸弹爆炸动画效果代码-html代码-BFW代码库

js实现点击重力炸弹爆炸动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现点击重力炸弹爆炸动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
* {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
  background: black;
  box-sizing: border-box;
}
</style>




</head>

<body >
  <canvas id="c"></canvas>

  
      <script >
// The spacing equation came from here: https://math.stackexchange.com/questions/1039482/how-to-evenly-space-a-number-of-points-in-a-rectangle
// And yes, it was just as fun to code as it looks :P

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const dotCount = 10000;
const size = 4;
const f = 3;
const dots = [];
const v = 128; // Center of color range
const l = 127; // Maximum color deviation
const rot = 80;
let w = 0;
let h = 0;
let cX = 0;
let cY = 0;
let mD = 0;
let mouseDown = false;

let nX = 0;
let nY = 0;
let sX = 0;
let sY = 0;

function resize() {
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  cX = w / 2;
  cY = h / 2;
  mD = Math.sqrt(cX * cX + cY * cY);

  nX = Math.sqrt(w / h * dotCount + (w - h) * (w - h) / (4 * h * (4 * h))) - (w - h) / (2 * h);
  nY = dotCount / nX;
  sX = w / (nX - 1);
  sY = h / (nY - 1);

  for (let i = 0; i < dotCount; i++) {
    //const x = Math.random() * w;
    //const y = Math.random() * h;
    const x = sX * (i % nX);
    const y = sY * (i / nX | 0);
    const t = Math.random() * 3000;
    const c = Math.random() * 360 | 0;
    dots[i] = { x, y, oX: x, oY: y, t, c };
  }
}

window.addEventListener('resize', resize);
window.addEventListener('mousedown', () => {mouseDown = true;});
document.addEventListener('touchstart', () => {mouseDown = true;});
window.addEventListener('mouseup', () => {mouseDown = false;});
document.addEventListener('touchend', () => {mouseDown = false;});
resize();

function draw(time = 0) {
  ctx.clearRect(0, 0, w, h);
  for (let i = 0; i < dotCount; i++) {
    const d = dots[i];
    const t = (d.t + time) * 0.005;

    if (mouseDown) {
      const s = Math.sqrt((d..........完整代码请登录后点击上方下载按钮下载查看