Soletrando o Futuro

Introdução

Neste projeto, você aprenderá como criar um jogo interativo de quebra-cabeça usando JavaScript. O jogo envolve reorganizar as peças do quebra-cabeça para reconstruir a imagem completa, proporcionando uma experiência envolvente e desafiadora para os jogadores.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o ambiente do projeto e entender a estrutura de arquivos.
• Como implementar a funcionalidade de arrastar e soltar (drag and drop) para as peças do quebra-cabeça.
• Como verificar a conclusão do quebra-cabeça e exibir uma mensagem de sucesso correspondente.
• Como testar o projeto concluído e garantir a funcionalidade correta do jogo.

🏆 Conquistas

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

• Criar um jogo interativo usando JavaScript.
• Entender os princípios da funcionalidade de arrastar e soltar (drag and drop) no desenvolvimento web.
• Implementar a lógica para verificar a conclusão de uma tarefa e fornecer feedback ao usuário.
• Ganhar experiência em trabalhar com o Document Object Model (DOM) e manipular elementos HTML.

Configurar o Ambiente do Projeto

Nesta etapa, você configurará o ambiente do projeto e entenderá a estrutura de arquivos.

1. Abra o ambiente de experimento e navegue até o diretório do projeto /home/labex/project.

2. A estrutura do diretório é a seguinte:

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

   • images é a pasta de imagens do projeto.
   • css é a pasta de estilos do projeto.
   • index.html é a página principal.
   • js/index.js é o arquivo JavaScript onde você precisa adicionar o código.

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

4. Abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Implementar a Funcionalidade de Arrastar e Soltar

Nesta etapa, você implementará a funcionalidade de arrastar e soltar (drag and drop) para as peças do quebra-cabeça.

1. No arquivo js/index.js, localize a função drop.

2. Dentro da função drop, adicione o seguinte código para trocar as imagens da peça do quebra-cabeça arrastada e da peça do quebra-cabeça alvo:

   // Check if the dragged puzzle piece is not the current target puzzle piece
   if (draggedPiece !== this) {
     // TODO
     // Save the current state of the dragged and target puzzle pieces
     let saveArr = [
       [draggedPiece.children[0].src, draggedPiece.children[0].dataset.id],
       [this.children[0].src, this.children[0].dataset.id]
     ];
   
     // Swap the src and data-id attributes of the images
     draggedPiece.children[0].src = saveArr[1][0];
     draggedPiece.children[0].dataset.id = saveArr[1][1];
     this.children[0].src = saveArr[0][0];
     this.children[0].dataset.id = saveArr[0][1];
   }
   
   // Reset the puzzle piece being dragged
   draggedPiece = null;
   

3. Este código primeiro verifica se a peça do quebra-cabeça arrastada não é a peça do quebra-cabeça alvo atual. Se for o caso, ele salva o estado atual das peças do quebra-cabeça arrastada e alvo, e então troca os atributos src e data-id das imagens.

Verificar a Conclusão do Puzzle

Nesta etapa, você implementará a lógica para verificar se o quebra-cabeça foi concluído com sucesso e mostrar ou ocultar a mensagem de sucesso de acordo.

1. No arquivo js/index.js, localize a função drop.

2. Na função drop, após o código que você adicionou na etapa anterior, adicione o seguinte código:

   if (draggedPiece !== this) {
     // TODO
     // ...
     // Get the data-id values of all the images in the puzzle container
     let imgDataIdList = [...container.getElementsByTagName("img")].map(
       (item) => item.dataset.id
     );
   
     // Check if the puzzle is completed
     if (imgDataIdList.join(",") === "1,2,3,4,5,6,7,8,9") {
       // Show the success message
       successMessage.classList.remove("hide");
       successMessage.classList.add("show");
     } else {
       // Hide the success message
       successMessage.classList.remove("show");
       successMessage.classList.add("hide");
     }
   }
   

3. Este código primeiro obtém os valores data-id de todas as imagens no contêiner do quebra-cabeça e verifica se eles estão na ordem correta (1 a 9). Se estiverem, ele mostra a mensagem de sucesso removendo a classe hide e adicionando a classe show ao elemento da mensagem de sucesso. Caso contrário, ele oculta a mensagem de sucesso removendo a classe show e adicionando a classe hide.

Testar o Projeto Concluído

1. Atualize a página para ver o estado inicial do quebra-cabeça.
2. Tente arrastar e soltar as peças do quebra-cabeça para reorganizá-las.
3. Observe a mensagem de sucesso aparecendo ou desaparecendo com base na conclusão do quebra-cabeça.
4. Certifique-se de que as peças do quebra-cabeça foram trocadas corretamente e que os atributos src e data-id das imagens foram atualizados de acordo.

O efeito após a conclusão é o seguinte:

Parabéns! Você implementou com sucesso o jogo de quebra-cabeça usando o código fornecido. Sinta-se à vontade para explorar o projeto ainda mais e experimentar recursos ou aprimoramentos adicionais.

Resumo

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