Update game.js

game.js

@@ -1084,6 +1084,89 @@ class Game {
             }
             
             this.updateWarnings();
+            this.updateHUD();
+        }
+    }
+    
+    updateHUD() {
+        // HUD 크로스헤어 업데이트
+        const hudElement = document.getElementById('hudCrosshair');
+        if (!hudElement) return;
+        
+        // 롤 각도에 따라 HUD 회전
+        const rollDegrees = this.fighter.rotation.z * (180 / Math.PI);
+        hudElement.style.transform = `translate(-50%, -50%) rotate(${-rollDegrees}deg)`;
+        
+        // 피치 표시기 업데이트
+        const pitchIndicator = document.getElementById('pitchIndicator');
+        if (pitchIndicator) {
+            const pitchDegrees = this.fighter.rotation.x * (180 / Math.PI);
+            const pitchOffset = pitchDegrees * 2; // 피치에 따른 수직 오프셋
+            pitchIndicator.style.transform = `translateY(${pitchOffset}px)`;
+        }
+        
+        // 적 타겟 마커 업데이트
+        const targetMarkers = document.getElementById('targetMarkers');
+        if (targetMarkers) {
+            // 기존 마커 제거
+            targetMarkers.innerHTML = '';
+            
+            // 가장 가까운 적 찾기
+            let closestEnemy = null;
+            let closestDistance = Infinity;
+            
+            this.enemies.forEach(enemy => {
+                if (!enemy.mesh || !enemy.isLoaded) return;
+                
+                const distance = this.fighter.position.distanceTo(enemy.position);
+                if (distance < closestDistance) {
+                    closestDistance = distance;
+                    closestEnemy = enemy;
+                }
+            });
+            
+            // 가장 가까운 적에 대한 타겟 마커 표시
+            if (closestEnemy && closestDistance < 5000) {
+                // 적의 상대 위치 계산
+                const relativePos = closestEnemy.position.clone().sub(this.fighter.position);
+                
+                // 전투기의 회전을 고려한 상대 위치
+                const inverseRotation = new THREE.Euler(
+                    -this.fighter.rotation.x,
+                    -this.fighter.rotation.y,
+                    -this.fighter.rotation.z
+                );
+                relativePos.applyEuler(inverseRotation);
+                
+                // 화면 좌표로 변환
+                const screenX = (relativePos.x / closestDistance) * 200;
+                const screenY = -(relativePos.y / closestDistance) * 200;
+                
+                // 타겟 마커 생성
+                const marker = document.createElement('div');
+                marker.className = 'target-marker';
+                marker.style.left = `${50 + screenX}%`;
+                marker.style.top = `${50 + screenY}%`;
+                
+                // 거리가 가까울수록 빨간색
+                const colorIntensity = Math.max(0, 1 - closestDistance / 5000);
+                marker.style.borderColor = `rgba(255, ${255 * (1 - colorIntensity)}, 0, ${0.5 + colorIntensity * 0.5})`;
+                
+                // 락온 상태
+                if (closestDistance < 2000) {
+                    marker.classList.add('locked');
+                }
+                
+                targetMarkers.appendChild(marker);
+                
+                // 거리 표시
+                const distanceLabel = document.createElement('div');
+                distanceLabel.className = 'target-distance';
+                distanceLabel.textContent = `${Math.round(closestDistance)}m`;
+                distanceLabel.style.left = `${50 + screenX}%`;
+                distanceLabel.style.top = `${50 + screenY + 5}%`;
+                targetMarkers.appendChild(distanceLabel);
+            }
         }
     }