Update game.js

game.js

@@ -1097,78 +1097,117 @@ class Game {
         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 pitchLadder = document.getElementById('pitchLadder');
+        if (pitchLadder) {
             const pitchDegrees = this.fighter.rotation.x * (180 / Math.PI);
-            const pitchOffset = pitchDegrees * 2; // 피치에 따른 수직 오프셋
-            pitchIndicator.style.transform = `translateY(${pitchOffset}px)`;
+            const pitchOffset = pitchDegrees * 3; // 피치에 따른 수직 오프셋
+            pitchLadder.style.transform = `translateY(${pitchOffset}px)`;
         }
         
+        // 비행 정보 업데이트
+        const speedKnots = Math.round(this.fighter.speed * 1.94384);
+        const altitudeMeters = Math.round(this.fighter.altitude);
+        const pitchDegrees = Math.round(this.fighter.rotation.x * (180 / Math.PI));
+        const rollDegreesRounded = Math.round(rollDegrees);
+        const headingDegrees = Math.round(((this.fighter.rotation.y * (180 / Math.PI)) + 360) % 360);
+        
+        // 선회율 계산 (도/초)
+        if (!this.lastHeading) this.lastHeading = headingDegrees;
+        let turnRate = (headingDegrees - this.lastHeading);
+        if (turnRate > 180) turnRate -= 360;
+        if (turnRate < -180) turnRate += 360;
+        this.lastHeading = headingDegrees;
+        const turnRateDegPerSec = Math.round(turnRate / (1/60)); // 60 FPS 기준
+        
+        // HUD 정보 업데이트
+        const hudSpeed = document.getElementById('hudSpeed');
+        const hudAltitude = document.getElementById('hudAltitude');
+        const hudHeading = document.getElementById('hudHeading');
+        const hudPitch = document.getElementById('hudPitch');
+        const hudRoll = document.getElementById('hudRoll');
+        const hudTurnRate = document.getElementById('hudTurnRate');
+        
+        if (hudSpeed) hudSpeed.textContent = `SPD: ${speedKnots} KT`;
+        if (hudAltitude) hudAltitude.textContent = `ALT: ${altitudeMeters} M`;
+        if (hudHeading) hudHeading.textContent = `HDG: ${String(headingDegrees).padStart(3, '0')}°`;
+        if (hudPitch) hudPitch.textContent = `PITCH: ${pitchDegrees}°`;
+        if (hudRoll) hudRoll.textContent = `ROLL: ${rollDegreesRounded}°`;
+        if (hudTurnRate) hudTurnRate.textContent = `TURN: ${Math.abs(turnRateDegPerSec) > 1 ? turnRateDegPerSec : 0}°/s`;
+        
         // 적 타겟 마커 업데이트
         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);
+                if (distance > 10000) return; // 10km 이상은 표시하지 않음
                 
-                // 전투기의 회전을 고려한 상대 위치
-                const inverseRotation = new THREE.Euler(
-                    -this.fighter.rotation.x,
-                    -this.fighter.rotation.y,
-                    -this.fighter.rotation.z
+                // 적의 화면 좌표 계산
+                const enemyScreenPos = this.getScreenPosition(enemy.position);
+                if (!enemyScreenPos) return;
+                
+                // 화면 중앙으로부터의 거리 계산
+                const centerX = window.innerWidth / 2;
+                const centerY = window.innerHeight / 2;
+                const distFromCenter = Math.sqrt(
+                    Math.pow(enemyScreenPos.x - centerX, 2) + 
+                    Math.pow(enemyScreenPos.y - centerY, 2)
                 );
-                relativePos.applyEuler(inverseRotation);
                 
-                // 화면 좌표로 변환
-                const screenX = (relativePos.x / closestDistance) * 200;
-                const screenY = -(relativePos.y / closestDistance) * 200;
+                // 크로스헤어 반경 (75px)
+                const crosshairRadius = 75;
+                const isInCrosshair = distFromCenter < crosshairRadius;
                 
                 // 타겟 마커 생성
                 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');
+                if (isInCrosshair) {
+                    marker.classList.add('in-crosshair');
+                    
+                    // 2000m 이내면 락온
+                    if (distance < 2000) {
+                        marker.classList.add('locked');
+                    }
+                    
+                    // 타겟 박스 추가
+                    const targetBox = document.createElement('div');
+                    targetBox.className = 'target-box';
+                    marker.appendChild(targetBox);
+                    
+                    // 거리 정보 추가
+                    const targetInfo = document.createElement('div');
+                    targetInfo.className = 'target-info';
+                    targetInfo.textContent = `${Math.round(distance)}m`;
+                    marker.appendChild(targetInfo);
                 }
                 
-                targetMarkers.appendChild(marker);
+                marker.style.left = `${enemyScreenPos.x}px`;
+                marker.style.top = `${enemyScreenPos.y}px`;
                 
-                // 거리 표시
-                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);
-            }
+                targetMarkers.appendChild(marker);
+            });
         }
     }
+    
+    getScreenPosition(worldPosition) {
+        // 3D 좌표를 화면 좌표로 변환
+        const vector = worldPosition.clone();
+        vector.project(this.camera);
+        
+        // 카메라 뒤에 있는 객체는 표시하지 않음
+        if (vector.z > 1) return null;
+        
+        const x = (vector.x * 0.5 + 0.5) * window.innerWidth;
+        const y = (-vector.y * 0.5 + 0.5) * window.innerHeight;
+        
+        return { x, y };
+    }
 
     updateWarnings() {
         // 기존 경고 메시지 제거