Web-Dev-For-Beginners/translations/pt/6-space-game/5-keeping-score

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

Questionário Pré-Aula

Questionário pré-aula

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

Desenhar texto no ecrã

Para conseguir mostrar a pontuação do jogo no ecrã, precisas de saber como colocar texto no ecrã. A resposta é usar o método fillText() no objeto canvas. Também podes controlar outros aspetos, como o tipo de letra a usar, a cor do texto e até o alinhamento (esquerda, direita, centro). Abaixo está um exemplo de código que desenha texto no ecrã.

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

✅ Lê mais sobre como adicionar texto a um canvas e sente-te à vontade para tornar o teu texto mais estiloso!

Vida, como conceito de jogo

O conceito de ter vidas num 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 a tua nave sofre danos. É 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 teu jogo:

• Pontuação do jogo: Por 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.
• Vida: A tua nave tem três vidas. Perdes uma vida sempre que uma nave inimiga colide contigo. A pontuação de vidas deve ser exibida no canto inferior direito e ser composta pelo seguinte gráfico .

Passos recomendados

Localiza os ficheiros que foram criados para ti na subpasta your-work. Deve conter o seguinte:

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

Inicia o teu projeto na pasta your_work digitando:

cd your-work
npm start

O comando acima iniciará um servidor HTTP no endereço http://localhost:5000. Abre um navegador e insere esse endereço. Neste momento, deve renderizar o herói e todos os inimigos, e ao pressionares as setas esquerda e direita, o herói move-se e pode disparar contra os inimigos.

Adicionar código

1. Copiar os recursos necessários da pasta solution/assets/ para a pasta your-work; vais adicionar o recurso life.png. Adiciona o lifeImg à função window.onload:

   lifeImg = await loadTexture("assets/life.png");
   

2. Adiciona o lifeImg à lista de recursos:

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

3. Adicionar variáveis. Adiciona código que represente a pontuação total (0) e as vidas restantes (3), exibindo estas pontuações no ecrã.

4. Estender a função updateGameObjects(). Estende 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 });
       }
     })
   

5. Adicionar vida e pontos.

   1. Inicializar variáveis. Sob this.cooldown = 0 na classe Hero, define vida e pontos:

      this.life = 3;
      this.points = 0;
      

   2. Desenhar variáveis no ecrã. Desenha estes valores no ecrã:

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

   3. Adicionar métodos ao loop do jogo. Certifica-te de que adicionas estas funções à função window.onload sob updateGameObjects():

      drawPoints();
      drawLife();
      

6. Implementar regras do jogo. Implementa as seguintes regras do jogo:

   1. Por cada colisão entre herói e inimigo, deduz uma vida.

      Estende a classe Hero para fazer esta dedução:

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

   2. Por cada laser que atinge um inimigo, aumenta a pontuação do jogo em 100 pontos.

      Estende a classe Hero para fazer este incremento:

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

      Adiciona estas 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();
      });
      

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

Ao final deste trabalho, deverás ver as pequenas naves de 'vida' no canto inferior direito, os pontos no canto inferior esquerdo, e deverás ver a contagem de vidas a diminuir à medida que colides com inimigos e os pontos a aumentar quando disparas contra inimigos. Muito bem! O teu jogo está quase completo.

---

🚀 Desafio

O teu código está quase completo. Consegues imaginar os próximos passos?

Questionário Pós-Aula

Questionário pós-aula

Revisão & Estudo Individual

Pesquisa algumas formas de incrementar e decrementar pontuações e vidas em jogos. Existem motores de jogo interessantes como o PlayFab. Como é que usar um destes poderia melhorar o teu jogo?

Tarefa

Construir 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, tenha em atenção que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. 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 incorretas decorrentes da utilização desta tradução.