44º Desafio: Capture o Inseto - Peso 3

iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Opa, crianças inocentes! Hoje vamos falar sobre um desafio super divertido: construir um pequeno game de captura de insetos. Mas vocês devem estar se perguntando: "Qual a importância disso tudo em desenvolvimento web?". Pois bem, jogos são uma ótima forma de engajar os usuários e manter o site ou aplicativo em destaque. Eles ajudam a criar uma experiência mais interativa e atraente para o usuário, aumentando assim o tempo de permanência no site e até mesmo gerando mais receita.

Agora, para que o jogo funcione corretamente, vocês precisam saber que devem utilizar comandos de CSS para definir a posição e o estilo dos insetos na tela. Além disso, devem utilizar JavaScript para controlar a aparição dos insetos e para registrar as capturas feitas pelo usuário.

Uma dica importante para controlar a quantidade de insetos na tela é utilizar o comando setInterval() do JavaScript, que permite executar uma função a cada intervalo de tempo determinado. Assim, é possível definir um intervalo para a aparição dos insetos, o usuário deve clicar no inseto para simular sua captura evitando que a tela fique sobrecarregada e prejudique a jogabilidade.

Outra dica interessante é utilizar o comando Math.random() do JavaScript para definir a posição aleatória dos insetos na tela. Isso dá um toque de imprevisibilidade ao jogo, tornando-o mais desafiador e divertido.

Bom, agora é hora de colocar as mãos na massa e criar esse game super divertido de captura de insetos! Lembrem-se de utilizar a criatividade e de se divertir no processo de desenvolvimento. Boa sorte!

Exemplo

https://user-images.githubusercontent.com/30157522/224551658-14619b36-1f6a-4ad1-afdb-abbbcfe01de8.mp4

Additional tips

Código HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Catch The Insect</title>
  </head>
  <body>
    <div class="screen">
      <h1>Catch The Insect</h1>
      <button class="btn" id="start-btn">Play Game</button>
    </div>

    <div class="screen">
      <h1>What is your "favorite" insect?</h1>
      <ul class="insects-list">
        <li>
          <button class="choose-insect-btn">
            <p>Fly</p>
            <img src="fly.png" alt="fly">
          </button>
        </li>
        <li>
          <button class="choose-insect-btn">
            <p>Mosquito</p>
            <img
               src="mosquito.png"
               alt="mosquito"
               />
          </button>
        </li>
        <li>
          <button class="choose-insect-btn">
            <p>Spider</p>
            <img
               src="spider.png"
               alt="spider"
               />
          </button>
        </li>
        <li>
          <button class="choose-insect-btn">
            <p>Roach</p>
            <img
               src="roach.png"
               alt="roach"
               />
          </button>
        </li>
      </ul>
    </div>

    <div class="screen game-container" id="game-container">
      <h3 id="time" class="time">Time: 00:00</h3>
      <h3 id="score" class="score">Score: 0</h3>
      <h5 id="message" class="message">
        Are you annnoyed yet? <br>
        You are playing an impossible game!!
      </h5>
    </div>

    <script src="script.js"></script>
  </body>
</html>

apauloenzo commented 1 year ago

desafio inseto.zip Equipe: Flasco

simonebreeman commented 1 year ago

Equipe Resistech Alunas: Lorenna Guedes e Simone Breeman

Explicação da Tarefa: Fizemos um jogo simples, chamado "Captura de baratas" em que o objetivo é clicar nas baratas que aparecem na tela para ganhar pontos. O jogo é composto de uma área retangular (representando o chão) onde as baratas aparecem e se movem. O jogador tem 30 segundos para capturar o máximo de baratas possível antes do fim do jogo. A pontuação do jogador é mostrada no final do jogo em um alerta.

O jogo é implementado em JavaScript, HTML e CSS. O código HTML define a estrutura básica da página, enquanto o CSS é usado para estilizar a aparência da página. O JavaScript é usado para manipular o DOM (Document Object Model) e para controlar a lógica do jogo. As baratas são criadas dinamicamente usando JavaScript e são removidas após um certo período de tempo. A cada segundo, o contador de tempo é atualizado e, quando o tempo acaba, o jogo termina. O jogo é iniciado quando a página é carregada.

Desafio 44.zip

iurygdeoliveira / Web-development-classes