Construa um Jogo de Adivinhar a Moeda

Introdução

Neste projeto, você aprenderá a construir um simples jogo "Adivinhe a Moeda" (Guess the Coin). O jogo envolve selecionar aleatoriamente três xícaras de nove xícaras para colocar moedas, e o jogador deve adivinhar as xícaras corretas inserindo os números correspondentes.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Implementar a função findNum para extrair números únicos da entrada do usuário.
• Implementar a função randomCoin para gerar três números aleatórios não repetidos entre 1 e 9.
• Compreender a estrutura de diretórios do projeto e os arquivos fornecidos.

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Trabalhar com funções e arrays JavaScript.
• Usar expressões regulares para extrair dados específicos de uma string.
• Gerar números aleatórios e garantir que sejam únicos.
• Seguir instruções passo a passo para concluir um projeto.

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

├── css
├── images
├── index.html
└── js
    ├── findCoin.js
    └── index.js

Onde:

• css é a pasta para arquivos de estilo.
• images é a pasta para arquivos de imagem.
• index.html é a página principal.
• js/index.js é o arquivo JavaScript para renderizar e animar as moedas.
• js/findCoin.js é o arquivo JavaScript que precisa ser completado.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Implementar a Função findNum

Nesta etapa, você implementará a função findNum no arquivo js/findCoin.js.

1. Abra o arquivo js/findCoin.js.

2. Localize a função findNum:

   // Compose an array of the input values 1-9
   function findNum(input_values) {
     // TODO
     const reg = /\d/g;
     const uniqueNumbers = [];
     const nums = input_values.match(reg) || [];
     nums.forEach((num) => {
       const parsedNum = parseInt(num);
       if (!isNaN(parsedNum) && !uniqueNumbers.includes(parsedNum)) {
         uniqueNumbers.push(parsedNum);
       }
     });
     return uniqueNumbers;
   }
   

3. A função findNum recebe um parâmetro input_values e retorna um array de números únicos (1-9) encontrados na entrada.

4. Implemente a função findNum seguindo estas etapas:

   • Use uma expressão regular /\d/g para encontrar todos os dígitos na string input_values.
   • Crie um array uniqueNumbers vazio para armazenar os números únicos.
   • Itere pelos números correspondentes e converta-os em inteiros usando parseInt.
   • Verifique se o número analisado é um número válido (não NaN) e se ainda não está no array uniqueNumbers.
   • Se o número for válido e único, adicione-o ao array uniqueNumbers.
   • Retorne o array uniqueNumbers.

Implementar a Função randomCoin

Nesta etapa, você implementará a função randomCoin no arquivo js/findCoin.js.

1. Localize a função randomCoin:

   let randomCoin = () => {
     let randomNumArr = [];
     // TODO
     while (randomNumArr.length < 3) {
       const randomNumber = Math.floor(Math.random() * 9) + 1;
       if (!randomNumArr.includes(randomNumber)) {
         randomNumArr.push(randomNumber);
       }
     }
     return randomNumArr;
   };
   

2. A função randomCoin deve gerar um array de 3 números aleatórios não repetidos entre 1 e 9.

3. Implemente a função randomCoin seguindo estas etapas:

   • Crie um array randomNumArr vazio para armazenar os números aleatórios.
   • Use um loop while para gerar 3 números aleatórios únicos entre 1 e 9.
   • Dentro do loop, gere um número aleatório usando Math.floor(Math.random() * 9) + 1.
   • Verifique se o número gerado ainda não está no array randomNumArr.
   • Se o número for único, adicione-o ao array randomNumArr.
   • Assim que o array randomNumArr tiver 3 números únicos, retorne o array.

Após concluir estas etapas, o jogo "Adivinhe a Moeda" deve estar totalmente funcional. Um gif de todas as funções concluídas é o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.