8.7 KiB

Raw Permalink Blame History

Construir um Jogo Espacial Parte 6: Fim e Reinício

Questionário Pré-Aula

Existem diferentes formas de expressar uma condição de fim num jogo. Cabe a ti, como criador do jogo, decidir por que razão o jogo termina. Aqui estão algumas razões, assumindo que estamos a falar do jogo espacial que tens vindo a construir até agora:

N Naves inimigas foram destruídas: É bastante comum, se dividires o jogo em diferentes níveis, que seja necessário destruir N naves inimigas para completar um nível.
A tua nave foi destruída: Existem jogos em que perdes o jogo se a tua nave for destruída. Outra abordagem comum é ter o conceito de vidas. Cada vez que a tua nave é destruída, perde-se uma vida. Quando todas as vidas forem perdidas, o jogo termina.
Colecionaste N pontos: Outra condição de fim comum é colecionar pontos. Como obténs os pontos depende de ti, mas é bastante comum atribuir pontos a várias atividades, como destruir uma nave inimiga ou talvez colecionar itens que são largados quando são destruídos.
Completar um nível: Isto pode envolver várias condições, como destruir X naves inimigas, colecionar Y pontos ou talvez obter um item específico.

Reinício

Se as pessoas gostarem do teu jogo, é provável que queiram jogá-lo novamente. Quando o jogo termina, seja qual for o motivo, deves oferecer uma alternativa para reiniciar.

✅ Pensa um pouco sobre as condições em que achas que um jogo termina e como és incentivado a reiniciá-lo.

O que construir

Vais adicionar estas regras ao teu jogo:

Vencer o jogo. Quando todas as naves inimigas forem destruídas, ganhas o jogo. Além disso, exibe uma mensagem de vitória.
Reinício. Quando todas as vidas forem perdidas ou o jogo for vencido, deves oferecer uma forma de reiniciar o jogo. Lembra-te! Vais precisar de reinicializar o jogo e limpar o estado anterior.

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
  -| life.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. O teu jogo deve estar num estado jogável.

dica: para evitar avisos no Visual Studio Code, edita a função window.onload para chamar gameLoopId como está (sem let) e declara o gameLoopId no topo do ficheiro, independentemente: let gameLoopId;

Adicionar código

Rastrear condição de fim. Adiciona código que rastreia o número de inimigos ou se a nave do herói foi destruída, adicionando estas duas funções:

function isHeroDead() {
  return hero.life <= 0;
}

function isEnemiesDead() {
  const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
  return enemies.length === 0;
}

Adicionar lógica aos manipuladores de mensagens. Edita o eventEmitter para lidar com estas condições:

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

    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
    enemy.dead = true;
    hero.decrementLife();
    if (isHeroDead())  {
      eventEmitter.emit(Messages.GAME_END_LOSS);
      return; // loss before victory
    }
    if (isEnemiesDead()) {
      eventEmitter.emit(Messages.GAME_END_WIN);
    }
});

eventEmitter.on(Messages.GAME_END_WIN, () => {
    endGame(true);
});

eventEmitter.on(Messages.GAME_END_LOSS, () => {
  endGame(false);
});

Adicionar novos tipos de mensagens. Adiciona estas mensagens ao objeto de constantes:
```
GAME_END_LOSS: "GAME_END_LOSS",
GAME_END_WIN: "GAME_END_WIN",
```
Adicionar código de reinício que reinicia o jogo ao pressionar um botão selecionado.
1. Ouvir a tecla Enter. Edita o eventListener da tua janela para ouvir esta tecla:
```
 else if(evt.key === "Enter") {
    eventEmitter.emit(Messages.KEY_EVENT_ENTER);
  }
```
1. Adicionar mensagem de reinício. Adiciona esta mensagem às constantes de mensagens:
```
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
```

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

Condição de vitória do jogador. Quando todas as naves inimigas forem destruídas, exibe uma mensagem de vitória.

Primeiro, cria uma função displayMessage():

function displayMessage(message, color = "red") {
  ctx.font = "30px Arial";
  ctx.fillStyle = color;
  ctx.textAlign = "center";
  ctx.fillText(message, canvas.width / 2, canvas.height / 2);
}

Cria uma função endGame():

function endGame(win) {
  clearInterval(gameLoopId);

  // set a delay so we are sure any paints have finished
  setTimeout(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    if (win) {
      displayMessage(
        "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
        "green"
      );
    } else {
      displayMessage(
        "You died !!! Press [Enter] to start a new game Captain Pew Pew"
      );
    }
  }, 200)  
}

Lógica de reinício. Quando todas as vidas forem perdidas ou o jogador vencer o jogo, exibe que o jogo pode ser reiniciado. Além disso, reinicia o jogo quando a tecla de reinício for pressionada (podes decidir qual tecla será mapeada para reinício).

Cria a função resetGame():

function resetGame() {
  if (gameLoopId) {
    clearInterval(gameLoopId);
    eventEmitter.clear();
    initGame();
    gameLoopId = setInterval(() => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      drawPoints();
      drawLife();
      updateGameObjects();
      drawGameObjects(ctx);
    }, 100);
  }
}

Adiciona uma chamada ao eventEmitter para reiniciar o jogo em initGame():

eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
  resetGame();
});

Adiciona uma função clear() ao EventEmitter:
```
clear() {
  this.listeners = {};
}
```

👽 💥 🚀 Parabéns, Capitão! O teu jogo está completo! Muito bem! 🚀 💥 👽

🚀 Desafio

Adiciona um som! Consegues adicionar um som para melhorar a jogabilidade, talvez quando houver um disparo de laser, ou quando o herói morrer ou vencer? Dá uma olhada neste sandbox para aprender como tocar som usando JavaScript.

Questionário Pós-Aula

Questionário pós-aula

Revisão & Estudo Individual

A tua tarefa é criar um novo jogo de exemplo, por isso explora alguns jogos interessantes por aí para ver que tipo de jogo podes construir.

Tarefa

Criar um Jogo de Exemplo

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, é importante ter em conta 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.

8.7 KiB Raw Permalink Blame History