Update game.js

game.js

@@ -102,21 +102,29 @@ class TankPlayer {
         return bullet;
     }
 
-    update(mouseX, mouseY) {
-        if (!this.body || !this.turretGroup) return;
-        
-        for (let i = this.bullets.length - 1; i >= 0; i--) {
-            const bullet = this.bullets[i];
-            bullet.position.add(bullet.velocity);
-
-            if (Math.abs(bullet.position.x) > MAP_SIZE/2 || 
-                Math.abs(bullet.position.z) > MAP_SIZE/2) {
-                scene.remove(bullet);
-                this.bullets.splice(i, 1);
-            }
+   update(mouseX, mouseY) {
+    if (!this.body || !this.turretGroup) return;
+    
+    for (let i = this.bullets.length - 1; i >= 0; i--) {
+        const bullet = this.bullets[i];
+        bullet.position.add(bullet.velocity);
+
+        if (Math.abs(bullet.position.x) > MAP_SIZE/2 || 
+            Math.abs(bullet.position.z) > MAP_SIZE/2) {
+            scene.remove(bullet);
+            this.bullets.splice(i, 1);
         }
     }
 
+    // 포탑 회전 방향 수정
+    if (this.turretGroup) {
+        // 마우스 움직임을 기반으로 한 회전각 계산
+        const rotationAngle = -Math.atan2(mouseX, mouseY);  // 부호를 반대로 하여 회전 방향 변경
+        this.turretRotation = rotationAngle;
+        this.turretGroup.rotation.y = this.turretRotation;
+    }
+}
+
     move(direction) {
         if (!this.body) return;
         
@@ -318,60 +326,75 @@ class Game {
     }
 
     async initialize() {
-        try {
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-            this.scene.add(ambientLight);
-
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-            directionalLight.position.set(50, 50, 50);
-            directionalLight.castShadow = true;
-            directionalLight.shadow.mapSize.width = 2048;
-            directionalLight.shadow.mapSize.height = 2048;
-            this.scene.add(directionalLight);
-
-            const ground = new THREE.Mesh(
-                new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE),
-                new THREE.MeshStandardMaterial({ 
-                    color: 0x333333,
-                    roughness: 0.9,
-                    metalness: 0.1
-                })
-            );
-            ground.rotation.x = -Math.PI / 2;
-            ground.receiveShadow = true;
-            this.scene.add(ground);
-
-            await this.createBuildings();
-            await this.tank.initialize(this.scene, this.loader);
-            
-            if (!this.tank.isLoaded) {
-                throw new Error('Tank loading failed');
-            }
+    try {
+        // 안개 효과 추가
+        this.scene.fog = new THREE.Fog(0xffd700, 1, 100);
+        this.scene.background = new THREE.Color(0xffd700); // 사막 하늘색
+
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); // 사막 환경에 맞게 밝기 증가
+        this.scene.add(ambientLight);
+
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); // 사막의 강한 햇빛
+        directionalLight.position.set(50, 50, 50);
+        directionalLight.castShadow = true;
+        directionalLight.shadow.mapSize.width = 2048;
+        directionalLight.shadow.mapSize.height = 2048;
+        this.scene.add(directionalLight);
+
+        // 사막 지형 생성
+        const groundGeometry = new THREE.PlaneGeometry(MAP_SIZE, MAP_SIZE, 100, 100);
+        const groundTexture = new THREE.TextureLoader().load('/textures/sand.jpg');
+        groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
+        groundTexture.repeat.set(50, 50);
+        
+        const groundMaterial = new THREE.MeshStandardMaterial({ 
+            map: groundTexture,
+            roughness: 1.0,
+            metalness: 0.0,
+            color: 0xd2b48c // 사막색
+        });
 
-            const tankPosition = this.tank.getPosition();
-            this.camera.position.set(
-                tankPosition.x,
-                tankPosition.y + 15,
-                tankPosition.z - 30
-            );
-            this.camera.lookAt(new THREE.Vector3(
-                tankPosition.x,
-                tankPosition.y + 2,
-                tankPosition.z
-            ));
+        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+        ground.rotation.x = -Math.PI / 2;
+        ground.receiveShadow = true;
 
-            this.isLoading = false;
-            document.getElementById('loading').style.display = 'none';
+        // 지형의 높낮이 변화 추가
+        const vertices = ground.geometry.attributes.position.array;
+        for (let i = 0; i < vertices.length; i += 3) {
+            vertices[i + 1] = Math.sin(vertices[i] / 20) * Math.cos(vertices[i + 2] / 20) * 2;
+        }
+        ground.geometry.attributes.position.needsUpdate = true;
+        ground.geometry.computeVertexNormals();
 
-            this.animate();
-            this.spawnEnemies();
-            this.startGameTimer();
+        this.scene.add(ground);
 
-        } catch (error) {
-            console.error('Game initialization error:', error);
-            this.handleLoadingError();
+        await this.createBuildings();
+        await this.tank.initialize(this.scene, this.loader);
+        
+        if (!this.tank.isLoaded) {
+            throw new Error('Tank loading failed');
         }
+
+        const tankPosition = this.tank.getPosition();
+        this.camera.position.set(
+            tankPosition.x,
+            tankPosition.y + 15,
+            tankPosition.z - 30
+        );
+        this.camera.lookAt(tankPosition);
+
+        this.isLoading = false;
+        document.getElementById('loading').style.display = 'none';
+
+        this.animate();
+        this.spawnEnemies();
+        this.startGameTimer();
+
+    } catch (error) {
+        console.error('Game initialization error:', error);
+        this.handleLoadingError();
     }
+}
 
     setupEventListeners() {
         document.addEventListener('keydown', (event) => {
@@ -426,54 +449,56 @@ class Game {
     }
 
     handleMovement() {
-        if (!this.tank.isLoaded || this.isGameOver) return;
-        
-        const direction = new THREE.Vector3();
-        
-        if (this.keys.forward) direction.z += 1;
-        if (this.keys.backward) direction.z -= 1;
-        if (this.keys.left) direction.x -= 1;
-        if (this.keys.right) direction.x += 1;
-        
-        if (direction.length() > 0) {
-            direction.normalize();
-            
-            if (this.keys.left) this.tank.rotate(-1);
-            if (this.keys.right) this.tank.rotate(1);
-            
-            direction.applyEuler(this.tank.body.rotation);
-            this.tank.move(direction);
-        }
-
-        const mouseVector = new THREE.Vector2(this.mouse.x, -this.mouse.y);
-        const rotationAngle = Math.atan2(mouseVector.x, mouseVector.y);
-        
-        if (this.tank.turretGroup) {
-            this.tank.turretGroup.rotation.y = rotationAngle;
-        }
-
-        const tankPos = this.tank.getPosition();
-        const cameraDistance = 30;
-        const cameraHeight = 15;
-        const lookAtHeight = 5;
+    if (!this.tank.isLoaded || this.isGameOver) return;
+    
+    const direction = new THREE.Vector3();
+    
+    if (this.keys.forward) direction.z += 1;
+    if (this.keys.backward) direction.z -= 1;
+    if (this.keys.left) direction.x -= 1;
+    if (this.keys.right) direction.x += 1;
+    
+    if (direction.length() > 0) {
+        direction.normalize();
         
-        const tankRotation = this.tank.body.rotation.y;
+        if (this.keys.left) this.tank.rotate(-1);
+        if (this.keys.right) this.tank.rotate(1);
         
-        this.camera.position.set(
-            tankPos.x - Math.sin(tankRotation) * cameraDistance,
-            tankPos.y + cameraHeight,
-            tankPos.z - Math.cos(tankRotation) * cameraDistance
-        );
+        direction.applyEuler(this.tank.body.rotation);
+        this.tank.move(direction);
+    }
 
-        const lookAtPoint = new THREE.Vector3(
-            tankPos.x + Math.sin(tankRotation) * 10,
-            tankPos.y + lookAtHeight,
-            tankPos.z + Math.cos(tankRotation) * 10
-        );
-        
-        this.camera.lookAt(lookAtPoint);
+    // 포탑 회전 업데이트
+    const mouseVector = new THREE.Vector2(this.mouse.x, -this.mouse.y);
+    const rotationAngle = -Math.atan2(mouseVector.x, mouseVector.y); // 부호 변경
+    
+    if (this.tank.turretGroup) {
+        this.tank.turretGroup.rotation.y = rotationAngle;
     }
 
+    // 카메라 위치 업데이트
+    const tankPos = this.tank.getPosition();
+    const cameraDistance = 30;
+    const cameraHeight = 15;
+    const lookAtHeight = 5;
+    
+    const tankRotation = this.tank.body.rotation.y;
+    
+    this.camera.position.set(
+        tankPos.x - Math.sin(tankRotation) * cameraDistance,
+        tankPos.y + cameraHeight,
+        tankPos.z - Math.cos(tankRotation) * cameraDistance
+    );
+
+    const lookAtPoint = new THREE.Vector3(
+        tankPos.x + Math.sin(tankRotation) * 10,
+        tankPos.y + lookAtHeight,
+        tankPos.z + Math.cos(tankRotation) * 10
+    );
+    
+    this.camera.lookAt(lookAtPoint);
+}
+
     createBuildings() {
         const buildingTypes = [
             { width: 10, height: 30, depth: 10, color: 0x808080 },
@@ -574,23 +599,24 @@ class Game {
     }
 
     spawnEnemies() {
-        const spawnEnemy = () => {
-            if (this.enemies.length < ENEMY_COUNT_MAX && !this.isGameOver) {
-                const position = this.getValidEnemySpawnPosition();
-                if (position) {
-                    const type = Math.random() < 0.7 ? 'tank' : 'heavy';
-                    const enemy = new Enemy(this.scene, position, type);
-                    enemy.initialize(this.loader);
-                    this.enemies.push(enemy);
-                }
+    const spawnEnemy = () => {
+        if (this.enemies.length < 3 && !this.isGameOver) {  // 최대 3대로 제한
+            const position = this.getValidEnemySpawnPosition();
+            if (position) {
+                const type = Math.random() < 0.7 ? 'tank' : 'heavy';
+                const enemy = new Enemy(this.scene, position, type);
+                enemy.initialize(this.loader);
+                this.enemies.push(enemy);
             }
-            if (!this.isGameOver) {
-                setTimeout(spawnEnemy, 3000);
-            }
-        };
-        
-        spawnEnemy();
-    }
+        }
+        if (!this.isGameOver) {
+            setTimeout(spawnEnemy, 10000);  // 10초마다 스폰
+        }
+    };
+    
+    spawnEnemy();
+}
+
 
     getValidEnemySpawnPosition() {
         const margin = 20;