Update index.html

index.html

@@ -182,7 +182,18 @@
         50% { opacity: 0.3; }
         100% { opacity: 1; }
     }
-    
+      
+    /* 添加在CSS部分 */
+@keyframes newTargetFlash {
+    0% { transform: scale(0.5); opacity: 0; }
+    50% { transform: scale(1.2); opacity: 1; }
+    100% { transform: scale(1); opacity: 1; }
+}
+
+.new-target-flash {
+    animation: newTargetFlash 0.5s forwards;
+}
+      
     .screen-flash {
         position: fixed;
         top: 0;
@@ -371,19 +382,32 @@
                 projectiles: [],
                 stars: [],
                 currentWeapon: 'basic',
+                // ...其他属性保持不变...
+                centerRadius: 300, // 中心区域半径
+                targetSpawnBuffer: 100 // 目标生成缓冲区域
+
                 weapons: {
                     basic: { price: 0, fireRate: 500, projectileCount: 1, spread: 0, bouncy: false },
                     rapid: { price: 50, fireRate: 250, projectileCount: 1, spread: 0, bouncy: false },
-                    double: { price: 150, fireRate: 500, projectileCount: 2, spread: 10, bouncy: false },
-                    shotgun: { price: 300, fireRate: 800, projectileCount: 5, spread: 20, bouncy: false },
-                    bouncy: { price: 500, fireRate: 400, projectileCount: 1, spread: 0, bouncy: true }
+                    double: { price: 150, fireRate: 250, projectileCount: 2, spread: 10, bouncy: false },
+                    shotgun: { price: 500, fireRate: 500, projectileCount: 5, spread: 20, bouncy: false },
+                    // ...其他武器保持不变...
+    bouncy: { 
+        price: 1000, 
+        fireRate: 250, // 加快发射速度，类似第二种武器
+        projectileCount: 12, // 8发子弹
+        spread: 360, // 360度全方向散射
+        bouncy: true 
+    }
                 },
                 lastShot: 0,
                 colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'],
                 currentColorIndex: 0,
                 targetSpeed: 2,
                 targetCount: 1,
-                gameOver: false
+                gameOver: false// 修
+    
+}
             };
             
             // DOM elements
