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>
        :root {
            --bg: #0a0a14;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            background: var(--bg);
            cursor: crosshair;
            font-family: 'Georgia', 'Times New Roman', serif;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        canvas {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .hint {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.6);
            font-size: 16px;
            letter-spacing: 3px;
            pointer-events: none;
            transition: opacity 0.6s ease;
            text-shadow: 0 0 20px rgba(180, 200, 255, 0.5);
            z-index: 10;
        }

        .hint.fading {
            opacity: 0.15;
        }

        @media (max-width: 768px) {
            .hint {
                font-size: 13px;
                bottom: 35px;
                letter-spacing: 2px;
            }
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div class="hint" id="hint">⚔ 点 击 发 射 剑 矢 ⚔</div>

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

            let W, H, centerX, centerY;
            let dpr = Math.min(window.devicePixelRatio || 1, 2);

            // --- 状态机 ---
            const STATE = { IDLE: 'idle', SWORD_FLYING: 'sword_flying', EXPLODING: 'exploding', RESPAWNING: 'respawning' };
            let state = STATE.IDLE;
            let respawnTimer = 0;
            const RESPAWN_DELAY = 1.5; // 秒

            // --- 气泡 ---
            let bubble = {
                x: 0,
                y: 0,
                baseY: 0,
                radius: 100,
                floatPhase: 0,
                floatAmp: 18,
                floatSpeed: 1.2,
                alive: true,
                shimmerPhase: 0,
            };

            // --- 剑 ---
            let sword = {
                x: 0,
                y: 0,
                startX: 0,
                startY: 0,
                targetX: 0,
                targetY: 0,
                speed: 0,
                maxSpeed: 1800,
                opacity: 1,
                active: false,
                hasHit: false,
                trailPositions: [],
                wobblePhase: 0,
                wobbleAmp: 3,
            };

            // --- 粒子 ---
            let particles = [];
            const MAX_PARTICLES = 180;

            // --- 冲击波 ---
            let shockwaves = [];

            // --- 闪光 ---
            let flashAlpha = 0;

            // --- 微小背景气泡 ---
            let ambientBubbles = [];

            // --- 鼠标位置 ---
            let mouseX = 0;
            let mouseY = 0;
            let mouseOnCanvas = false;

            // --- 初始化 ---
            function resize() {
                W = window.innerWidth;
                H = window.innerHeight;
                dpr = Math.min(window.devicePixelRatio || 1, 2);
                canvas.width = W * dpr;
                canvas.height = H * dpr;
                canvas.style.width = W + 'px';
                canvas.style.height = H + 'px';
                ctx.setTransform(1, 0, 0, 1, 0, 0);
                ctx.scale(dpr, dpr);

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