7.3 KiB

Raw Permalink Blame History

Construindo um Jogo Espacial Parte 5: Pontuação e Vidas

Quiz Pré-Aula

Nesta lição, você aprenderá como adicionar pontuação a um jogo e calcular vidas.

Exibir texto na tela

Para exibir a pontuação do jogo na tela, você precisará saber como colocar texto na tela. A resposta é usar o método fillText() no objeto canvas. Você também pode controlar outros aspectos, como qual fonte usar, a cor do texto e até mesmo seu alinhamento (esquerda, direita, centro). Abaixo está um código que desenha texto na tela.

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ Leia mais sobre como adicionar texto a um canvas e sinta-se à vontade para deixar o seu mais estiloso!

Vida, como um conceito de jogo

O conceito de ter vidas em um jogo é apenas um número. No contexto de um jogo espacial, é comum atribuir um conjunto de vidas que são deduzidas uma a uma quando sua nave sofre dano. É interessante mostrar uma representação gráfica disso, como mini-naves ou corações, em vez de apenas um número.

O que construir

Vamos adicionar o seguinte ao seu jogo:

Pontuação do jogo: Para cada nave inimiga destruída, o herói deve ganhar alguns pontos. Sugerimos 100 pontos por nave. A pontuação do jogo deve ser exibida no canto inferior esquerdo.
Vidas: Sua nave tem três vidas. Você perde uma vida toda vez que uma nave inimiga colide com você. A contagem de vidas deve ser exibida no canto inferior direito e ser composta pelo seguinte gráfico .

Passos recomendados

Localize os arquivos que foram criados para você na subpasta your-work. Ela deve conter o seguinte:

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

Você inicia seu projeto na pasta your_work digitando:

cd your-work
npm start

O comando acima iniciará um servidor HTTP no endereço http://localhost:5000. Abra um navegador e insira esse endereço. No momento, ele deve renderizar o herói e todos os inimigos, e, ao pressionar as setas esquerda e direita, o herói se move e pode derrubar inimigos.

Adicionar código

Copie os recursos necessários da pasta solution/assets/ para a pasta your-work; você adicionará o recurso life.png. Adicione o lifeImg à função window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Adicione o lifeImg à lista de recursos:

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

Adicione variáveis. Adicione código que represente sua pontuação total (0) e vidas restantes (3), exibindo essas pontuações na tela.

Estenda a função updateGameObjects(). Estenda a função updateGameObjects() para lidar com colisões de inimigos:

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

Adicione vidas e pontos.

Inicialize variáveis. Sob this.cooldown = 0 na classe Hero, defina vidas e pontos:
```
this.life = 3;
this.points = 0;
```

Exiba variáveis na tela. Desenhe esses valores na tela:

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

Adicione métodos ao loop do jogo. Certifique-se de adicionar essas funções à sua função window.onload sob updateGameObjects():
```
drawPoints();
drawLife();
```

Implemente as regras do jogo. Implemente as seguintes regras do jogo:

Para cada colisão entre herói e inimigo, deduza uma vida.

Estenda a classe Hero para realizar essa dedução:

decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}

Para cada laser que atinge um inimigo, aumente a pontuação do jogo em 100 pontos.

Estenda a classe Hero para realizar esse incremento:

  incrementPoints() {
    this.points += 100;
  }

Adicione essas funções aos emissores de eventos de colisão:

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});

✅ Faça uma pequena pesquisa para descobrir outros jogos criados usando JavaScript/Canvas. Quais são suas características comuns?

Ao final deste trabalho, você deverá ver as pequenas naves de 'vida' no canto inferior direito, os pontos no canto inferior esquerdo, e deverá ver sua contagem de vidas diminuir conforme colide com inimigos e sua pontuação aumentar ao atirar nos inimigos. Muito bem! Seu jogo está quase completo.

🚀 Desafio

Seu código está quase completo. Consegue imaginar os próximos passos?

Quiz Pós-Aula

Quiz pós-aula

Revisão e Autoestudo

Pesquise algumas maneiras de incrementar e decrementar pontuações e vidas em jogos. Existem alguns motores de jogo interessantes, como PlayFab. Como o uso de um desses poderia melhorar seu jogo?

Tarefa

Construa um Jogo de Pontuação

Aviso Legal:
Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automatizadas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações equivocadas decorrentes do uso desta tradução.

7.3 KiB Raw Permalink Blame History