Update game.js

game.js

@@ -32,69 +32,91 @@ class TankPlayer {
         this.turretGroup = new THREE.Group();
         this.health = MAX_HEALTH;
         this.isLoaded = false;
-        this.ammo = 1;  // 변경: 10 -> 1
-        this.maxAmmo = 1;  // 추가: 최대 포탄 수
-        this.isReloading = false;  // 추가: 재장전 상태
-        this.reloadTime = 3000;  // 추가: 3초 재장전 시간
+        this.ammo = 1;
+        this.maxAmmo = 1;
+        this.isReloading = false;
+        this.reloadTime = 3000;
         this.lastShootTime = 0;
         this.bullets = [];
         this.obstacles = [];
         this.scene = new THREE.Scene();
         this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
         this.renderer = new THREE.WebGLRenderer({ antialias: true });
+        
+        // FPS 제한을 위한 속성 추가
+        this.fps = 60;
+        this.frameInterval = 1000 / this.fps;
+        this.lastFrameTime = performance.now();
+        this.deltaTime = 0;
+        
+        // 렌더러 FPS 제한 설정
+        this.renderer.setAnimationLoop(null);  // 기본 애니메이션 루프 비활성화
     }
-     // 별도의 메서드로 분리
+
     createExplosionEffect(scene, position) {
-    // 폭발 중심 플래시
-    const flashGeometry = new THREE.SphereGeometry(3);
-    const flashMaterial = new THREE.MeshBasicMaterial({
-        color: 0xffff00,
-        transparent: true,
-        opacity: 1
-    });
-    const flash = new THREE.Mesh(flashGeometry, flashMaterial);
-    flash.position.copy(position);
-    scene.add(flash);
+        // 현재 시간 확인
+        const currentTime = performance.now();
+        this.deltaTime += currentTime - this.lastFrameTime;
+        this.lastFrameTime = currentTime;
 
-    // 폭발 파티클
-    for (let i = 0; i < 30; i++) {
-        const size = Math.random() * 0.5 + 0.3;
-        const geometry = new THREE.SphereGeometry(size);
-        
-        // 다양한 색상의 파티클
-        const colors = [0xff4500, 0xff8c00, 0xff0000, 0xffd700];
-        const material = new THREE.MeshBasicMaterial({
-            color: colors[Math.floor(Math.random() * colors.length)],
+        // FPS 제한 체크
+        if (this.deltaTime < this.frameInterval) {
+            return;
+        }
+
+        // 폭발 중심 플래시
+        const flashGeometry = new THREE.SphereGeometry(3);
+        const flashMaterial = new THREE.MeshBasicMaterial({
+            color: 0xffff00,
             transparent: true,
             opacity: 1
         });
-        
-        const particle = new THREE.Mesh(geometry, material);
-        particle.position.copy(position);
+        const flash = new THREE.Mesh(flashGeometry, flashMaterial);
+        flash.position.copy(position);
+        scene.add(flash);
+
+        // 폭발 파티클 (FPS에 맞춰 업데이트)
+        const particleCount = Math.floor(30 * (this.deltaTime / this.frameInterval));
+        for (let i = 0; i < particleCount; i++) {
+            const size = Math.random() * 0.5 + 0.3;
+            const geometry = new THREE.SphereGeometry(size);
+            
+            const colors = [0xff4500, 0xff8c00, 0xff0000, 0xffd700];
+            const material = new THREE.MeshBasicMaterial({
+                color: colors[Math.floor(Math.random() * colors.length)],
+                transparent: true,
+                opacity: 1
+            });
+            
+            const particle = new THREE.Mesh(geometry, material);
+            particle.position.copy(position);
 
-        // 파티클 속도와 방향 설정
-        const speed = Math.random() * 0.5 + 0.3;
-        const angle = Math.random() * Math.PI * 2;
-        const elevation = Math.random() * Math.PI - Math.PI / 2;
+            const speed = Math.random() * 0.5 + 0.3;
+            const angle = Math.random() * Math.PI * 2;
+            const elevation = Math.random() * Math.PI - Math.PI / 2;
 
-        particle.velocity = new THREE.Vector3(
-            Math.cos(angle) * Math.cos(elevation) * speed,
-            Math.sin(elevation) * speed,
-            Math.sin(angle) * Math.cos(elevation) * speed
-        );
+            particle.velocity = new THREE.Vector3(
+                Math.cos(angle) * Math.cos(elevation) * speed,
+                Math.sin(elevation) * speed,
+                Math.sin(angle) * Math.cos(elevation) * speed
+            );
 
-        particle.gravity = -0.015;
-        particle.life = Math.random() * 30 + 30;
-        particle.fadeRate = 0.97;
+            particle.gravity = -0.015;
+            particle.life = Math.random() * 30 + 30;
+            particle.fadeRate = 0.97;
+
+            scene.add(particle);
+            window.gameInstance.particles.push({
+                mesh: particle,
+                velocity: particle.velocity,
+                gravity: particle.gravity,
+                life: particle.life,
+                fadeRate: particle.fadeRate
+            });
+        }
 
-        scene.add(particle);
-        window.gameInstance.particles.push({
-            mesh: particle,
-            velocity: particle.velocity,
-            gravity: particle.gravity,
-            life: particle.life,
-            fadeRate: particle.fadeRate
-        });
+        // deltaTime 리셋
+        this.deltaTime = 0;
     }
 
     // 폭발 링 이펙트
@@ -1491,6 +1513,11 @@ class Game {
         this.enemyLabels = new Map(); // 적 라벨을 추적하기 위한 Map 추가
         this.raycaster = new THREE.Raycaster();
         this.crosshair = document.getElementById('crosshair');
+        // FPS 관련 속성 추가
+         this.fps = 60;
+        this.frameInterval = 1000 / this.fps;
+        this.lastFrameTime = performance.now();
+        this.deltaTime = 0;
         document.getElementById('gameContainer').appendChild(this.renderer.domElement);
         
 
@@ -2600,49 +2627,59 @@ updateCrosshair() {
     }
 
    animate() {
-       if (this.isGameOver) {
-           if (this.animationFrameId) {
-               cancelAnimationFrame(this.animationFrameId);
-           }
-           return;
-       }
+    if (this.isGameOver) {
+        if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId);
+        }
+        return;
+    }
+
+    const currentTime = performance.now();
+    this.deltaTime += currentTime - this.lastFrameTime;
+    this.lastFrameTime = currentTime;
 
-       this.animationFrameId = requestAnimationFrame(() => this.animate());
-           // 게임이 시작되지 않았으면 렌더링만 수행
+    // FPS 제한을 위한 프레임 스킵
+    if (this.deltaTime >= this.frameInterval) {
+        // 게임이 시작되지 않았으면 렌더링만 수행
         if (!this.isStarted) {
             this.renderer.render(this.scene, this.camera);
+            this.deltaTime = Math.min(this.deltaTime - this.frameInterval, this.frameInterval);
+            this.animationFrameId = requestAnimationFrame(() => this.animate());
             return;
         }
 
-       const currentTime = performance.now();
-       const deltaTime = (currentTime - this.lastTime) / 1000;
-       this.lastTime = currentTime;
+        // 프레임 업데이트
+        if (!this.isLoading) {
+            this.handleMovement();
+            this.tank.update(this.mouse.x, this.mouse.y, this.scene);
+            
+            const tankPosition = this.tank.getPosition();
+            this.enemies.forEach(enemy => {
+                enemy.update(tankPosition);
+                
+                if (enemy.isLoaded && enemy.mesh.position.distanceTo(tankPosition) < ENEMY_CONFIG.ATTACK_RANGE) {
+                    enemy.shoot(tankPosition);
+                }
+            });
+            
+            this.updateEnemyLabels();
+            this.updateParticles();
+            this.checkCollisions();
+            this.updateUI();
+            this.updateRadar();
+            this.updateCrosshair();
+        }
 
-       if (!this.isLoading) {
-           this.handleMovement();
-           this.tank.update(this.mouse.x, this.mouse.y, this.scene);
-           
-           const tankPosition = this.tank.getPosition();
-           this.enemies.forEach(enemy => {
-               enemy.update(tankPosition);
-               
-               if (enemy.isLoaded && enemy.mesh.position.distanceTo(tankPosition) < ENEMY_CONFIG.ATTACK_RANGE) {
-                   enemy.shoot(tankPosition);
-               }
-           });
-            this.updateEnemyLabels(); // 적 라벨 업데이트 추가
-           this.updateParticles();
-           this.checkCollisions();
-           this.updateUI();
-           this.updateRadar(); // 레이더 업데이트 추가
-           // 크로스헤어 업데이트 추가
-          this.updateCrosshair();
-       }
-       
-       this.renderer.render(this.scene, this.camera);
-   }
-}
+        // 렌더링
+        this.renderer.render(this.scene, this.camera);
 
+        // deltaTime 리셋 (남은 시간 유지)
+        this.deltaTime = Math.min(this.deltaTime - this.frameInterval, this.frameInterval);
+    }
+
+    // 다음 프레임 요청
+    this.animationFrameId = requestAnimationFrame(() => this.animate());
+}
 // Start game
 window.startGame = function() {
     document.getElementById('startScreen').style.display = 'none';