Update index.html

index.html

@@ -69,142 +69,178 @@
             position: relative;
             width: 100vw;
             height: 100vh;
-            cursor: crosshair;
+            cursor: none;
         }
 
-        #info {
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            color: #0f0;
-            background: rgba(0,20,0,0.7);
-            padding: 10px;
-            font-size: 14px;
-            z-index: 1001;
-            border: 1px solid #0f0;
-            border-radius: 5px;
-            user-select: none;
+        /* HUD 전체 컨테이너 */
+        #hudContainer {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 1000;
         }
 
-        /* HUD 크로스헤어 스타일 */
+        /* 중앙 HUD */
         #hudCrosshair {
             position: fixed;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            width: 300px;
-            height: 300px;
-            pointer-events: none;
-            z-index: 1001;
+            width: 400px;
+            height: 400px;
         }
 
-        .hud-circle {
+        /* 조준 원 */
+        .hud-aiming-circle {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            width: 200px;
-            height: 200px;
-            border: 2px solid rgba(0, 255, 0, 0.3);
+            width: 150px;
+            height: 150px;
+            border: 2px solid rgba(0, 255, 0, 0.5);
             border-radius: 50%;
         }
 
-        .hud-center {
+        /* 중앙점 */
+        .hud-center-dot {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            width: 10px;
-            height: 10px;
+            width: 4px;
+            height: 4px;
             background: #00ff00;
             border-radius: 50%;
-            box-shadow: 0 0 10px #00ff00;
         }
 
-        .hud-horizon {
+        /* 수평선 */
+        .hud-horizon-line {
             position: absolute;
             top: 50%;
-            left: 0;
-            right: 0;
-            height: 2px;
-            background: rgba(0, 255, 0, 0.5);
+            left: 20%;
+            right: 20%;
+            height: 1px;
+            background: rgba(0, 255, 0, 0.4);
         }
 
+        /* 피치 래더 */
         .hud-pitch-ladder {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            width: 150px;
-            height: 200px;
+            width: 200px;
+            height: 300px;
         }
 
         .pitch-line {
             position: absolute;
             width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .pitch-line-bar {
+            width: 60px;
             height: 1px;
-            background: rgba(0, 255, 0, 0.3);
-            left: 0;
+            background: rgba(0, 255, 0, 0.4);
         }
 
-        .pitch-line.major {
-            background: rgba(0, 255, 0, 0.6);
-            height: 2px;
+        .pitch-line-text {
+            position: absolute;
+            color: rgba(0, 255, 0, 0.6);
+            font-size: 10px;
+            left: -25px;
         }
 
-        #pitchIndicator {
+        /* 비행 정보 표시 */
+        .hud-info {
             position: absolute;
-            top: 50%;
+            color: #00ff00;
+            font-size: 12px;
+            font-family: 'Courier New', monospace;
+            text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+        }
+
+        #hudSpeed {
+            left: 20px;
+            top: 45%;
+        }
+
+        #hudAltitude {
+            right: 20px;
+            top: 45%;
+        }
+
+        #hudHeading {
+            top: 20px;
             left: 50%;
-            transform: translate(-50%, -50%);
-            width: 80px;
-            height: 2px;
-            background: #00ff00;
-            transition: transform 0.1s ease;
+            transform: translateX(-50%);
         }
 
+        #hudPitch {
+            left: 20px;
+            bottom: 30%;
+        }
+
+        #hudRoll {
+            right: 20px;
+            bottom: 30%;
+        }
+
+        #hudTurnRate {
+            left: 50%;
+            bottom: 20px;
+            transform: translateX(-50%);
+        }
+
+        /* 타겟 마커 */
         .target-marker {
             position: absolute;
-            width: 40px;
-            height: 40px;
-            border: 2px solid rgba(255, 255, 0, 0.8);
-            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            border: 2px solid transparent;
             transform: translate(-50%, -50%);
-            pointer-events: none;
         }
 
-        .target-marker.locked {
-            border-color: rgba(255, 0, 0, 1);
-            animation: pulse 0.5s infinite;
+        .target-marker.in-crosshair {
+            border: 2px solid #ffff00;
+            animation: target-pulse 0.5s infinite;
         }
 
-        @keyframes pulse {
-            0%, 100% { transform: translate(-50%, -50%) scale(1); }
-            50% { transform: translate(-50%, -50%) scale(1.1); }
+        .target-marker.locked {
+            border: 2px solid #ff0000;
+            box-shadow: 0 0 10px #ff0000;
         }
 
-        .target-distance {
+        .target-marker .target-box {
             position: absolute;
-            color: #00ff00;
-            font-size: 12px;
-            transform: translate(-50%, -50%);
-            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
-            pointer-events: none;
+            top: -5px;
+            left: -5px;
+            right: -5px;
+            bottom: -5px;
+            border: 1px solid currentColor;
         }
 
-        #targetMarkers {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 1000;
+        @keyframes target-pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
         }
 
-        /* 기존 크로스헤어 숨김 */
-        #crosshair {
-            display: none;
+        .target-info {
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            color: #00ff00;
+            font-size: 10px;
+            white-space: nowrap;
+            margin-top: 5px;
         }
 
         #healthBar {
@@ -227,20 +263,6 @@
             transition: width 0.3s;
         }
 
-        #ammo {
-            position: absolute;
-            bottom: 20px;
-            right: 20px;
-            color: #0f0;
-            background: rgba(0,20,0,0.7);
-            padding: 10px;
-            font-size: 20px;
-            z-index: 1001;
-            border: 1px solid #0f0;
-            border-radius: 5px;
-        }
-
-      
         #gameTitle {
             position: absolute;
             top: 60px;
