Update index.html

index.html

@@ -194,6 +194,10 @@
         const weaponInfo = document.getElementById('weaponInfo');
         const countdownEl = document.getElementById('countdown');
         const bossButton = document.getElementById('bossButton');
+        // 게임 상태 변수들 바로 아래에 추가
+        const FPS = 60;  // 목표 FPS
+        const frameDelay = 1000 / FPS;  // 프레임당 시간 (약 16.67ms)
+        let lastFrameTime = 0;  // 마지막 프레임의 시간을 저장
         canvas.width = window.innerWidth;
         canvas.height = window.innerHeight;
 
@@ -325,6 +329,13 @@
           gameStarted = true;
           initRound();
           gameLoop();
+
+          // 마지막 프레임 시간 초기화
+          lastFrameTime = performance.now();
+          // 게임 루프 시작
+          gameStarted = true;
+          initRound();
+          requestAnimationFrame(gameLoop);
       }
      function startCountdown() {
     isCountingDown = true;
@@ -1252,13 +1263,25 @@ function updateBF109Damage() {
         return true;
     });
 }
-function gameLoop() {
-    if (!gameOver && gameStarted) {
-        updateGame();
-        drawGame();
-        requestAnimationFrame(gameLoop);
+    function gameLoop(timestamp) {
+        if (!gameOver && gameStarted) {
+            // 현재 프레임과 이전 프레임의 시간 차이 계산
+            const elapsed = timestamp - lastFrameTime;
+    
+            // frameDelay(16.67ms)보다 더 많은 시간이 지났는지 확인
+            if (elapsed > frameDelay) {
+                // 마지막 프레임 시간 업데이트
+                lastFrameTime = timestamp - (elapsed % frameDelay);
+                
+                // 게임 업데이트 및 그리기
+                updateGame();
+                drawGame();
+            }
+            
+            // 다음 프레임 요청
+            requestAnimationFrame(gameLoop);
+        }
     }
-}
       class Enemy {
     constructor(isBoss = false) {
         this.x = Math.random() * canvas.width;