9.3 KiB

Raw Blame History

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

Quiz Pré-Aula

Pronto para fazer seu jogo espacial parecer um jogo de verdade? Vamos adicionar pontuação e gerenciar vidas - as mecânicas principais que transformaram os primeiros jogos de arcade, como Space Invaders, de simples demonstrações em entretenimento viciante. É aqui que seu jogo se torna realmente jogável.

Exibindo Texto na Tela - A Voz do Seu Jogo

Para exibir sua pontuação, precisamos aprender como renderizar texto no canvas. O método fillText() é sua principal ferramenta para isso - é a mesma técnica usada nos jogos de arcade clássicos para mostrar pontuações e informações de status.

Você tem controle total sobre a aparência do texto:

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

✅ Explore mais sobre como adicionar texto a um canvas - você pode se surpreender com o quão criativo pode ser com fontes e estilos!

Vidas - Mais do que Apenas um Número

No design de jogos, uma "vida" representa a margem de erro do jogador. Esse conceito remonta às máquinas de pinball, onde você tinha várias bolas para jogar. Em jogos de vídeo antigos como Asteroids, vidas davam aos jogadores permissão para correr riscos e aprender com os erros.

A representação visual é muito importante - exibir ícones de naves em vez de apenas "Vidas: 3" cria um reconhecimento visual imediato, semelhante à forma como os gabinetes de arcade antigos usavam iconografia para se comunicar além das barreiras linguísticas.

Construindo o Sistema de Recompensas do Seu Jogo

Agora vamos implementar os sistemas de feedback principais que mantêm os jogadores engajados:

Sistema de pontuação: Cada nave inimiga destruída concede 100 pontos (números redondos são mais fáceis para os jogadores calcularem mentalmente). A pontuação será exibida no canto inferior esquerdo.
Contador de vidas: Seu herói começa com três vidas - um padrão estabelecido pelos jogos de arcade antigos para equilibrar desafio e jogabilidade. Cada colisão com um inimigo custa uma vida. Vamos exibir as vidas restantes no canto inferior direito usando ícones de naves .

Vamos Começar!

Primeiro, configure seu ambiente de trabalho. Navegue até os arquivos na subpasta your-work. Você deve ver os seguintes arquivos:

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

Para testar seu jogo, inicie o servidor de desenvolvimento a partir da pasta your_work:

cd your-work
npm start

Isso executa um servidor local em http://localhost:5000. Abra este endereço no seu navegador para ver seu jogo. Teste os controles com as teclas de seta e tente atirar nos inimigos para verificar se tudo está funcionando.

Hora de Codificar!

Pegue os recursos visuais necessários. Copie o arquivo life.png da pasta solution/assets/ para sua pasta your-work. Depois, adicione o lifeImg à função window.onload:
```
lifeImg = await loadTexture("assets/life.png");
```

Não se esqueça de adicionar o lifeImg à sua lista de recursos:

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

Configure as variáveis do jogo. Adicione algum código para rastrear sua pontuação total (começando em 0) e vidas restantes (começando em 3). Vamos exibir essas informações na tela para que os jogadores sempre saibam sua situação.

Implemente a detecção de colisão. Estenda sua função updateGameObjects() para detectar quando inimigos colidem com seu herói:

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

Adicione rastreamento de vidas e pontos ao seu Herói.

Inicialize os contadores. Sob this.cooldown = 0 na sua classe Hero, configure vidas e pontos:
```
this.life = 3;
this.points = 0;
```

Mostre esses valores ao jogador. Crie funções para desenhar 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);
}

Conecte tudo ao loop do jogo. Adicione essas funções à sua função window.onload logo após updateGameObjects():
```
drawPoints();
drawLife();
```

Implemente consequências e recompensas no jogo. Agora vamos adicionar os sistemas de feedback que tornam as ações do jogador significativas:
1. Colisões custam vidas. Toda vez que seu herói colidir com um inimigo, você deve perder uma vida.
  
  Adicione este método à sua classe Hero:
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```
2. Atirar nos inimigos concede pontos. Cada acerto bem-sucedido concede 100 pontos, proporcionando um feedback positivo imediato para tiros precisos.
  
  Estenda sua classe Hero com este método de incremento:
```
  incrementPoints() {
    this.points += 100;
  }
```
  Agora conecte essas funções aos 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();
});
```

✅ Curioso sobre outros jogos criados com JavaScript e Canvas? Faça algumas explorações - você pode se surpreender com o que é possível!

Depois de implementar esses recursos, teste seu jogo para ver o sistema de feedback completo em ação. Você deve ver ícones de vidas no canto inferior direito, sua pontuação no canto inferior esquerdo, e observar como as colisões reduzem vidas enquanto os tiros bem-sucedidos aumentam sua pontuação.

Seu jogo agora tem as mecânicas essenciais que tornaram os primeiros jogos de arcade tão envolventes - objetivos claros, feedback imediato e consequências significativas para as ações do jogador.

Desafio do Agente GitHub Copilot 🚀

Use o modo Agent para completar o seguinte desafio:

Descrição: Melhore o sistema de pontuação do jogo espacial implementando um recurso de pontuação máxima com armazenamento persistente e mecânicas de pontuação bônus.

Prompt: Crie um sistema de pontuação máxima que salve a melhor pontuação do jogador no localStorage. Adicione pontos bônus para mortes consecutivas de inimigos (sistema de combo) e implemente valores de pontos diferentes para tipos diferentes de inimigos. Inclua um indicador visual quando o jogador alcançar uma nova pontuação máxima e exiba a pontuação máxima atual na tela do jogo.

🚀 Desafio

Agora você tem um jogo funcional com pontuação e vidas. Considere quais recursos adicionais podem melhorar a experiência do jogador.

Quiz Pós-Aula

Quiz pós-aula

Revisão & Autoestudo

Quer explorar mais? Pesquise diferentes abordagens para sistemas de pontuação e vidas em jogos. Existem motores de jogos fascinantes como PlayFab que lidam com pontuação, rankings e progressão de jogadores. Como integrar algo assim poderia levar seu jogo para o próximo nível?

Tarefa

Construa um Jogo de Pontuação

Aviso Legal:
Este documento foi traduzido usando 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 humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.

9.3 KiB Raw Blame History