canvas实现鼠标单击长剑刺破气泡破碎粒子动画代码-html代码-BFW代码库

canvas实现鼠标单击长剑刺破气泡破碎粒子动画代码

代码语言：html

所属分类：动画

代码描述：canvas实现鼠标单击长剑刺破气泡破碎粒子动画代码

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

<!DOCTYPE html>
<html lang="zh">
<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 {
            overflow: hidden;
            background: #060810;
            cursor: crosshair;
        }
        canvas { display: block; }
        #hint {
            position: fixed;
            bottom: 36px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(160, 200, 240, 0.5);
            font-family: serif;
            font-size: 14px;
            letter-spacing: 6px;
            pointer-events: none;
            transition: opacity 0.6s;
            text-shadow: 0 0 16px rgba(100, 180, 255, 0.25);
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div id="hint">点击任意位置 · 释放利剑</div>

    <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const hint = document.getElementById('hint');

    /* ========== 所有变量声明在最前面，避免 TDZ ========== */
    let W = 0, H = 0;
    let time = 0;
    let flashOpacity = 0;
    let shakeIntensity = 0;
    let resetCountdown = -1;

    const STATE = { IDLE: 0, SWORD_FLYING: 1, BURST: 2 };
    let state = STATE.IDLE;

    let stars = [];
    let bubble = null;
    let sword = null;
    let fragments = [];
    let waterDrops = [];
    let sparkles = [];
    let glowOrbs = [];
    let shockwaves = [];
    let trailParts = [];
    let mouseX = 0, mouseY = 0;

    /* ========== 工具函数 ========== */
    function easeOutElastic(t) {
        if (t <= 0) return 0;
        if (t >= 1) return 1;
        return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
    }

    /* ========== 星空背景 ========== */
    function initStars() {
        stars = [];
        for (let i = 0; i < 180; i++) {
            stars.push({
                x: Math.random() * W,
                y: Math.random() * H,
                r: Math.random() * 1.4 + 0.3,
                alpha: Math.random() * 0.4 + 0.15,
                speed: Math.random() * 0.003 + 0.001,
                phase: Math.random() * Math.PI * 2
            });
        }
    }

    /* =.........完整代码请登录后点击上方下载按钮下载查看