@@ -526,41 +550,43 @@
             }
             
             function createTarget(index) {
-                const target = document.createElement('div');
-                target.className = 'target';
-                
-                // Use huggingface emoji as target
-                target.style.backgroundImage = 'url("https://huggingface.co/front/assets/huggingface_logo-noborder.svg")';
-                
-                // Position randomly but ensure it's fully visible
-                const maxX = window.innerWidth - 250;
-                const maxY = window.innerHeight - 250;
-                
-                const x = Math.max(0, Math.min(maxX, Math.random() * maxX));
-                const y = Math.max(0, Math.min(maxY, Math.random() * maxY));
-                
-                target.style.left = `${x}px`;
-                target.style.top = `${y}px`;
-                
-                // Add hit effect
-                const hitEffect = document.createElement('div');
-                hitEffect.className = 'hit-effect';
-                hitEffect.style.backgroundImage = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><circle cx=\'50\' cy=\'50\' r=\'40\' fill=\'' + state.colors[state.currentColorIndex] + '\' opacity=\'0.7\'/></svg>")';
-                
-                target.appendChild(hitEffect);
-                targetsContainer.appendChild(target);
-                
-                // Store target data
-                state.targets.push({
-                    element: target,
-                    hitEffect: hitEffect,
-                    x: x,
-                    y: y,
-                    vx: (Math.random() - 0.5) * state.targetSpeed,
-                    vy: (Math.random() - 0.5) * state.targetSpeed,
-                    index: index
-                });
-            }
+    const target = document.createElement('div');
+    target.className = 'target new-target-flash';
+    
+    // 使用huggingface emoji作为目标
+    target.style.backgroundImage = 'url("https://huggingface.co/front/assets/huggingface_logo-noborder.svg")';
+    
+    const centerX = window.innerWidth / 2;
+    const centerY = window.innerHeight / 2;
+    
+    let x, y;
+    let attempts = 0;
+    const maxAttempts = 10;
+    
+    // 确保目标不会生成在中心区域附近
+    do {
+        x = Math.random() * (window.innerWidth - 250);
+        y = Math.random() * (window.innerHeight - 250);
+        attempts++;
+        
+        // 计算到中心的距离
+        const dx = x - centerX;
+        const dy = y - centerY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        
+        // 如果距离足够远或尝试次数过多，则退出循环
+        if (distance > state.centerRadius || attempts >= maxAttempts) {
+            break;
+        }
+    } while (true);
+    
+    // 移除闪烁动画
+    setTimeout(() => {
+        target.classList.remove('new-target-flash');
+    }, 500);
+    
+    // ...其余创建目标的代码保持不变...
+}
             
             // Update targets position
             function updateTargets() {
@@ -642,56 +668,63 @@
             }
             
             function createProjectile(mouseX, mouseY, index) {
-                const projectile = document.createElement('div');
-                projectile.className = 'projectile';
-                
-                // Calculate direction from center to mouse
-                const centerX = window.innerWidth / 2;
-                const centerY = window.innerHeight / 2;
-                
-                let dx = mouseX - centerX;
-                let dy = mouseY - centerY;
-                
-                // Normalize direction vector
-                const distance = Math.sqrt(dx * dx + dy * dy);
-                dx /= distance;
-                dy /= distance;
-                
-                // Apply weapon spread
-                const weapon = state.weapons[state.currentWeapon];
-                const spreadAngle = (index - (weapon.projectileCount - 1) / 2) * weapon.spread * (Math.PI / 180);
-                
-                // Rotate direction by spread angle
-                const cos = Math.cos(spreadAngle);
-                const sin = Math.sin(spreadAngle);
-                const tx = dx * cos - dy * sin;
-                const ty = dx * sin + dy * cos;
-                
-                dx = tx;
-                dy = ty;
-                
-                // Set projectile color
-                projectile.style.backgroundColor = state.colors[state.currentColorIndex];
-                
-                // Set initial position at center
-                projectile.style.left = `${centerX}px`;
-                projectile.style.top = `${centerY}px`;
-                
-                projectilesContainer.appendChild(projectile);
-                
-                // Store projectile data
-                const projectileData = {
-                    element: projectile,
-                    x: centerX,
-                    y: centerY,
-                    vx: dx * 10,
-                    vy: dy * 10,
-                    bounces: 0,
-                    maxBounces: weapon.bouncy ? 3 : 0
-                };
-                
-                state.projectiles.push(projectileData);
-            }
+    const projectile = document.createElement('div');
+    projectile.className = 'projectile';
+    
+    const centerX = window.innerWidth / 2;
+    const centerY = window.innerHeight / 2;
+    
+    let dx, dy;
+    const weapon = state.weapons[state.currentWeapon];
+    
+    if (state.currentWeapon === 'bouncy') {
+        // 第五种武器特殊处理 - 全方向随机散射
+        const angle = (index / weapon.projectileCount) * Math.PI * 2;
+        dx = Math.cos(angle);
+        dy = Math.sin(angle);
+    } else {
+        // 其他武器保持原有逻辑
+        dx = mouseX - centerX;
+        dy = mouseY - centerY;
+        
+        // 标准化方向向量
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        dx /= distance;
+        dy /= distance;
+        
+        // 应用武器散射
+        const spreadAngle = (index - (weapon.projectileCount - 1) / 2) * weapon.spread * (Math.PI / 180);
+        const cos = Math.cos(spreadAngle);
+        const sin = Math.sin(spreadAngle);
+        const tx = dx * cos - dy * sin;
+        const ty = dx * sin + dy * cos;
+        
+        dx = tx;
+        dy = ty;
+    }
+    
+    // 设置子弹颜色
+    projectile.style.backgroundColor = state.colors[state.currentColorIndex];
+    
+    // 设置初始位置在中心
+    projectile.style.left = `${centerX}px`;
+    projectile.style.top = `${centerY}px`;
+    
+    projectilesContainer.appendChild(projectile);
+    
+    // 存储子弹数据
+    const projectileData = {
+        element: projectile,
+        x: centerX,
+        y: centerY,
+        vx: dx * 15, // 加快子弹速度
+        vy: dy * 15,
+        bounces: 0,
+        maxBounces: weapon.bouncy ? 3 : 0
+    };
+    
+    state.projectiles.push(projectileData);
+}
             
             // Update projectiles position
             function updateProjectiles() {
@@ -764,30 +797,40 @@
             
             // Check for collisions with center
             function checkCenterCollision() {
-                if (state.gameOver) return;
-                
-                const centerX = window.innerWidth / 2;
-                const centerY = window.innerHeight / 2;
-                const centerRadius = 10;
-                
-                state.targets.forEach(target => {
-                    // Check if any part of target is within center radius
-                    const targetCenterX = target.x + 125;
-                    const targetCenterY = target.y + 125;
-                    const distance = Math.sqrt(
-                        Math.pow(targetCenterX - centerX, 2) + 
-                        Math.pow(targetCenterY - centerY, 2)
-                    );
-                    
-                    if (distance < centerRadius + 125) {
-                        handleCenterHit();
-                    }
-                });
-            }
+    const centerX = window.innerWidth / 2;
+    const centerY = window.innerHeight / 2;
+    const centerRadius = 50; // 中心区域半径
+    
+    state.targets.forEach(target => {
+        const targetCenterX = target.x + 125; // 目标中心X
+        const targetCenterY = target.y + 125; // 目标中心Y
+        
+        // 计算到中心的距离
+        const dx = targetCenterX - centerX;
+        const dy = targetCenterY - centerY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        
+        if (distance < centerRadius) {
+            handleCenterHit();
+            
+            // 添加红色全屏闪烁
+            const screenFlash = document.createElement('div');
+            screenFlash.className = 'screen-flash';
+            gameContainer.appendChild(screenFlash);
+            
+            setTimeout(() => {
+                screenFlash.classList.add('active');
+                setTimeout(() => {
+                    screenFlash.remove();
+                }, 500);
+            }, 0);
+        }
+    });
+}
             
 // 修改handleCenterHit函数
 function handleHit(target, projectile) {
-    // Play hit sound
+    // 播放击中音效
     hitSound.currentTime = 0;
     hitSound.play();
     
@@ -797,14 +840,17 @@ function handleHit(target, projectile) {
         target.element.classList.remove('hit-flash');
     }, 300);
     
-    // 其他原有代码保持不变...
-    // Show hit effect
-    target.hitEffect.classList.add('active');
-    setTimeout(() => {
-        target.hitEffect.classList.remove('active');
-    }, 500);
+    // 增强击退效果 - 计算从子弹到目标的方向
+    const dx = target.x - projectile.x;
+    const dy = target.y - projectile.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    
+    // 标准化方向向量并放大击退力度
+    const force = 15; // 增加击退力度
+    target.vx = (dx / distance) * force;
+    target.vy = (dy / distance) * force;
     
-    // ...其余原有代码
+    // ...其余击中处理代码保持不变...
 }
 
 // 修改handleCenterHit函数，添加全屏红色闪烁