canvas实现鼠标单击射击漂浮水泡爆炸效果代码-html代码-BFW代码库

canvas实现鼠标单击射击漂浮水泡爆炸效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现鼠标单击射击漂浮水泡爆炸效果代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水泡射箭</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: linear-gradient(180deg, #0a1628 0%, #0d2444 40%, #0a3d2e 100%);
  min-height: 100vh;
  overflow: hidden;
  cursor: crosshair;
}
canvas { display: block; position: fixed; top: 0; left: 0; }
#hint {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(180,220,255,0.6);
  font-size: 13px;
  pointer-events: none;
  font-family: 'Microsoft YaHei', sans-serif;
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(100,180,255,0.8);
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="hint">点击任意位置 · 射箭击破水泡</div>
<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
let W = canvas.width = window.innerWidth;
let H = canvas.height = window.innerHeight;

window.addEventListener('resize', () => {
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight;
  createBubbles();
});

// ── 工具 ──────────────────────────────────────
const rnd = (a, b) => Math.random() * (b - a) + a;
const rndInt = (a, b) => Math.floor(rnd(a, b));
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
const PI2 = Math.PI * 2;

// ── 水滴粒子 ─────────────────────────────────
class Drop {
  constructor(x, y, vx, vy, r, hue, type) {
    this.x = x; this.y = y;
    this.vx = vx; this.vy = vy;
    this.r = r;
    this.hue = hue;
    this.type = type || 'drop'; // drop | splash | mist | ring
    this.life = 1;
    this.decay = rnd(0.008, 0.022);
    this.gravity = 0.28;
    this.bounce = rnd(0.3, 0.55);
    this.friction = rnd(0.78, 0.88);
    this.floor = H - rnd(0, 8);
    this.bounced = false;
    this.trail = [];
    this.maxTrail = type === 'drop' ? 5 : 2;
    this.spin = rnd(-0.3, 0.3);
    this.angle = Math.atan2(vy, vx);
    this.stretch = 1;
    this.onFloor = false;
    this.spreadLife = 0;
    this.rippleR = 0;
  }

  update() {
    if (this.type === 'ring') {
      this.rippleR += 2.5;
      this.life -= 0.025;
      return this.life > 0;
    }
    if (this.onFloor) {
      this.spreadLife += 0.06;
      this.life -= 0.018;
      return this.life > 0;
    }

    // 保存轨迹
    this.trail.push({ x: this.x, y: this.y });
    if (this.trail.length > this.maxTrail) this.trail.shift();

    this.vy += this.gravity;
    this.vx *= 0.995;
    this.x += this.vx;
    this.y += this.vy;

    // 速度拉伸
    const spd = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
    this.stretch = clamp(1 + spd * 0.06, 1, 3.5);
    this.angle = Math.atan2(this.vy, this.vx);

    // 落地弹跳
    if (this.y.........完整代码请登录后点击上方下载按钮下载查看