@@ -256,6 +278,7 @@
             text-transform: uppercase;
             letter-spacing: 2px;
         }
+        
         #ammoDisplay {
             position: absolute;
             bottom: 20px;
@@ -379,22 +402,10 @@
         .start-button:hover {
             transform: scale(1.1);
         }
-
-        #minimap {
-            position: absolute;
-            bottom: 20px;
-            right: 20px;
-            width: 200px;
-            height: 200px;
-            background: rgba(0,20,0,0.7);
-            border: 2px solid #0f0;
-            border-radius: 5px;
-            z-index: 1001;
-        }
     </style>
 </head>
 <body>
-    <!-- 로딩 화면 (처음에 표시됨) -->
+    <!-- 로딩 화면 -->
     <div id="loading">
         <div class="loading-spinner"></div>
         <div class="loading-text">Loading Fighter Resources...</div>
@@ -405,7 +416,7 @@
         </div>
     </div>
 
-    <!-- 게임 시작 화면 (로딩 완료 후 표시됨) -->
+    <!-- 게임 시작 화면 -->
     <div class="start-screen" id="startScreen">
         <h1 style="color: #0f0; font-size: 48px; margin-bottom: 20px;">JET FIGHT SIMULATER</h1>
         <button class="start-button" onclick="startGame()">Start Game</button>
@@ -415,6 +426,7 @@
             <p>A/D - Rudder Control</p>
             <p>Mouse - Aircraft Control</p>
             <p>Left Click - Fire</p>
+            <p>F - Escape Stall</p>
         </div>
     </div>
 
@@ -427,29 +439,51 @@
             <div id="time">Time: 180s</div>
         </div>
         
-        <!-- HUD 크로스헤어 -->
-        <div id="hudCrosshair">
-            <div class="hud-circle"></div>
-            <div class="hud-center"></div>
-            <div class="hud-horizon"></div>
-            <div class="hud-pitch-ladder">
-                <div class="pitch-line" style="top: 20%;"></div>
-                <div class="pitch-line major" style="top: 35%;"></div>
-                <div class="pitch-line" style="top: 50%;"></div>
-                <div class="pitch-line major" style="top: 65%;"></div>
-                <div class="pitch-line" style="top: 80%;"></div>
-                <div id="pitchIndicator"></div>
+        <!-- HUD 컨테이너 -->
+        <div id="hudContainer">
+            <!-- 중앙 HUD -->
+            <div id="hudCrosshair">
+                <div class="hud-aiming-circle"></div>
+                <div class="hud-center-dot"></div>
+                <div class="hud-horizon-line"></div>
+                
+                <!-- 피치 래더 -->
+                <div class="hud-pitch-ladder" id="pitchLadder">
+                    <div class="pitch-line" style="top: 20%;">
+                        <div class="pitch-line-bar"></div>
+                        <span class="pitch-line-text">20</span>
+                    </div>
+                    <div class="pitch-line" style="top: 35%;">
+                        <div class="pitch-line-bar"></div>
+                        <span class="pitch-line-text">10</span>
+                    </div>
+                    <div class="pitch-line" style="top: 50%;">
+                        <div class="pitch-line-bar" style="width: 100px;"></div>
+                        <span class="pitch-line-text">0</span>
+                    </div>
+                    <div class="pitch-line" style="top: 65%;">
+                        <div class="pitch-line-bar"></div>
+                        <span class="pitch-line-text">-10</span>
+                    </div>
+                    <div class="pitch-line" style="top: 80%;">
+                        <div class="pitch-line-bar"></div>
+                        <span class="pitch-line-text">-20</span>
+                    </div>
+                </div>
             </div>
+            
+            <!-- 비행 정보 -->
+            <div class="hud-info" id="hudSpeed">SPD: 0 KT</div>
+            <div class="hud-info" id="hudAltitude">ALT: 0 M</div>
+            <div class="hud-info" id="hudHeading">HDG: 000°</div>
+            <div class="hud-info" id="hudPitch">PITCH: 0°</div>
+            <div class="hud-info" id="hudRoll">ROLL: 0°</div>
+            <div class="hud-info" id="hudTurnRate">TURN: 0°/s</div>
+            
+            <!-- 타겟 마커 레이어 -->
+            <div id="targetMarkers"></div>
         </div>
         
-        <!-- 타겟 마커 레이어 -->
-        <div id="targetMarkers"></div>
-        
-        <!-- 기존 크로스헤어 (숨김) -->
-        <div id="crosshair"></div>
-        <div id="detected" style="position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); color: red; font-size: 16px; display: none;">DETECTED</div>
-        <div id="enemyLabels"></div>
-        
         <!-- 체력바 -->
         <div id="healthBar">
             <div id="health"></div>