Update game.js

game.js

@@ -1285,210 +1285,241 @@ class Game {
     }
 
     updateWarnings() {
-        // 기존 경고 메시지 제거
-        const existingWarnings = document.querySelectorAll('.warning-message');
-        existingWarnings.forEach(w => w.remove());
-        
-        // 스톨 탈출 경고 제거
-        const existingStallWarnings = document.querySelectorAll('.stall-escape-warning');
-        existingStallWarnings.forEach(w => w.remove());
-        
-        // 고도 경고 외곽 효과
-        let altitudeEdgeEffect = document.getElementById('altitudeEdgeEffect');
-        if (this.fighter.altitude < 500) {
-            if (!altitudeEdgeEffect) {
-                altitudeEdgeEffect = document.createElement('div');
-                altitudeEdgeEffect.id = 'altitudeEdgeEffect';
-                document.body.appendChild(altitudeEdgeEffect);
-            }
-            
-            let edgeIntensity;
-            if (this.fighter.altitude < 250) {
-                // PULL UP 경고 - 강한 붉은 효과
-                edgeIntensity = 0.6;
-                altitudeEdgeEffect.style.cssText = `
-                    position: fixed;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    pointer-events: none;
-                    z-index: 1300;
-                    background: radial-gradient(ellipse at center, 
-                        transparent 40%, 
-                        rgba(255, 0, 0, ${edgeIntensity * 0.3}) 60%, 
-                        rgba(255, 0, 0, ${edgeIntensity}) 100%);
-                    box-shadow: inset 0 0 150px rgba(255, 0, 0, ${edgeIntensity}),
-                               inset 0 0 100px rgba(255, 0, 0, ${edgeIntensity * 0.8});
-                    animation: pulse-red 0.5s infinite;
-                `;
-            } else {
-                // LOW ALTITUDE 경고 - 약한 붉은 효과
-                edgeIntensity = 0.3;
-                altitudeEdgeEffect.style.cssText = `
-                    position: fixed;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    pointer-events: none;
-                    z-index: 1300;
-                    background: radial-gradient(ellipse at center, 
-                        transparent 50%, 
-                        rgba(255, 0, 0, ${edgeIntensity * 0.2}) 70%, 
-                        rgba(255, 0, 0, ${edgeIntensity}) 100%);
-                    box-shadow: inset 0 0 100px rgba(255, 0, 0, ${edgeIntensity}),
-                               inset 0 0 50px rgba(255, 0, 0, ${edgeIntensity * 0.5});
-                `;
-            }
+    // 기존 경고 메시지 제거
+    const existingWarnings = document.querySelectorAll('.warning-message');
+    existingWarnings.forEach(w => w.remove());
+    
+    // 스톨 탈출 경고 제거
+    const existingStallWarnings = document.querySelectorAll('.stall-escape-warning');
+    existingStallWarnings.forEach(w => w.remove());
+    
+    // 고도 경고 외곽 효과
+    let altitudeEdgeEffect = document.getElementById('altitudeEdgeEffect');
+    if (this.fighter.altitude < 500) {
+        if (!altitudeEdgeEffect) {
+            altitudeEdgeEffect = document.createElement('div');
+            altitudeEdgeEffect.id = 'altitudeEdgeEffect';
+            document.body.appendChild(altitudeEdgeEffect);
+        }
+        
+        let edgeIntensity;
+        if (this.fighter.altitude < 250) {
+            // PULL UP 경고 - 강한 붉은 효과
+            edgeIntensity = 0.6;
+            altitudeEdgeEffect.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                pointer-events: none;
+                z-index: 1300;
+                background: radial-gradient(ellipse at center, 
+                    transparent 40%, 
+                    rgba(255, 0, 0, ${edgeIntensity * 0.3}) 60%, 
+                    rgba(255, 0, 0, ${edgeIntensity}) 100%);
+                box-shadow: inset 0 0 150px rgba(255, 0, 0, ${edgeIntensity}),
+                           inset 0 0 100px rgba(255, 0, 0, ${edgeIntensity * 0.8});
+                animation: pulse-red 0.5s infinite;
+            `;
         } else {
-            // 고도가 안전하면 효과 제거
-            if (altitudeEdgeEffect) {
-                altitudeEdgeEffect.remove();
-            }
-        }
-        
-        if (this.fighter.warningBlinkState) {
-            const warningContainer = document.createElement('div');
-            warningContainer.className = 'warning-message';
-            warningContainer.style.cssText = `
+            // LOW ALTITUDE 경고 - 약한 붉은 효과
+            edgeIntensity = 0.3;
+            altitudeEdgeEffect.style.cssText = `
                 position: fixed;
-                top: 30%;
-                left: 50%;
-                transform: translateX(-50%);
-                color: #ff0000;
-                font-size: 24px;
-                font-weight: bold;
-                text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
-                z-index: 1500;
-                text-align: center;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                pointer-events: none;
+                z-index: 1300;
+                background: radial-gradient(ellipse at center, 
+                    transparent 50%, 
+                    rgba(255, 0, 0, ${edgeIntensity * 0.2}) 70%, 
+                    rgba(255, 0, 0, ${edgeIntensity}) 100%);
+                box-shadow: inset 0 0 100px rgba(255, 0, 0, ${edgeIntensity}),
+                           inset 0 0 50px rgba(255, 0, 0, ${edgeIntensity * 0.5});
             `;
-            
-            let warningText = '';
-            
-            if (this.fighter.altitude < 250) {
-                warningText += 'PULL UP! PULL UP!\n';
-            } else if (this.fighter.altitude < 500) {
-                warningText += 'LOW ALTITUDE WARNING\n';
-            }
-            
-            if (this.fighter.altitudeWarning) {
-                warningText += 'ALTITUDE LIMIT\n';
-            }
-            
-            if (this.fighter.stallWarning) {
-                warningText += 'STALL WARNING\n';
-            }
-            
-            if (this.fighter.overG) {
-                warningText += 'OVER-G! OVER-G!\n';
-            }
-            
-            if (warningText) {
-                warningContainer.innerHTML = warningText.replace(/\n/g, '<br>');
-                document.body.appendChild(warningContainer);
-            }
+        }
+    } else {
+        // 고도가 안전하면 효과 제거
+        if (altitudeEdgeEffect) {
+            altitudeEdgeEffect.remove();
+        }
+    }
+    
+    if (this.fighter.warningBlinkState) {
+        const warningContainer = document.createElement('div');
+        warningContainer.className = 'warning-message';
+        warningContainer.style.cssText = `
+            position: fixed;
+            top: 30%;
+            left: 50%;
+            transform: translateX(-50%);
+            color: #ff0000;
+            font-size: 24px;
+            font-weight: bold;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
+            z-index: 1500;
+            text-align: center;
+        `;
+        
+        let warningText = '';
+        
+        if (this.fighter.altitude < 250) {
+            warningText += 'PULL UP! PULL UP!\n';
+        } else if (this.fighter.altitude < 500) {
+            warningText += 'LOW ALTITUDE WARNING\n';
+        }
+        
+        if (this.fighter.altitudeWarning) {
+            warningText += 'ALTITUDE LIMIT\n';
         }
         
-        // 스톨 상태일 때만 "Press F to Escape" 경고 표시
         if (this.fighter.stallWarning) {
-            const stallEscapeWarning = document.createElement('div');
-            stallEscapeWarning.className = 'stall-escape-warning';
-            stallEscapeWarning.style.cssText = `
-                position: fixed;
-                bottom: 100px;
-                left: 50%;
-                transform: translateX(-50%);
-                background: rgba(255, 0, 0, 0.8);
-                color: #ffffff;
-                font-size: 28px;
-                font-weight: bold;
-                padding: 15px 30px;
-                border: 3px solid #ff0000;
-                border-radius: 10px;
-                z-index: 1600;
-                text-align: center;
-                animation: blink 0.5s infinite;
-            `;
-            stallEscapeWarning.innerHTML = 'PRESS F TO ESCAPE';
-            document.body.appendChild(stallEscapeWarning);
-            
-            // 애니메이션 스타일 추가
-            if (!document.getElementById('blinkAnimation')) {
-                const style = document.createElement('style');
-                style.id = 'blinkAnimation';
-                style.innerHTML = `
-                    @keyframes blink {
-                        0%, 50% { opacity: 1; }
-                        51%, 100% { opacity: 0.3; }
+            warningText += 'STALL WARNING\n';
+        }
+        
+        if (this.fighter.overG) {
+            warningText += 'OVER-G! OVER-G!\n';
+        }
+        
+        if (warningText) {
+            warningContainer.innerHTML = warningText.replace(/\n/g, '<br>');
+            document.body.appendChild(warningContainer);
+        }
+    }
+    
+    // 스톨 상태일 때만 "Press F to Escape" 경고 표시
+    if (this.fighter.stallWarning) {
+        const stallEscapeWarning = document.createElement('div');
+        stallEscapeWarning.className = 'stall-escape-warning';
+        stallEscapeWarning.style.cssText = `
+            position: fixed;
+            bottom: 100px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(255, 0, 0, 0.8);
+            color: #ffffff;
+            font-size: 28px;
+            font-weight: bold;
+            padding: 15px 30px;
+            border: 3px solid #ff0000;
+            border-radius: 10px;
+            z-index: 1600;
+            text-align: center;
+            animation: blink 0.5s infinite;
+        `;
+        stallEscapeWarning.innerHTML = 'PRESS F TO ESCAPE';
+        document.body.appendChild(stallEscapeWarning);
+        
+        // 애니메이션 스타일 추가
+        if (!document.getElementById('blinkAnimation')) {
+            const style = document.createElement('style');
+            style.id = 'blinkAnimation';
+            style.innerHTML = `
+                @keyframes blink {
+                    0%, 50% { opacity: 1; }
+                    51%, 100% { opacity: 0.3; }
+                }
+                @keyframes pulse-green {
+                    0%, 100% { 
+                        opacity: 1;
+                        transform: translateX(-50%) scale(1);
                     }
-                    @keyframes pulse-green {
-                        0%, 100% { 
-                            opacity: 1;
-                            transform: translateX(-50%) scale(1);
-                        }
-                        50% { 
-                            opacity: 0.8;
-                            transform: translateX(-50%) scale(1.1);
-                        }
+                    50% { 
+                        opacity: 0.8;
+                        transform: translateX(-50%) scale(1.1);
                     }
-                    @keyframes box-pulse {
-                        0%, 100% { 
-                            background: rgba(255, 0, 0, 0.9);
-                            box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 
-                                       0 0 40px rgba(255, 0, 0, 0.4);
-                        }
-                        50% { 
-                            background: rgba(255, 50, 50, 1);
-                            box-shadow: 0 0 30px rgba(255, 100, 100, 1), 
-                                       0 0 60px rgba(255, 0, 0, 0.8);
-                        }
+                }
+                @keyframes box-pulse {
+                    0%, 100% { 
+                        background: rgba(255, 0, 0, 0.9);
+                        box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 
+                                   0 0 40px rgba(255, 0, 0, 0.4);
                     }
-                    @keyframes pulse-red {
-                        0%, 100% { 
-                            opacity: 1;
-                        }
-                        50% { 
-                            opacity: 0.7;
-                        }
+                    50% { 
+                        background: rgba(255, 50, 50, 1);
+                        box-shadow: 0 0 30px rgba(255, 100, 100, 1), 
+                                   0 0 60px rgba(255, 0, 0, 0.8);
                     }
-                `;
-                document.head.appendChild(style);
-            }
+                }
+                @keyframes pulse-red {
+                    0%, 100% { 
+                        opacity: 1;
+                    }
+                    50% { 
+                        opacity: 0.7;
+                    }
+                }
+            `;
+            document.head.appendChild(style);
         }
+    }
+    
+    // Over-G 시야 효과 - 수정된 부분
+    if (this.fighter.overG && this.fighter.overGTimer > 0) {
+        let blurEffect = document.getElementById('overGBlurEffect');
+        if (!blurEffect) {
+            blurEffect = document.createElement('div');
+            blurEffect.id = 'overGBlurEffect';
+            document.body.appendChild(blurEffect);
+        }
+        
+        // Over-G 지속 시간에 따라 점진적으로 어두워짐
+        // 0초: 효과 없음
+        // 1초: 거의 완전히 어두워짐
+        const darknessFactor = Math.min(this.fighter.overGTimer, 1.0); // 0~1 범위로 제한
+        
+        // 시야 가장자리부터 어두워지는 효과
+        // 중앙은 상대적으로 늦게 어두워짐
+        const centerTransparency = Math.max(0, 1 - darknessFactor * 1.2); // 중앙 투명도
+        const midTransparency = Math.max(0, 1 - darknessFactor * 0.8); // 중간 투명도
+        const edgeOpacity = Math.min(0.95, darknessFactor * 0.95); // 가장자리 불투명도
+        
+        // 붉은 색조 추가 (혈액 순환 문제를 시각화)
+        const redTint = Math.min(darknessFactor * 0.3, 0.3);
+        
+        blurEffect.style.cssText = `
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(ellipse at center, 
+                rgba(${Math.floor(255 * redTint)}, 0, 0, ${1 - centerTransparency}) 0%, 
+                rgba(${Math.floor(200 * redTint)}, 0, 0, ${1 - midTransparency}) 40%, 
+                rgba(0, 0, 0, ${edgeOpacity}) 70%, 
+                rgba(0, 0, 0, ${Math.min(0.98, edgeOpacity + 0.05)}) 100%);
+            pointer-events: none;
+            z-index: 1400;
+            transition: background 0.1s ease-out;
+        `;
         
-        // Over-G 3초 이상일 때 시야 흐림 효과
-        if (this.fighter.overG && this.fighter.overGTimer > 3.0) {
-            let blurEffect = document.getElementById('overGBlurEffect');
-            if (!blurEffect) {
-                blurEffect = document.createElement('div');
-                blurEffect.id = 'overGBlurEffect';
-                document.body.appendChild(blurEffect);
-            }
-            
-            // Over-G 지속 시간에 따라 흐림 정도 증가
-            const blurIntensity = Math.min((this.fighter.overGTimer - 3.0) * 0.3, 0.8);
-            blurEffect.style.cssText = `
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                background: radial-gradient(ellipse at center, 
-                    transparent 20%, 
-                    rgba(0, 0, 0, ${blurIntensity}) 50%, 
-                    rgba(0, 0, 0, ${blurIntensity + 0.2}) 100%);
-                pointer-events: none;
-                z-index: 1400;
-            `;
-        } else {
-            // Over-G 상태가 아니면 효과 제거
-            const blurEffect = document.getElementById('overGBlurEffect');
-            if (blurEffect) {
-                blurEffect.remove();
-            }
+        // 심한 Over-G 상태에서 화면 흔들림 효과
+        if (darknessFactor > 0.7) {
+            const shake = (1 - Math.random() * 2) * 2;
+            blurEffect.style.transform = `translate(${shake}px, ${shake}px)`;
+        }
+        
+        // 디버그 정보 (선택사항)
+        // console.log(`Over-G Timer: ${this.fighter.overGTimer.toFixed(2)}s, Darkness: ${(darknessFactor * 100).toFixed(0)}%`);
+        
+    } else {
+        // Over-G 상태가 아니면 효과 제거
+        const blurEffect = document.getElementById('overGBlurEffect');
+        if (blurEffect) {
+            // 부드러운 제거를 위한 페이드아웃
+            blurEffect.style.transition = 'opacity 0.5s ease-out';
+            blurEffect.style.opacity = '0';
+            setTimeout(() => {
+                if (blurEffect.parentNode) {
+                    blurEffect.remove();
+                }
+            }, 500);
         }
     }
+}
 
     updateRadar() {
         const radar = document.getElementById('radar');