弹球特效

文章目录

• • 弹球特效

import React, { useRef, useEffect } from 'react';  const BouncingBallSimulation = () => {   const canvasRef = useRef(null);    useEffect(() => {     const canvas = canvasRef.current;     const ctx = canvas.getContext('2d');     let animationFrameId;      // Set canvas size     canvas.width = 900;     canvas.height = 1600;      // Circle properties     const centerX = canvas.width / 2;     const centerY = canvas.height / 2;     const radius = Math.min(centerX, centerY) * 0.7;      // Ball properties     const ballRadius = 15;     let x = centerX;     let y = centerY - radius + ballRadius;     let dx = 2;     let dy = 0;      // Gravity and friction     const gravity = 0.2;     const friction = 0.99;      // Matrix rain properties     const fontSize = 14;     const columns = canvas.width / fontSize;     const drops = [];     for (let i = 0; i < columns; i++) {       drops[i] = 1;     }      const drawMatrixRain = () => {       ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';       ctx.fillRect(0, 0, canvas.width, canvas.height);        ctx.fillStyle = '#0F0';       ctx.font = `${fontSize}px monospace`;        for (let i = 0; i < drops.length; i++) {         const text = String.fromCharCode(0x30A0 + Math.random() * 96);         ctx.fillText(text, i * fontSize, drops[i] * fontSize);          if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {           drops[i] = 0;         }         drops[i]++;       }     };      const draw = () => {       ctx.clearRect(0, 0, canvas.width, canvas.height);        // Draw matrix rain       drawMatrixRain();        // Draw circle       ctx.beginPath();       ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);       ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';       ctx.stroke();        // Draw ball       ctx.beginPath();       ctx.arc(x, y, ballRadius, 0, Math.PI * 2);       ctx.fillStyle = 'white';       ctx.fill();        // Apply gravity       dy += gravity;        // Ball movement and collision detection       const nextX = x + dx;       const nextY = y + dy;       const distanceFromCenter = Math.sqrt((nextX - centerX) ** 2 + (nextY - centerY) ** 2);        if (distanceFromCenter + ballRadius > radius) {         // Calculate the normal vector         const nx = (nextX - centerX) / distanceFromCenter;         const ny = (nextY - centerY) / distanceFromCenter;          // Calculate the dot product         const dotProduct = dx * nx + dy * ny;          // Update velocity         dx = (dx - 2 * dotProduct * nx) * friction;         dy = (dy - 2 * dotProduct * ny) * friction;       } else {         x = nextX;         y = nextY;       }        animationFrameId = requestAnimationFrame(draw);     };      draw();      return () => {       cancelAnimationFrame(animationFrameId);     };   }, []);    return (     
       canvasRef} className="border border-gray-300" />     
   ); };  export default BouncingBallSimulation;