feat: add bound screen limit when enemy is created

Author: Murillo

package.json

@@ -7,7 +7,7 @@
     "build": "tsc && npx vite build",
     "start": "npx vite --port 3000",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "prettier:format": "prettier --write \"src/**/*.{ts,js,css,html}\" index.html"
+    "prettier:format": "prettier --write \"src/**/*.{ts,js,css,html}\" \"!src/**/bootstrap.min.css\" index.html"
   },
   "keywords": [],
   "author": "Murillo Grübler",

src/Game.ts

@@ -28,10 +28,7 @@ export class Game {
     private initialNumberEnemies: number = 1;
     private speedIncreaseRate: number = 1.25;
     private sceneLimit: THREE.Vector3 = new THREE.Vector3(0, 0, 10);
-    private limitsPositionEnemy = [
-        new THREE.Vector3(-15, 0, -100),
-        new THREE.Vector3(15, 0, -50),
-    ];
+    private limitsPositionEnemy: THREE.Vector3[] = [];
     private inputStrategies: InputStrategy[] = [];
 
     constructor(container: HTMLElement) {
@@ -55,6 +52,7 @@ export class Game {
             ? CameraMode.Top
             : CameraMode.Default;
         await this.cameraComponent.load(this.scene, initialCameraMode);
+        this.limitsPositionEnemy = Screen.recalculateEnemyLimits(this.cameraComponent.instance);
         this.inputStrategies = [
             new KeyboardInputStrategy(),
             new PointerInputStrategy(this.renderer.domElement, () =>

src/library/pages/css/styles.css

@@ -267,7 +267,7 @@ ul li a:hover {
     flex: 1;
 }
 
-#game canvas{
+#game canvas {
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;

src/util/Screen.ts

@@ -3,12 +3,15 @@ import { Bounds } from '../types/Bounds';
 
 export class Screen {
     /**
-     * Checks if a pointer event happened on the left half of a given element.
-     * @param {PointerEvent} event
-     * @param {HTMLElement} element
-     * @param {number} targetCenterX center position (in px, relative to the element) of the target to exclude
-     * @param {number} targetWidth width (in px) of the target to exclude
-     * @returns {boolean | null} true if left side, false if right side, null if inside the exclusion zone
+     * Determines whether a pointer event occurred on the left half of an element,
+     * with an optional exclusion zone around a central target.
+     *
+     * @param {PointerEvent} event - The pointer event to evaluate.
+     * @param {HTMLElement} element - The element used as reference for relative coordinates.
+     * @param {number} targetCenterX - X coordinate (in px, relative to the element) of the exclusion area's center.
+     * @param {number} targetWidth - Width (in px) of the exclusion area.
+     * @returns {boolean | null} Returns `true` if the event is on the left half, `false` if on the right half,
+     * or `null` if the event falls within the exclusion zone.
      */
     public static isLeftHalf(
         event: PointerEvent,
@@ -31,7 +34,14 @@ export class Screen {
     }
 
     /**
-     * Projects a 3D object's bounding box to screen space and returns its horizontal bounds.
+     * Projects a 3D object's bounding box to screen space and returns its horizontal bounds in pixels.
+     *
+     * Note: This projection only considers the object's X-Z extents (Y set to 0) for horizontal bounds.
+     *
+     * @param {THREE.Object3D} object - The 3D object whose bounding box will be projected.
+     * @param {THREE.Camera} camera - The camera used for projection.
+     * @param {HTMLElement} element - The DOM element representing the render area (used for width in pixels).
+     * @returns {Bounds} An object containing `centerX` (center in pixels) and `width` (width in pixels).
      */
     public static getProjectedBoundsX(
         object: THREE.Object3D,
@@ -58,4 +68,51 @@ export class Screen {
             width: width,
         };
     }
+
+    /**
+     * Recalculates horizontal spawn limits for enemies based on the camera and predefined Z depths.
+     *
+     * @param {THREE.PerspectiveCamera} camera - The perspective camera used to compute screen bounds at depth.
+     * @returns {THREE.Vector3[]} An array with two `THREE.Vector3` entries: [leftSpawnPosition, rightSpawnPosition].
+     */
+    public static recalculateEnemyLimits(camera: THREE.PerspectiveCamera): THREE.Vector3[] {
+        const spawnZMax = -35;
+        const spawnZMin = -45;
+        const bounds = this.getScreenBoundsAtDepth(camera, spawnZMax);
+        return [
+            new THREE.Vector3(bounds.centerX - bounds.width / 2, 0, spawnZMin),
+            new THREE.Vector3(bounds.centerX + bounds.width / 2, 0, spawnZMax),
+        ];
+    }
+
+    /**
+     * Calculate the world-space horizontal bounds (X) of the camera's view at a specific Z depth.
+     *
+     * This method unprojects normalized device coordinates (NDC) corners to world space,
+     * intersects the camera ray with the plane at the given Z, and returns the center X and width.
+     *
+     * @private
+     * @param {THREE.PerspectiveCamera} camera - The camera used to unproject screen corners.
+     * @param {number} z - The world Z coordinate where bounds should be computed.
+     * @returns {Bounds} An object with `centerX` (center X in world units) and `width` (width in world units).
+     */
+    private static getScreenBoundsAtDepth(camera: THREE.PerspectiveCamera, z: number): Bounds {
+        const ndcCorners = [new THREE.Vector2(-1, -1), new THREE.Vector2(1, 1)];
+        const xs: number[] = [];
+
+        ndcCorners.forEach((corner) => {
+            const clipPosition = new THREE.Vector3(corner.x, corner.y, 1).unproject(camera);
+            const direction = clipPosition.sub(camera.position);
+            const t = (z - camera.position.z) / direction.z;
+            const intersection = camera.position.clone().add(direction.multiplyScalar(t));
+            xs.push(intersection.x);
+        });
+
+        const left = Math.min(...xs);
+        const right = Math.max(...xs);
+        return {
+            centerX: (left + right) / 2,
+            width: Math.abs(right - left),
+        };
+    }
 }