En la última parte creamos la nave del jugador y la hicimos moverse. En esta parte crearemos los enemigos y los haremos moverse. ¡Y luego los derribaremos!

Creando los enemigos

Vamos a hacer algo similar a cuando creamos las viñetas. Vamos a crear un enemigo plantilla que clonaremos cada vez que queramos crear un enemigo nuevo. También necesitamos realizar un seguimiento de los enemigos a través de una matriz porque puede haber más de uno al mismo tiempo.

Pero primero, crearemos el método que crea al enemigo. Agregue el siguiente código después del método createBullet:

let enemyTemplate: PIXI.Graphics | undefined = undefined;
function createEnemy() {
    if(!enemyTemplate) {
        enemyTemplate = new Graphics();
        enemyTemplate
            .poly([
                0, 0,
                50, 0,
                25, 25,
            ])
            .fill(0xFF6666);
    }

    const enemy = enemyTemplate.clone();
    enemy.x = 25   (Math.random() * 480) - 50;
    enemy.y = -50;

    return enemy;
}

Como puedes ver, es bastante similar al método createBullet. Creamos un enemigo de plantilla que clonamos cada vez que queremos crear un enemigo nuevo. Luego colocamos al enemigo en una posición x aleatoria en la parte superior de la pantalla. El enemigo tiene la misma forma que la nave del jugador, pero es roja y está al revés.

Especificamos la ubicación de generación del enemigo configurando las propiedades xey. La propiedad x se establece en un valor aleatorio entre 25 y 480 - 50, para que el enemigo esté siempre dentro de la pantalla del juego. La propiedad y está configurada en -50, de modo que el enemigo está justo fuera de la pantalla y se moverá hacia ella.

A continuación, debemos llamar a este método para crear un nuevo enemigo cada pocos segundos.

Generando enemigos

Usaremos el método setInterval para esto. Agregue el siguiente código justo después de donde definimos la matriz de viñetas:

const enemies: PIXI.Graphics[] = [];

const enemySpawnInterval = 2500;
function spawnEnemy() {
    if(!document.hasFocus()) {
        return;
    }
    const enemy = createEnemy();
    enemies.push(enemy);
    app.stage.addChild(enemy);
}

setInterval(spawnEnemy, enemySpawnInterval);
spawnEnemy();

Creamos una nueva matriz llamada enemigos para realizar un seguimiento de todos los enemigos. Luego creamos una nueva variable llamada enemigoSpawnInterval que especifica con qué frecuencia queremos generar un nuevo enemigo. Luego creamos un nuevo método llamado spawnEnemy que crea un nuevo enemigo y lo agrega a la matriz de enemigos y al escenario. Luego llamamos a este método cada milisegundos de enemigoSpawnInterval usando el método setInterval.

Genial, ahora tenemos enemigos que aparecen en la parte superior de la pantalla cada 2,5 segundos. Pero todavía no se mueven y no los vemos porque están fuera de la pantalla. Arreglemos eso.

Moviendo a los enemigos

Necesitamos actualizar la posición de los enemigos en el bucle del juego. Agrega el siguiente código al bucle de tu juego, justo debajo de donde actualizamos la posición de las viñetas:

for(let i = 0; i  app.screen.height   50) {
        app.stage.removeChild(enemy);
        enemies.splice(i, 1);
    }
}

Esta parte del código recorrerá todos los enemigos, actualizará su posición moviéndolos hacia abajo 2,5 píxeles y comprobará si están fuera de los límites. Si es así, los eliminamos del escenario y del conjunto de enemigos.

¡Lindo! Si ejecutas el juego ahora, verás que los enemigos aparecen en la parte superior de la pantalla y se mueven hacia abajo.

¡Ahora es el momento de derribarlos!

Disparar a los enemigos

Agrega el siguiente código al bucle de tu juego, justo debajo de donde actualizamos la posición de los enemigos:

for(let i = 0; i  enemy.x &&
            bullet.x  enemy.y &&
            bullet.y 


Esta parte del código recorrerá todas las balas y todos los enemigos y comprobará si una bala alcanza a un enemigo. Si es así, eliminamos tanto la bala como el enemigo del escenario y sus respectivos conjuntos.

Podrías optimizar este código saliendo del bucle interno cuando una bala alcance a un enemigo, pero por ahora, esto está bien. También puedes combinar el bucle de actualización de la posición de la bala con el bucle de verificación del impacto de la bala, pero me gusta mantenerlos separados para mayor claridad en este tutorial.

¡Y eso es! Ahora tienes un juego en el que puedes moverte hacia la izquierda y hacia la derecha, disparar balas y derribar enemigos. En la siguiente parte, agregaremos algunos elementos HUD al juego y realizaremos un seguimiento de la puntuación, el nivel y las vidas del jugador.


  
    

      
  
  
    

      
Configuración de PixiJS con Vite y TypeScript
      
Señor. Linxed ・ 20 de abril
      

        #webdev
        #javascript
        #principiantes
        #tutorial
      
    
  





  
    

      
  
  
    

      
Logra más con el "Cult of Done"
      
Señor. Linxed ・ 18 de febrero
      

        #productividad
        #principiantes
        #conversar
        #motivación
      
    
  





No olvides suscribirte a mi boletín para ser el primero en enterarte de tutoriales similares a estos.