Update index.html

index.html

@@ -371,333 +371,637 @@
         <source src="https://assets.mixkit.co/music/preview/mixkit-game-show-suspense-waiting-668.mp3" type="audio/mpeg">
     </audio>
     
-    <script>
+   <script>
         document.addEventListener('DOMContentLoaded', () => {
-            // 更新游戏状态对象
-const state = {
-    score: 0,
-    hits: 0,
-    health: 10,
-    targets: [],
-    projectiles: [],
-    stars: [],
-    currentWeapon: 'basic',
-    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: 250, projectileCount: 2, spread: 10, bouncy: false },
-        shotgun: { price: 300, fireRate: 500, projectileCount: 5, spread: 20, bouncy: false },
-        bouncy: { 
-            price: 500, 
-            fireRate: 250,
-            projectileCount: 8,
-            spread: 360,
-            bouncy: true
-        }
-    },
-    lastShot: 0,
-    colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'],
-    currentColorIndex: 0,
-    targetSpeed: 2,
-    targetCount: 1,
-    gameOver: false,
-    centerRadius: 300,
-    targetSpawnBuffer: 100
-};
-
-// 初始化游戏
-function initGame() {
-    initHealthBar();
-    createTargets(state.targetCount);
-    setupCursor();
-    gameLoop();
-}
-
-// 游戏主循环
-function gameLoop() {
-    if (!state.gameOver) {
-        updateTargets();
-        updateProjectiles();
-        checkCollisions();
-        checkCenterCollision();
-        requestAnimationFrame(gameLoop);
-    }
-}
-
-// 创建目标
-function createTargets(count) {
-    const targetsContainer = document.getElementById('targets-container');
-    targetsContainer.innerHTML = '';
-    state.targets = [];
-    
-    for (let i = 0; i < count; i++) {
-        createTarget(i);
-    }
-}
-
-function createTarget(index) {
-    const target = document.createElement('div');
-    target.className = 'target new-target-flash';
-    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);
-    
-    target.style.left = `${x}px`;
-    target.style.top = `${y}px`;
-    
-    // 移除闪烁动画
-    setTimeout(() => {
-        target.classList.remove('new-target-flash');
-    }, 500);
-    
-    document.getElementById('targets-container').appendChild(target);
-    
-    state.targets.push({
-        element: target,
-        x: x,
-        y: y,
-        vx: (Math.random() - 0.5) * state.targetSpeed,
-        vy: (Math.random() - 0.5) * state.targetSpeed,
-        index: index
-    });
-}
-
-// 更新目标位置
-function updateTargets() {
-    state.targets.forEach(target => {
-        target.x += target.vx;
-        target.y += target.vy;
-        
-        // 边界反弹
-        if (target.x <= 0 || target.x >= window.innerWidth - 250) {
-            target.vx = -target.vx;
-        }
-        
-        if (target.y <= 0 || target.y >= window.innerHeight - 250) {
-            target.vy = -target.vy;
-        }
-        
-        target.element.style.left = `${target.x}px`;
-        target.element.style.top = `${target.y}px`;
-    });
-}
-
-// 射击处理
-function handleShoot(e) {
-    if (state.gameOver) return;
-    
-    const now = Date.now();
-    const weapon = state.weapons[state.currentWeapon];
-    
-    if (now - state.lastShot < weapon.fireRate) return;
-    
-    state.lastShot = now;
-    
-    for (let i = 0; i < weapon.projectileCount; i++) {
-        createProjectile(e.clientX, e.clientY, i);
-    }
-}
-
-// 创建子弹
-function createProjectile(mouseX, mouseY, index) {
-    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`;
-    
-    document.getElementById('projectiles-container').appendChild(projectile);
-    
-    state.projectiles.push({
-        element: projectile,
-        x: centerX,
-        y: centerY,
-        vx: dx * 15,
-        vy: dy * 15,
-        bounces: 0,
-        maxBounces: weapon.bouncy ? 3 : 0
-    });
-}
-
-// 更新子弹位置
-function updateProjectiles() {
-    state.projectiles.forEach((projectile, index) => {
-        projectile.x += projectile.vx;
-        projectile.y += projectile.vy;
-        
-        projectile.element.style.left = `${projectile.x}px`;
-        projectile.element.style.top = `${projectile.y}px`;
-        
-        // 边界反弹
-        if (projectile.bounces < projectile.maxBounces) {
-            if (projectile.x <= 0 || projectile.x >= window.innerWidth) {
-                projectile.vx = -projectile.vx;
-                projectile.bounces++;
+            // Game state
+            const state = {
+                score: 0,
+                hits: 0,
+                health: 10,
+                targets: [],
+                projectiles: [],
+                stars: [],
+                currentWeapon: 'basic',
+                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: 100, projectileCount: 18, spread: 360, bouncy: true }
+                },
+                lastShot: 0,
+                colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'],
+                currentColorIndex: 0,
+                targetSpeed: 2,
+                targetCount: 1,
+                gameOver: false,
+                knockbackDistance: 30 // Added knockback distance
+            };
+            
+            // DOM elements
+            const gameContainer = document.getElementById('game-container');
+            const starfield = document.getElementById('starfield');
+            const targetsContainer = document.getElementById('targets-container');
+            const projectilesContainer = document.getElementById('projectiles-container');
+            const hitMarkersContainer = document.getElementById('hit-markers-container');
+            const scoreDisplay = document.getElementById('score-display');
+            const hitCountElement = document.getElementById('hit-count');
+            const scoreElement = document.getElementById('score');
+            const customCursor = document.getElementById('custom-cursor');
+            const hitSound = document.getElementById('hit-sound');
+            const shootSound = document.getElementById('shoot-sound');
+            const bgMusic = document.getElementById('bg-music');
+            const weaponElements = document.querySelectorAll('.weapon');
+            const healthBar = document.getElementById('health-bar');
+            const gameOverScreen = document.getElementById('game-over');
+            const gameOverText = document.getElementById('game-over-text');
+            const retryButton = document.getElementById('retry-button');
+            
+            // Initialize game
+            initHealthBar();
+            initStarfield();
+            createTargets(state.targetCount);
+            setupCursor();
+            setupWeapons();
+            playMusic();
+            
+            // Event listeners
+            gameContainer.addEventListener('mousemove', handleMouseMove);
+            gameContainer.addEventListener('click', handleShoot);
+            retryButton.addEventListener('click', resetGame);
+            
+            // Game loop
+            function gameLoop() {
+                if (!state.gameOver) {
+                    updateTargets();
+                    updateProjectiles();
+                    checkCollisions();
+                    checkCenterCollision();
+                    requestAnimationFrame(gameLoop);
+                }
             }
             
-            if (projectile.y <= 0 || projectile.y >= window.innerHeight) {
-                projectile.vy = -projectile.vy;
-                projectile.bounces++;
+            gameLoop();
+            
+            // Initialize health bar
+            function initHealthBar() {
+                healthBar.innerHTML = '';
+                for (let i = 0; i < 10; i++) {
+                    const healthPoint = document.createElement('div');
+                    healthPoint.className = 'health-point';
+                    healthBar.appendChild(healthPoint);
+                }
             }
-        }
-        
-        // 移除超出边界的子弹
-        if (projectile.x < -50 || projectile.x > window.innerWidth + 50 ||
-            projectile.y < -50 || projectile.y > window.innerHeight + 50) {
-            projectile.element.remove();
-            state.projectiles.splice(index, 1);
-        }
-    });
-}
-
-// 碰撞检测
-function checkCollisions() {
-    state.projectiles.forEach((projectile, pIndex) => {
-        state.targets.forEach((target, tIndex) => {
-            if (isColliding(projectile, target)) {
-                handleHit(target, projectile);
-                projectile.element.remove();
-                state.projectiles.splice(pIndex, 1);
+            
+            // Update health display
+            function updateHealth() {
+                const healthPoints = document.querySelectorAll('.health-point');
+                healthPoints.forEach((point, index) => {
+                    if (index < state.health) {
+                        point.classList.remove('lost');
+                    } else {
+                        point.classList.add('lost');
+                    }
+                });
             }
-        });
-    });
-}
-
-// 击中处理
-function handleHit(target, projectile) {
-    // 添加击中闪烁效果
-    target.element.classList.add('hit-flash');
-    setTimeout(() => {
-        target.element.classList.remove('hit-flash');
-    }, 300);
-    
-    // 增强击退效果
-    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;
-    
-    state.score += 100;
-    state.hits++;
-    updateScore();
-}
-
-// 中心区域碰撞检测
-function checkCenterCollision() {
-    const centerX = window.innerWidth / 2;
-    const centerY = window.innerHeight / 2;
-    const centerRadius = 50;
-    
-    state.targets.forEach(target => {
-        const targetCenterX = target.x + 125;
-        const targetCenterY = target.y + 125;
-        
-        const dx = targetCenterX - centerX;
-        const dy = targetCenterY - centerY;
-        const distance = Math.sqrt(dx * dx + dy * dy);
-        
-        if (distance < centerRadius) {
-            handleCenterHit();
-        }
-    });
-}
-
-function handleCenterHit() {
-    if (state.health > 0) {
-        state.health--;
-        updateHealth();
-        
-        // 全屏红色闪烁
-        const screenFlash = document.createElement('div');
-        screenFlash.className = 'screen-flash active';
-        document.body.appendChild(screenFlash);
-        
-        setTimeout(() => {
-            screenFlash.remove();
-        }, 500);
-        
-        // 将所有目标弹出到画面边缘
-        state.targets.forEach(target => {
-            const centerX = window.innerWidth / 2;
-            const centerY = window.innerHeight / 2;
-            const targetCenterX = target.x + 125;
-            const targetCenterY = target.y + 125;
             
-            let dx = targetCenterX - centerX;
-            let dy = targetCenterY - centerY;
+            // Initialize starfield
+            function initStarfield() {
+                const starCount = Math.floor(window.innerWidth * window.innerHeight / 1000);
+                
+                for (let i = 0; i < starCount; i++) {
+                    createStar();
+                }
+            }
             
-            const distance = Math.sqrt(dx * dx + dy * dy);
-            dx /= distance;
-            dy /= distance;
+            function createStar() {
+                const star = document.createElement('div');
+                star.className = 'star';
+                
+                const x = Math.random() * window.innerWidth;
+                const y = Math.random() * window.innerHeight;
+                const size = Math.random() * 3;
+                const opacity = Math.random();
+                
+                star.style.left = `${x}px`;
+                star.style.top = `${y}px`;
+                star.style.width = `${size}px`;
+                star.style.height = `${size}px`;
+                star.style.opacity = opacity;
+                
+                starfield.appendChild(star);
+                
+                // Animate star (parallax effect)
+                const speed = 0.5 + Math.random() * 2;
+                
+                function animateStar() {
+                    const currentX = parseFloat(star.style.left);
+                    const currentY = parseFloat(star.style.top);
+                    
+                    // Move star outward from center
+                    const centerX = window.innerWidth / 2;
+                    const centerY = window.innerHeight / 2;
+                    
+                    let dx = currentX - centerX;
+                    let dy = currentY - centerY;
+                    
+                    // Normalize direction vector
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    dx /= distance;
+                    dy /= distance;
+                    
+                    // Move star
+                    star.style.left = `${currentX + dx * speed}px`;
+                    star.style.top = `${currentY + dy * speed}px`;
+                    
+                    // Reset star if it goes out of bounds
+                    if (parseFloat(star.style.left) < 0 || parseFloat(star.style.left) > window.innerWidth ||
+                        parseFloat(star.style.top) < 0 || parseFloat(star.style.top) > window.innerHeight) {
+                        star.style.left = `${Math.random() * window.innerWidth}px`;
+                        star.style.top = `${Math.random() * window.innerHeight}px`;
+                    }
+                    
+                    requestAnimationFrame(animateStar);
+                }
+                
+                animateStar();
+            }
             
-            target.vx = dx * 20;
-            target.vy = dy * 20;
+            // Create targets
+            function createTargets(count) {
+                // Flash screen when adding new targets
+                const screenFlash = document.createElement('div');
+                screenFlash.className = 'screen-flash';
+                screenFlash.style.backgroundColor = state.colors[state.currentColorIndex];
+                document.body.appendChild(screenFlash);
+                
+                setTimeout(() => {
+                    screenFlash.remove();
+                }, 300);
+                
+                targetsContainer.innerHTML = '';
+                state.targets = [];
+                
+                for (let i = 0; i < count; i++) {
+                    createTarget(i);
+                }
+            }
             
-            target.element.classList.add('hit-flash');
-            setTimeout(() => {
-                target.element.classList.remove('hit-flash');
-            }, 300);
-        });
-        
-        if (state.health <= 0) {
-            setTimeout(() => {
-                gameOver();
-            }, 500);
-        }
-    }
-}
+            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 and not near center
+                const maxX = window.innerWidth - 250;
+                const maxY = window.innerHeight - 250;
+                const centerX = window.innerWidth / 2;
+                const centerY = window.innerHeight / 2;
+                const minDistanceFromCenter = 300; // Minimum distance from center
+                
+                let x, y;
+                let attempts = 0;
+                const maxAttempts = 100;
+                
+                do {
+                    x = Math.max(0, Math.min(maxX, Math.random() * maxX));
+                    y = Math.max(0, Math.min(maxY, Math.random() * maxY));
+                    attempts++;
+                    
+                    // Check distance from center
+                    const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
+                    
+                    // If we've tried too many times, just place it anywhere
+                    if (attempts >= maxAttempts) break;
+                    
+                } while (Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2)) < minDistanceFromCenter);
+                
+                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
+                });
+            }
+            
+            // Update targets position
+            function updateTargets() {
+                state.targets.forEach(target => {
+                    // Update position
+                    target.x += target.vx;
+                    target.y += target.vy;
+                    
+                    // Bounce off edges
+                    if (target.x <= 0 || target.x >= window.innerWidth - 250) {
+                        target.vx = -target.vx * (0.9 + Math.random() * 0.2);
+                    }
+                    
+                    if (target.y <= 0 || target.y >= window.innerHeight - 250) {
+                        target.vy = -target.vy * (0.9 + Math.random() * 0.2);
+                    }
+                    
+                    // Random direction changes
+                    if (Math.random() < 0.02) {
+                        target.vx += (Math.random() - 0.5) * 0.5;
+                        target.vy += (Math.random() - 0.5) * 0.5;
+                        
+                        // Limit speed
+                        const speed = Math.sqrt(target.vx * target.vx + target.vy * target.vy);
+                        const maxSpeed = state.targetSpeed * 1.5;
+                        
+                        if (speed > maxSpeed) {
+                            target.vx = (target.vx / speed) * maxSpeed;
+                            target.vy = (target.vy / speed) * maxSpeed;
+                        }
+                    }
+                    
+                    // Apply position
+                    target.element.style.left = `${target.x}px`;
+                    target.element.style.top = `${target.y}px`;
+                });
+            }
+            
+            // Setup custom cursor
+            function setupCursor() {
+                customCursor.style.backgroundImage = 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 100 100\'><path d=\'M50 10 L50 90 M10 50 L90 50\' stroke=\'' + state.colors[state.currentColorIndex] + '\' stroke-width=\'5\' stroke-linecap=\'round\'/></svg>")';
+                customCursor.style.display = 'block';
+            }
+            
+            function handleMouseMove(e) {
+                customCursor.style.left = `${e.clientX - 20}px`;
+                customCursor.style.top = `${e.clientY - 20}px`;
+                
+                // Rotate cursor slightly for visual feedback
+                const rotation = Math.sin(Date.now() / 200) * 5;
+                customCursor.style.transform = `rotate(${rotation}deg)`;
+            }
+            
+            // Handle shooting
+            function handleShoot(e) {
+                if (state.gameOver) return;
+                
+                const now = Date.now();
+                const weapon = state.weapons[state.currentWeapon];
+                
+                if (now - state.lastShot < weapon.fireRate) return;
+                
+                state.lastShot = now;
+                
+                // Play shoot sound
+                shootSound.currentTime = 0;
+                shootSound.play();
+                
+                // Create projectiles based on weapon type
+                if (state.currentWeapon === 'bouncy') {
+                    // Special handling for bouncy weapon - 360 degree spread
+                    for (let i = 0; i < weapon.projectileCount; i++) {
+                        const angle = (i / weapon.projectileCount) * Math.PI * 2;
+                        createBouncyProjectile(angle);
+                    }
+                } else {
+                    // Normal weapons
+                    for (let i = 0; i < weapon.projectileCount; i++) {
+                        createProjectile(e.clientX, e.clientY, i);
+                    }
+                }
+                
+                // Animate cursor
+                customCursor.style.transform = 'scale(0.8)';
+                setTimeout(() => {
+                    customCursor.style.transform = 'scale(1)';
+                }, 100);
+            }
+            
+            function createBouncyProjectile(angle) {
+                const projectile = document.createElement('div');
+                projectile.className = 'projectile';
+                
+                const centerX = window.innerWidth / 2;
+                const centerY = window.innerHeight / 2;
+                
+                // 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);
+                
+                // Calculate direction based on angle
+                const dx = Math.cos(angle);
+                const dy = Math.sin(angle);
+                
+                // Store projectile data with higher speed for bouncy weapon
+                const projectileData = {
+                    element: projectile,
+                    x: centerX,
+                    y: centerY,
+                    vx: dx * 15, // Faster speed for bouncy weapon
+                    vy: dy * 15, // Faster speed for bouncy weapon
+                    bounces: 0,
+                    maxBounces: 3
+                };
+                
+                state.projectiles.push(projectileData);
+            }
+            
+            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);
+            }
+            
+            // Update projectiles position
+            function updateProjectiles() {
+                state.projectiles.forEach((projectile, index) => {
+                    // Update position
+                    projectile.x += projectile.vx;
+                    projectile.y += projectile.vy;
+                    
+                    // Bounce off edges if bouncy
+                    if (projectile.maxBounces > 0) {
+                        if (projectile.x <= 0 || projectile.x >= window.innerWidth) {
+                            projectile.vx = -projectile.vx;
+                            projectile.bounces++;
+                            projectile.x = Math.max(0, Math.min(window.innerWidth, projectile.x));
+                        }
+                        
+                        if (projectile.y <= 0 || projectile.y >= window.innerHeight) {
+                            projectile.vy = -projectile.vy;
+                            projectile.bounces++;
+                            projectile.y = Math.max(0, Math.min(window.innerHeight, projectile.y));
+                        }
+                    }
+                    
+                    // Apply position
+                    projectile.element.style.left = `${projectile.x}px`;
+                    projectile.element.style.top = `${projectile.y}px`;
+                    
+                    // Remove if out of bounds or max bounces reached
+                    if (projectile.x < 0 || projectile.x > window.innerWidth || 
+                        projectile.y < 0 || projectile.y > window.innerHeight ||
+                        projectile.bounces > projectile.maxBounces) {
+                        projectile.element.remove();
+                        state.projectiles.splice(index, 1);
+                    }
+                });
+            }
+            
+            // Check for collisions with targets
+            function checkCollisions() {
+                state.projectiles.forEach((projectile, pIndex) => {
+                    state.targets.forEach(target => {
+                        // Simple circle-rectangle collision detection
+                        const targetRect = {
+                            x: target.x,
+                            y: target.y,
+                            width: 250,
+                            height: 250
+                        };
+                        
+                        // Find closest point on rectangle to circle
+                        const closestX = Math.max(targetRect.x, Math.min(projectile.x, targetRect.x + targetRect.width));
+                        const closestY = Math.max(targetRect.y, Math.min(projectile.y, targetRect.y + targetRect.height));
+                        
+                        // Calculate distance
+                        const distanceX = projectile.x - closestX;
+                        const distanceY = projectile.y - closestY;
+                        const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
+                        
+                        if (distance < 10) { // Projectile radius
+                            // Hit!
+                            handleHit(target, projectile);
+                            
+                            // Remove projectile
+                            projectile.element.remove();
+                            state.projectiles.splice(pIndex, 1);
+                        }
+                    });
+                });
+            }
+            
+            // 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();
+                    }
+                });
+            }
+            
+            // 修改handleCenterHit函数
+            function handleHit(target, projectile) {
+                // Play hit sound
+                hitSound.currentTime = 0;
+                hitSound.play();
+                
+                // 添加击中闪烁效果
+                target.element.classList.add('hit-flash');
+                setTimeout(() => {
+                    target.element.classList.remove('hit-flash');
+                }, 300);
+                
+                // Show hit effect
+                target.hitEffect.classList.add('active');
+                setTimeout(() => {
+                    target.hitEffect.classList.remove('active');
+                }, 500);
+                
+                // Create hit marker
+                const hitMarker = document.createElement('div');
+                hitMarker.className = 'hit-marker';
+                hitMarker.style.left = `${projectile.x - 15}px`;
+                hitMarker.style.top = `${projectile.y - 15}px`;
+                hitMarkersContainer.appendChild(hitMarker);
+                
+                setTimeout(() => {
+                    hitMarker.remove();
+                }, 1000);
+                
+                // Update score
+                state.hits++;
+                state.score += 10;
+                
+                hitCountElement.textContent = state.hits;
+                scoreElement.textContent = state.score;
+                
+                // Show "Ejection FACE!" text
+                const ejectionText = document.createElement('div');
+                ejectionText.className = 'ejection-text';
+                ejectionText.textContent = 'Ejection FACE!';
+                ejectionText.style.left = `${window.innerWidth / 2 - 150}px`;
+                ejectionText.style.top = `${window.innerHeight / 2 - 50}px`;
+                
+                gameContainer.appendChild(ejectionText);
+                setTimeout(() => {
+                    ejectionText.remove();
+                }, 1500);
+                
+                // Change target direction on hit with increased knockback
+                const knockbackDirectionX = (projectile.x - (target.x + 125)) / 125;
+                const knockbackDirectionY = (projectile.y - (target.y + 125)) / 125;
+                
+                // Apply knockback with increasing distance based on hits
+                const knockbackMultiplier = state.knockbackDistance + (state.hits * 0.5);
+                target.vx = knockbackDirectionX * knockbackMultiplier;
+                target.vy = knockbackDirectionY * knockbackMultiplier;
+                
+                // Increase difficulty every 10 hits
+                if (state.hits % 10 === 0) {
+                    state.targetSpeed += 0.2;
+                    
+                    // Make targets change direction more often
+                    state.targets.forEach(t => {
+                        t.vx *= 1.1;
+                        t.vy *= 1.1;
+                    });
+                }
+                
+                // Add new target every 10 hits
+                if (state.hits % 10 === 0) {
+                    state.targetCount++;
+                    state.currentColorIndex = (state.currentColorIndex + 1) % state.colors.length;
+                    setupCursor();
+                    createTargets(state.targetCount);
+                }
+                
+                // Unlock weapons if enough score
+                weaponElements.forEach(weapon => {
+                    const weaponType = weapon.dataset.weapon;
+                    const price = parseInt(weapon.dataset.price);
+                    
+                    if (state.score >= price) {
+                        weapon.classList.remove('locked');
+                    }
+                });
+            }
+            
+            // 修改handleCenterHit函数，添加全屏红色闪烁
+            function handleCenterHit() {
+                if (state.health > 0) {
+                    state.health--;
+                    updateHealth();
+                    
+                    // 全屏红色闪烁
+                    const screenFlash = document.getElementById('screen-flash');
+                    screenFlash.classList.add('active');
+                    setTimeout(() => {
+                        screenFlash.classList.remove('active');
+                    }, 500);
+                    
+                    // 将所有目标弹出到画面边缘
+                    state.targets.forEach(target => {
+                        // 计算从中心到目标的向量
+                        const centerX = window.innerWidth / 2;
+                        const centerY = window.innerHeight / 2;
+                        const targetCenterX = target.x + 125;
+                        const targetCenterY = target.y + 125;
+                        
+                        let dx = targetCenterX - centerX;
+                        let dy = targetCenterY - centerY;
+                        
+                        // 标准化向量并放大(弹出效果)
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        dx /= distance;
+                        dy /= distance;
+                        
+                        // 设置很大的速度向边缘移动
+                        target.vx = dx * 20;
+                        target.vy = dy * 20;
+                        
+                        // 添加闪烁效果
+                        target.element.classList.add('hit-flash');
+                        setTimeout(() => {
+                            target.element.classList.remove('hit-flash');
+                        }, 300);
+                    });
+                    
+                    if (state.health <= 0) {
+                        // 延迟游戏结束，让玩家看到所有目标被弹出的效果
+                        setTimeout(() => {
+                            gameOver();
+                        }, 500);
+                    }
+                }
+            }
             
             // Game over
             function gameOver() {
@@ -725,6 +1029,7 @@ function handleCenterHit() {
                 state.targetSpeed = 2;
                 state.targetCount = 1;
                 state.gameOver = false;
+                state.knockbackDistance = 30;
                 
                 // Reset UI
                 hitCountElement.textContent = '0';