Spaces:
Running
Running
Update game.js
Browse files
game.js
CHANGED
|
@@ -102,27 +102,29 @@ class TankPlayer {
|
|
| 102 |
return bullet;
|
| 103 |
}
|
| 104 |
|
| 105 |
-
|
| 106 |
-
|
| 107 |
-
|
| 108 |
-
|
| 109 |
-
|
| 110 |
-
|
| 111 |
-
|
| 112 |
-
|
| 113 |
-
|
| 114 |
-
|
| 115 |
-
|
| 116 |
-
|
| 117 |
-
|
| 118 |
-
|
| 119 |
-
|
| 120 |
-
|
| 121 |
-
|
| 122 |
-
|
| 123 |
-
this.
|
| 124 |
}
|
| 125 |
}
|
|
|
|
|
|
|
| 126 |
|
| 127 |
move(direction) {
|
| 128 |
if (!this.body) return;
|
|
@@ -479,10 +481,13 @@ async addDesertDecorations() {
|
|
| 479 |
});
|
| 480 |
|
| 481 |
document.addEventListener('mousemove', (event) => {
|
| 482 |
-
|
| 483 |
-
|
| 484 |
-
|
| 485 |
-
|
|
|
|
|
|
|
|
|
|
| 486 |
|
| 487 |
document.addEventListener('click', () => {
|
| 488 |
if (!document.pointerLockElement) {
|
|
@@ -511,54 +516,47 @@ async addDesertDecorations() {
|
|
| 511 |
|
| 512 |
handleMovement() {
|
| 513 |
if (!this.tank.isLoaded || this.isGameOver) return;
|
| 514 |
-
|
| 515 |
const direction = new THREE.Vector3();
|
| 516 |
-
|
| 517 |
if (this.keys.forward) direction.z += 1;
|
| 518 |
if (this.keys.backward) direction.z -= 1;
|
| 519 |
if (this.keys.left) direction.x -= 1;
|
| 520 |
if (this.keys.right) direction.x += 1;
|
| 521 |
-
|
| 522 |
if (direction.length() > 0) {
|
| 523 |
direction.normalize();
|
| 524 |
-
|
| 525 |
if (this.keys.left) this.tank.rotate(-1);
|
| 526 |
if (this.keys.right) this.tank.rotate(1);
|
| 527 |
-
|
| 528 |
direction.applyEuler(this.tank.body.rotation);
|
| 529 |
this.tank.move(direction);
|
| 530 |
}
|
| 531 |
|
| 532 |
-
// ํฌํ ํ์ ์
๋ฐ์ดํธ
|
| 533 |
-
const mouseVector = new THREE.Vector2(this.mouse.x, -this.mouse.y);
|
| 534 |
-
const rotationAngle = -Math.atan2(mouseVector.x, mouseVector.y); // ๋ถํธ ๋ณ๊ฒฝ
|
| 535 |
-
|
| 536 |
-
if (this.tank.turretGroup) {
|
| 537 |
-
this.tank.turretGroup.rotation.y = rotationAngle;
|
| 538 |
-
}
|
| 539 |
-
|
| 540 |
// ์นด๋ฉ๋ผ ์์น ์
๋ฐ์ดํธ
|
| 541 |
const tankPos = this.tank.getPosition();
|
|
|
|
| 542 |
const cameraDistance = 30;
|
| 543 |
const cameraHeight = 15;
|
| 544 |
-
|
| 545 |
-
|
| 546 |
-
|
| 547 |
-
|
| 548 |
-
|
| 549 |
-
|
| 550 |
-
|
| 551 |
-
|
| 552 |
-
|
| 553 |
-
|
| 554 |
-
|
| 555 |
-
|
| 556 |
-
|
| 557 |
-
|
| 558 |
-
|
| 559 |
this.camera.lookAt(lookAtPoint);
|
| 560 |
}
|
| 561 |
|
|
|
|
| 562 |
createBuildings() {
|
| 563 |
const buildingTypes = [
|
| 564 |
{ width: 10, height: 30, depth: 10, color: 0x808080 },
|
|
|
|
| 102 |
return bullet;
|
| 103 |
}
|
| 104 |
|
| 105 |
+
update(mouseX, mouseY, scene) {
|
| 106 |
+
if (!this.body || !this.turretGroup) return;
|
| 107 |
+
|
| 108 |
+
// ํฌํ ํ์ ๋ฐฉํฅ ์ค์
|
| 109 |
+
const turretDirection = new THREE.Vector3(mouseX, 0, -mouseY).normalize();
|
| 110 |
+
const angle = Math.atan2(turretDirection.x, turretDirection.z);
|
| 111 |
+
this.turretGroup.rotation.y = angle;
|
| 112 |
+
|
| 113 |
+
// ํ๋ ์ด์ด ์ด์ ์ด๋ ์ฒ๋ฆฌ
|
| 114 |
+
for (let i = this.bullets.length - 1; i >= 0; i--) {
|
| 115 |
+
const bullet = this.bullets[i];
|
| 116 |
+
bullet.position.add(bullet.velocity);
|
| 117 |
+
|
| 118 |
+
if (
|
| 119 |
+
Math.abs(bullet.position.x) > MAP_SIZE / 2 ||
|
| 120 |
+
Math.abs(bullet.position.z) > MAP_SIZE / 2
|
| 121 |
+
) {
|
| 122 |
+
scene.remove(bullet);
|
| 123 |
+
this.bullets.splice(i, 1);
|
| 124 |
}
|
| 125 |
}
|
| 126 |
+
}
|
| 127 |
+
|
| 128 |
|
| 129 |
move(direction) {
|
| 130 |
if (!this.body) return;
|
|
|
|
| 481 |
});
|
| 482 |
|
| 483 |
document.addEventListener('mousemove', (event) => {
|
| 484 |
+
if (this.isLoading || this.isGameOver || !document.pointerLockElement) return;
|
| 485 |
+
|
| 486 |
+
// ์ปค์ ์ด๋์ ๋ฐ๋ผ ๊ฐ ์
๋ฐ์ดํธ (ํ์ ๊ฐ๋๋ฅผ ์ ํ)
|
| 487 |
+
this.mouse.x = Math.max(Math.min(this.mouse.x + event.movementX * 0.002, 1), -1);
|
| 488 |
+
this.mouse.y = Math.max(Math.min(this.mouse.y + event.movementY * 0.002, 1), -1);
|
| 489 |
+
});
|
| 490 |
+
|
| 491 |
|
| 492 |
document.addEventListener('click', () => {
|
| 493 |
if (!document.pointerLockElement) {
|
|
|
|
| 516 |
|
| 517 |
handleMovement() {
|
| 518 |
if (!this.tank.isLoaded || this.isGameOver) return;
|
| 519 |
+
|
| 520 |
const direction = new THREE.Vector3();
|
| 521 |
+
|
| 522 |
if (this.keys.forward) direction.z += 1;
|
| 523 |
if (this.keys.backward) direction.z -= 1;
|
| 524 |
if (this.keys.left) direction.x -= 1;
|
| 525 |
if (this.keys.right) direction.x += 1;
|
| 526 |
+
|
| 527 |
if (direction.length() > 0) {
|
| 528 |
direction.normalize();
|
| 529 |
+
|
| 530 |
if (this.keys.left) this.tank.rotate(-1);
|
| 531 |
if (this.keys.right) this.tank.rotate(1);
|
| 532 |
+
|
| 533 |
direction.applyEuler(this.tank.body.rotation);
|
| 534 |
this.tank.move(direction);
|
| 535 |
}
|
| 536 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 537 |
// ์นด๋ฉ๋ผ ์์น ์
๋ฐ์ดํธ
|
| 538 |
const tankPos = this.tank.getPosition();
|
| 539 |
+
const turretRotation = this.tank.turretGroup.rotation.y + this.tank.body.rotation.y;
|
| 540 |
const cameraDistance = 30;
|
| 541 |
const cameraHeight = 15;
|
| 542 |
+
|
| 543 |
+
this.camera.position.set(
|
| 544 |
+
tankPos.x - Math.sin(turretRotation) * cameraDistance,
|
| 545 |
+
tankPos.y + cameraHeight,
|
| 546 |
+
tankPos.z - Math.cos(turretRotation) * cameraDistance
|
| 547 |
+
);
|
| 548 |
+
|
| 549 |
+
// ์นด๋ฉ๋ผ๊ฐ ํญ์ ํฌํ์ ์ ๋ฐฉํฅ์ ๋ฐ๋ผ๋ณด๊ฒ ์ค์
|
| 550 |
+
const lookAtPoint = new THREE.Vector3(
|
| 551 |
+
tankPos.x + Math.sin(turretRotation) * 10,
|
| 552 |
+
tankPos.y + 5,
|
| 553 |
+
tankPos.z + Math.cos(turretRotation) * 10
|
| 554 |
+
);
|
| 555 |
+
|
|
|
|
| 556 |
this.camera.lookAt(lookAtPoint);
|
| 557 |
}
|
| 558 |
|
| 559 |
+
|
| 560 |
createBuildings() {
|
| 561 |
const buildingTypes = [
|
| 562 |
{ width: 10, height: 30, depth: 10, color: 0x808080 },
|