Jogo de Empilhar Frutas com HTML, CSS e JavaScript

Introdução

Neste projeto, você aprenderá como criar um jogo simples de empilhamento de frutas usando HTML, CSS e JavaScript. O objetivo é empilhar as frutas que caem na parte superior da página na caixa na parte inferior. Se houver três frutas idênticas na caixa, elas serão removidas automaticamente.

👀 Pré-visualização

O efeito de eliminação se parece com isto:

O efeito não removível é o seguinte:

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o projeto abrindo os arquivos fornecidos no editor
• Como adicionar um manipulador de eventos de clique aos itens de frutas na parte superior da página
• Como implementar a lógica do jogo para adicionar, remover e eliminar os itens de frutas
• Como finalizar o projeto e testar a funcionalidade

🏆 Conquistas

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

• Usar jQuery para manipular o DOM (Document Object Model) e lidar com eventos
• Implementar a lógica básica do jogo usando JavaScript
• Criar uma interface de usuário simples e interativa
• Testar e depurar seu código para garantir a funcionalidade desejada

Configurar a Estrutura do Projeto

Nesta etapa, você configurará o projeto abrindo os arquivos fornecidos no editor.

1. Abra o editor e você deverá ver os seguintes arquivos: index.html, style.css, jquery.min.js e os arquivos de imagem.
2. Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.
3. Abra "Web 8080" na parte superior da VM e atualize-o manualmente para ver a página.

Adicionar o Manipulador de Evento de Clique

Nesta etapa, você adicionará o manipulador de evento de clique aos itens de frutas na parte superior da página.

1. No arquivo index.html, localize a seção TODO na tag <script>.
2. A tag <script> define um array vazio de variáveis ids dentro.

let ids = [];

$("#card li").on("click", function (e) {
  // TODO: Please implement the function here
});

3. Adicione o seguinte código dentro da seção TODO:

$("#card li").on("click", function (e) {
  // TODO: Please implement the function here
  if ($("#box li").length >= 7) {
    return;
  }
  let clone = $(this).clone();
  $("#box").append(clone);

  let currentId = $(this).data("id");
  ids.push($(this).data("id"));

  let currentIdLen = ids.filter((id) => id == currentId)?.length;

  if (currentIdLen == 3) {
    ids = ids.filter((id) => id !== currentId);
    let three = $(`#box li[data-id=${currentId}]`);
    for (let index = 0; index < three.length; index++) {
      const element = three[index];
      $(element).addClass("active");
      setTimeout(() => {
        element.remove();
      }, 200);
    }
  }

  $(this).css({
    top: "600px",
    left: "200px",
    opacity: 0,
    transition:
      "left .2s linear, top .2s cubic-bezier(.08,-0.35,.99,.33),opacity .2s linear"
  });
});

Este código adiciona um manipulador de evento de clique aos itens de frutas na parte superior da página. Quando um item de fruta é clicado, ele será clonado e adicionado à caixa na parte inferior da página. Se houver três frutas idênticas na caixa, elas serão removidas. Se o elemento do retângulo inferior (id=box) tiver 7 frutas e não puder ser eliminado, o nó do elemento de fruta clicado não será adicionado ao elemento do retângulo.

Finalizar o Projeto

Nesta etapa final, você completará o projeto adicionando os toques finais.

1. Teste o projeto clicando nos itens de frutas na parte superior da página. Verifique se as frutas são adicionadas à caixa e removidas se houver três idênticas. O efeito de eliminação se parece com isto:

2. Se a caixa tiver 7 frutas e nenhuma mais puder ser removida, clicar no item de fruta na parte superior não deverá ter efeito. O efeito não removível é o seguinte:

Parabéns! Você concluiu o projeto Fruit Stacker.

Resumo

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