feat: 完善测试系统 - 卡片式UI、计时器、答题卡、持久化、评分逻辑

Author: badhope

css/styles.css

@@ -1,118 +1,102 @@
 class ParticleBackground {
   constructor(canvasId) {
     this.canvas = document.getElementById(canvasId);
-    this.scene = null;
-    this.camera = null;
-    this.renderer = null;
-    this.particles = null;
-    this.animationId = null;
+    if (!this.canvas) return;
+    
+    this.ctx = this.canvas.getContext('2d');
+    this.particles = [];
     this.mouseX = 0;
     this.mouseY = 0;
-    this.colors = [
-      0xed751c, 0x0ea5e9, 0xd946ef, 
-      0x10b981, 0xf59e0b, 0x8b5cf6
-    ];
 
-    this.init();
+    this.resize();
+    this.initParticles();
+    this.bindEvents();
+    this.animate();
   }
 
-  init() {
-    if (!this.canvas) return;
-    
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-    
-    this.scene = new THREE.Scene();
-    this.camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
-    this.camera.position.z = 50;
-    
-    this.renderer = new THREE.WebGLRenderer({
-      canvas: this.canvas,
-      alpha: true,
-      antialias: true
-    });
-    this.renderer.setSize(width, height);
-    this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-    
-    this.createParticles();
-    
-    window.addEventListener('resize', () => this.onResize());
-    window.addEventListener('mousemove', (e) => this.onMouseMove(e));
-    
-    this.animate();
+  resize() {
+    this.canvas.width = window.innerWidth;
+    this.canvas.height = window.innerHeight;
   }
 
-  createParticles() {
-    const particleCount = 300;
-    const positions = new Float32Array(particleCount * 3);
-    const colors = new Float32Array(particleCount * 3);
-    
-    for (let i = 0; i < particleCount; i++) {
-      positions[i * 3] = (Math.random() - 0.5) * 100;
-      positions[i * 3 + 1] = (Math.random() - 0.5) * 100;
-      positions[i * 3 + 2] = (Math.random() - 0.5) * 50;
-      
-      const color = new THREE.Color(this.colors[Math.floor(Math.random() * this.colors.length)]);
-      colors[i * 3] = color.r;
-      colors[i * 3 + 1] = color.g;
-      colors[i * 3 + 2] = color.b;
+  initParticles() {
+    const count = Math.floor((this.canvas.width * this.canvas.height) / 15000);
+    for (let i = 0; i < count; i++) {
+      this.particles.push({
+        x: Math.random() * this.canvas.width,
+        y: Math.random() * this.canvas.height,
+        vx: (Math.random() - 0.5) * 0.5,
+        vy: (Math.random() - 0.5) * 0.5,
+        size: Math.random() * 2 + 1,
+        alpha: Math.random() * 0.5 + 0.2,
+        color: this.getRandomColor()
+      });
     }
-    
-    const geometry = new THREE.BufferGeometry();
-    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-    geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
-    
-    const material = new THREE.PointsMaterial({
-      size: 2,
-      vertexColors: true,
-      transparent: true,
-      opacity: 0.8,
-      sizeAttenuation: true,
-      blending: THREE.AdditiveBlending
-    });
-    
-    this.particles = new THREE.Points(geometry, material);
-    this.scene.add(this.particles);
   }
 
-  onResize() {
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-    
-    this.camera.aspect = width / height;
-    this.camera.updateProjectionMatrix();
-    this.renderer.setSize(width, height);
+  getRandomColor() {
+    const colors = [
+      '139, 92, 246',
+      '217, 70, 239',
+      '244, 114, 182',
+      '59, 130, 246',
+      '6, 182, 212',
+      '16, 185, 129'
+    ];
+    return colors[Math.floor(Math.random() * colors.length)];
   }
 
-  onMouseMove(event) {
-    this.mouseX = (event.clientX / window.innerWidth) * 2 - 1;
-    this.mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
+  bindEvents() {
+    window.addEventListener('resize', () => this.resize());
+    
+    document.addEventListener('mousemove', (e) => {
+      this.mouseX = e.clientX;
+      this.mouseY = e.clientY;
+    });
   }
 
   animate() {
-    this.animationId = requestAnimationFrame(() => this.animate());
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 
-    if (this.particles) {
-      this.particles.rotation.x += 0.0005;
-      this.particles.rotation.y += 0.0008;
+    this.particles.forEach(p => {
+      p.x += p.vx;
+      p.y += p.vy;
 
-      this.particles.rotation.x += (this.mouseY * 0.5 - this.particles.rotation.x) * 0.02;
-      this.particles.rotation.y += (this.mouseX * 0.5 - this.particles.rotation.y) * 0.02;
-    }
+      if (p.x < 0 || p.x > this.canvas.width) p.vx *= -1;
+      if (p.y < 0 || p.y > this.canvas.height) p.vy *= -1;
+      
+      const dx = this.mouseX - p.x;
+      const dy = this.mouseY - p.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      
+      if (dist < 150) {
+        const force = (150 - dist) / 150;
+        p.vx += (dx / dist) * force * 0.02;
+        p.vy += (dy / dist) * force * 0.02;
+      }
+      
+      this.ctx.beginPath();
+      this.ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+      this.ctx.fillStyle = `rgba(${p.color}, ${p.alpha})`;
+      this.ctx.fill();
+    });
 
-    this.renderer.render(this.scene, this.camera);
-  }
-  
-  destroy() {
-    if (this.animationId) {
-      cancelAnimationFrame(this.animationId);
-    }
-    if (this.renderer) {
-      this.renderer.dispose();
-    }
-    window.removeEventListener('resize', this.onResize);
-    window.removeEventListener('mousemove', this.onMouseMove);
+    this.particles.forEach((p1, i) => {
+      this.particles.slice(i + 1).forEach(p2 => {
+        const dx = p1.x - p2.x;
+        const dy = p1.y - p2.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        
+        if (dist < 120) {
+          this.ctx.beginPath();
+          this.ctx.moveTo(p1.x, p1.y);
+          this.ctx.lineTo(p2.x, p2.y);
+          this.ctx.strokeStyle = `rgba(${p1.color}, ${0.1 * (1 - dist / 120)})`;
+          this.ctx.stroke();
+        }
+      });
+    });
+    
+    requestAnimationFrame(() => this.animate());
   }
 }
-
-window.ParticleBackground = ParticleBackground;