'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // --- Constants & Helper Functions --- const WIDTH = 1200; const HEIGHT = 675; // 16:9 Aspect Ratio const GROUND_Y = 550; const FPS = 60; // Color Palette const COLORS = { bg: '#0f172a', blue: '#38bdf8', blueGlow: '#0ea5e9', red: '#f43f5e', redGlow: '#e11d48', white: '#ffffff', text: 'rgba(255, 255, 255, 0.8)', grid: 'rgba(56, 189, 248, 0.1)', }; // Math Helpers const lerp = (start, end, t) => start * (1 - t) + end * t; const randomRange = (min, max) => Math.random() * (max - min) + min; // Stickman Component const Stickman = ({ x, y, color, scale = 1, pose, opacity = 1, isGlitch = false }) => { // Default pose structure: [headX, headY, bodyEnd, elbowL, handL, elbowR, handR, kneeL, footL, kneeR, footR] // All relative to center x, y // Basic IK-ish mapping based on pose name const getPoseOffsets = (p) => { switch (p) { case 'idle': return { h: [0, -50], b: [0, 0], el: [-20, -25], hl: [-30, 10], er: [20, -25], hr: [30, 10], kl: [-15, 25], fl: [-20, 50], kr: [15, 25], fr: [20, 50] }; case 'run': return { h: [10, -45], b: [0, 0], el: [-30, -20], hl: [20, -30], er: [20, -20], hr: [-20, -30], kl: [-10, 20], fl: [-30, 40], kr: [20, 15], fr: [40, 35] }; case 'cast': // Casting spell/shield return { h: [0, -50], b: [0, 0], el: [-30, -35], hl: [-50, -50], er: [30, -35], hr: [50, -50], kl: [-20, 30], fl: [-25, 60], kr: [20, 30], fr: [25, 60] }; case 'block': // Blocking return { h: [-5, -45], b: [0, 0], el: [20, -30], hl: [40, -10], er: [10, -20], hr: [40, 10], kl: [-20, 30], fl: [-30, 60], kr: [10, 30], fr: [20, 60] }; case 'float': // Floating/God mode return { h: [0, -55], b: [0, -5], el: [-35, -25], hl: [-55, -10], er: [35, -25], hr: [55, -10], kl: [-10, 20], fl: [-15, 45], kr: [10, 25], fr: [15, 50] }; case 'punch': return { h: [15, -45], b: [10, 0], el: [0, -25], hl: [-20, 0], er: [40, -35], hr: [80, -35], kl: [-20, 25], fl: [-40, 55], kr: [30, 25], fr: [50, 55] }; default: return { h: [0, -50], b: [0, 0], el: [-20, -25], hl: [-30, 10], er: [20, -25], hr: [30, 10], kl: [-15, 25], fl: [-20, 50], kr: [15, 25], fr: [20, 50] }; } }; const o = getPoseOffsets(pose); const s = scale; // Apply jitter for glitch effect const jX = () => isGlitch ? (Math.random() - 0.5) * 10 : 0; const jY = () => isGlitch ? (Math.random() - 0.5) * 10 : 0; return ( {/* Glow */} {/* Head */} {/* Body */} {/* Arms */} {/* Legs */} ); }; // --- Main Animation Component --- export default function EpicStickmanBattle() { // State for animation timeline const [frame, setFrame] = useState(0); const totalFrames = 1300; // ~21 seconds loop // Particles & Effects State const [particles, setParticles] = useState([]); const [cameraShake, setCameraShake] = useState({ x: 0, y: 0 }); // Refs for performance const reqRef = useRef(); // Animation Loop useEffect(() => { const animate = () => { setFrame(f => { if (f >= totalFrames) return 0; return f + 1; }); reqRef.current = requestAnimationFrame(animate); }; reqRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(reqRef.current); }, []); // --- Derived Animation Logic --- // Phase Definitions // 0-100: Intro & Dash // 100-150: Clash // 150-300: Laser (Red) vs Shield (Blue) // 300-450: Telekinesis (Blue throws rocks) // 450-650: Time Stop & Giant (Red) // 650-850: Thousand Swords (Blue) // 850-1000: Black Hole & Climax // 1000-1300: Reset const phase = useMemo(() => { if (frame < 100) return 'DASH'; if (frame < 150) return 'CLASH'; if (frame < 300) return 'LASER_SHIELD'; if (frame < 450) return 'TELEKINESIS'; if (frame < 650) return 'TIME_STOP_GIANT'; if (frame < 850) return 'THOUSAND_SWORDS'; if (frame < 1000) return 'BLACK_HOLE'; return 'RESET'; }, [frame]); // Character Positions & Poses const blue = useMemo(() => { let x = 200, y = GROUND_Y, pose = 'idle', scale = 1, opacity = 1; if (phase === 'DASH') { x = lerp(200, 500, frame / 100); pose = 'run'; } else if (phase === 'CLASH') { x = 500 - (frame - 100) * 2; // Knockback slightly pose = 'block'; } else if (phase === 'LASER_SHIELD') { x = 400; pose = 'block'; } else if (phase === 'TELEKINESIS') { x = 300; y = GROUND_Y - 50 - Math.sin(frame * 0.05) * 20; // Float pose = 'cast'; } else if (phase === 'TIME_STOP_GIANT') { x = 300; if (frame > 500 && frame < 600) opacity = 0.5; // Frozen/Greyed pose = frame > 600 ? 'block' : 'idle'; } else if (phase === 'THOUSAND_SWORDS') { x = 200; y = GROUND_Y - 100; pose = 'float'; } else if (phase === 'BLACK_HOLE') { x = lerp(200, 600, (frame - 850) / 150); // Sucked in y = lerp(GROUND_Y - 100, 337, (frame - 850) / 150); scale = lerp(1, 0, (frame - 850) / 150); pose = 'run'; } else { opacity = 0; // Reset } return { x, y, pose, scale, opacity }; }, [frame, phase]); const red = useMemo(() => { let x = 1000, y = GROUND_Y, pose = 'idle', scale = 1, opacity = 1, isGlitch = false; if (phase === 'DASH') { x = lerp(1000, 700, frame / 100); pose = 'run'; } else if (phase === 'CLASH') { x = 700 + (frame - 100) * 2; pose = 'punch'; } else if (phase === 'LASER_SHIELD') { x = 800; pose = 'cast'; } else if (phase === 'TELEKINESIS') { x = 900; pose = 'block'; if (frame > 400) x += (Math.random() - 0.5) * 20; // Hit by rocks } else if (phase === 'TIME_STOP_GIANT') { if (frame < 480) { // Time Stop init isGlitch = true; x = 900; } else { // Giant grow x = 900; const growFactor = Math.min((frame - 480) / 50, 1); scale = 1 + growFactor * 3; // 4x size pose = frame > 580 ? 'punch' : 'cast'; } } else if (phase === 'THOUSAND_SWORDS') { x = 900; scale = 4; pose = 'block'; if (frame > 750) opacity = lerp(1, 0, (frame - 750) / 100); // Defeated } else if (phase === 'BLACK_HOLE') { // Re-appears for finale opacity = 1; scale = 1; x = lerp(1000, 600, (frame - 850) / 150); y = lerp(GROUND_Y, 337, (frame - 850) / 150); scale = lerp(1, 0, (frame - 850) / 150); } else { opacity = 0; } return { x, y, pose, scale, opacity, isGlitch }; }, [frame, phase]); // Camera Shake Calculation useEffect(() => { let shake = 0; if (phase === 'CLASH') shake = 5; if (phase === 'LASER_SHIELD') shake = 2; if (phase === 'TIME_STOP_GIANT' && frame > 580 && frame < 620) shake = 15; // Giant smash if (phase === 'BLACK_HOLE') shake = 8; if (shake > 0) { setCameraShake({ x: (Math.random() - 0.5) * shake, y: (Math.random() - 0.5) * shake }); } else { setCameraShake({ x: 0, y: 0 }); } }, [frame, phase]); // --- Particle/Effect Generators --- // Laser Beam const renderLaser = () => { if (phase !== 'LASER_SHIELD') return null; const charge = Math.min((frame - 150) / 30, 1); const fire = frame > 180; if (!fire) { // Charging Sphere return ( ); } // Firing return ( {/* Impact Flare */} ); }; // Blue Shield const renderShield = () => { if (phase !== 'LASER_SHIELD') return null; if (frame < 170) return null; return ( ); }; // Floating Rocks (Telekinesis) const renderRocks = () => { if (phase !== 'TELEKINESIS') return null; const rockCount = 5; const rocks = []; for(let i = 0; i < rockCount; i++) { // Simple procedural animation for rocks let rx = blue.x + 50 + i * 30; let ry = blue.y + 50; // Lift up if (frame > 300 && frame < 360) { ry -= (frame - 300) * 1.5 + (i * 10); } else if (frame >= 360) { // Throw const t = frame - 360; rx += t * 15; ry = blue.y - 100 + (t * t * 0.1); // Gravity } if (rx < WIDTH) { rocks.push( ); } } return rocks; }; // Thousand Swords const renderSwords = () => { if (phase !== 'THOUSAND_SWORDS') return null; const count = 12; const swords = []; const radius = 120; for(let i = 0; i < count; i++) { const angle = (i / count) * Math.PI * 2 + (frame * 0.02); // Spawn/Rotate let sx = blue.x + Math.cos(angle) * radius; let sy = blue.y - 50 + Math.sin(angle) * radius; let rotation = (angle * 180 / Math.PI) + 90; // Fire logic if (frame > 720) { const targetX = red.x; const targetY = red.y - 150; // Aim for chest of Giant const progress = Math.min((frame - 720 - (i * 5)) / 20, 1); // Staggered fire if (progress > 0) { sx = lerp(sx, targetX, progress); sy = lerp(sy, targetY, progress); // Point towards target const dx = targetX - sx; const dy = targetY - sy; rotation = Math.atan2(dy, dx) * 180 / Math.PI; } } swords.push( ); } return swords; }; // Black Hole const renderBlackHole = () => { if (phase !== 'BLACK_HOLE') return null; const size = Math.min((frame - 850) * 2, 200); return ( {/* Accretion Disk */} {/* Event Horizon text */} EVENT HORIZON DETECTED ); }; // Time Stop Filter const timeStopFilter = phase === 'TIME_STOP_GIANT' && frame < 600 ? 'grayscale(100%) contrast(150%)' : 'none'; const timeStopOverlay = phase === 'TIME_STOP_GIANT' && frame < 500 ? ( ) : null; // --- HUD Elements --- const renderHUD = () => ( {/* Top Bar */} PLAYER 1 // SYNC: 100% TARGET // THREAT: EXTREME {/* Skill Text */} {phase === 'LASER_SHIELD' && "技能: 激光束 (Laser) vs 护盾 (Shield)"} {phase === 'TELEKINESIS' && "技能: 隔空取物 (Telekinesis)"} {phase === 'TIME_STOP_GIANT' && frame < 500 && "技能: 时间暂停 (Time Stop)"} {phase === 'TIME_STOP_GIANT' && frame >= 500 && "技能: 巨大化 (Giant Form)"} {phase === 'THOUSAND_SWORDS' && "终极奥义: 万剑归宗 (Thousand Swords)"} {phase === 'BLACK_HOLE' && "环境灾害: 人造黑洞 (Black Hole)"} ); return (

); }