Na última parte criamos a nave do jogador e a fizemos se mover. Nesta parte criaremos os inimigos e faremos com que eles se movam. E então vamos derrubá-los!

Criando os inimigos

Faremos algo semelhante a quando criamos os marcadores. Vamos criar um modelo de inimigo que clonaremos toda vez que quisermos criar um novo inimigo. Também precisamos acompanhar os inimigos por meio de uma matriz porque pode haver mais de um ao mesmo tempo.

Mas primeiro, criaremos o método que cria o inimigo. Adicione o seguinte código após o 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 você pode ver, é muito semelhante ao método createBullet. Criamos um inimigo modelo que clonamos toda vez que queremos criar um novo inimigo. Em seguida, posicionamos o inimigo em uma posição x aleatória no topo da tela. O inimigo tem o mesmo formato da nave do jogador, mas é vermelho e de cabeça para baixo.

Especificamos o local de spawn do inimigo definindo as propriedades x e y. A propriedade x é definida com um valor aleatório entre 25 e 480 - 50, para que o inimigo esteja sempre dentro da tela do jogo. A propriedade y é definida como -50, para que o inimigo fique fora da tela e se mova para dentro dela.

Em seguida, precisamos chamar esse método para criar um novo inimigo a cada poucos segundos.

Gerando inimigos

Usaremos o método setInterval para isso. Adicione o seguinte código logo após onde definimos o array de marcadores:

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();

Criamos um novo array chamado inimigos para rastrear todos os inimigos. Em seguida, criamos uma nova variável chamada inimigoSpawnInterval que especifica com que frequência queremos gerar um novo inimigo. Em seguida, criamos um novo método chamado spawnEnemy que cria um novo inimigo e o adiciona ao array de inimigos e ao cenário. Em seguida, chamamos esse método a cada milissegundos inimigoSpawnInterval usando o método setInterval.

Legal, agora temos inimigos surgindo no topo da tela a cada 2,5 segundos. Mas eles ainda não estão se movendo e não os vemos porque estão fora da tela. Vamos consertar isso.

Movendo os inimigos

Precisamos atualizar a posição dos inimigos no loop do jogo. Adicione o seguinte código ao loop do jogo, logo abaixo de onde atualizamos a posição dos marcadores:

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

Esta parte do código irá percorrer todos os inimigos, atualizar sua posição movendo-os 2,5 pixels para baixo e verificar se eles estão fora dos limites. Se estiverem, nós os removemos do palco e da formação de inimigos.

Legal! se você executar o jogo agora, verá inimigos surgindo no topo da tela e descendo.

Agora é hora de derrubá-los!

Atirando nos inimigos

Adicione o seguinte código ao loop do jogo, logo abaixo de onde atualizamos a posição dos inimigos:

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


Esta parte do código irá percorrer todas as balas e todos os inimigos e verificar se uma bala atinge um inimigo. Se isso acontecer, removemos a bala e o inimigo do cenário e suas respectivas matrizes.

Você poderia otimizar esse código saindo do loop interno quando uma bala atinge um inimigo, mas por enquanto, tudo bem. Você também pode combinar o loop de atualização da posição do marcador com o loop de verificação de acerto do marcador, mas gosto de mantê-los separados para maior clareza deste tutorial.

E é isso! Agora você tem um jogo onde pode mover-se para a esquerda e para a direita, disparar balas e abater inimigos. Na próxima parte, adicionaremos alguns elementos de HUD ao jogo e acompanharemos a pontuação, o nível e a vida do jogador.






      

    
      
Configuração PixiJS com Vite e TypeScript

      
Senhor. Linxed ・ 20 de abril

      
        #webdev
        #javascript
        #iniciantes
        #tutorial
      

    
  





  
    

      

    
      
Realize mais com o "Culto do Feito"

      
Senhor. Linxed ・ 18 de fevereiro

      
        #produtividade
        #iniciantes
        #discutir
        #motivação
      

    
  







Não se esqueça de se inscrever na minha newsletter para ser o primeiro a saber sobre tutoriais semelhantes a estes.