Dibuja un futuro

Introducción

En este proyecto, aprenderás a crear un juego de rompecabezas interactivo utilizando JavaScript. El juego consiste en reorganizar las piezas del rompecabezas para reconstruir la imagen completa, brindando una experiencia atractiva y desafiante para los jugadores.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el entorno del proyecto y entender la estructura de archivos.
• Cómo implementar la funcionalidad de arrastrar y soltar para las piezas del rompecabezas.
• Cómo comprobar la terminación del rompecabezas y mostrar un mensaje de éxito en consecuencia.
• Cómo probar el proyecto completado y asegurar la correcta funcionalidad del juego.

🏆 Logros

Después de completar este proyecto, podrás:

• Crear un juego interactivo utilizando JavaScript.
• Entender los principios de la funcionalidad de arrastrar y soltar en el desarrollo web.
• Implementar la lógica para comprobar la terminación de una tarea y proporcionar retroalimentación al usuario.
• Adquirir experiencia en el trabajo con el Modelo de Objeto del Documento (DOM) y la manipulación de elementos HTML.

Configurar el entorno del proyecto

En este paso, configurarás el entorno del proyecto y entenderás la estructura de archivos.

1. Abra el entorno de experimentación y navegue hasta el directorio del proyecto /home/labex/project.

2. La estructura de directorios es la siguiente:

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

   • images es la carpeta de imágenes del proyecto.
   • css es la carpeta de estilos del proyecto.
   • index.html es la página principal.
   • js/index.js es el archivo JavaScript donde debes agregar el código.

3. Haga clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.

4. Abra "Web 8080" en la parte superior de la VM y actualice manualmente para ver la página.

Implementar la funcionalidad de arrastrar y soltar

En este paso, implementarás la funcionalidad de arrastrar y soltar para las piezas del rompecabezas.

1. En el archivo js/index.js, localiza la función drop.

2. Dentro de la función drop, agrega el siguiente código para intercambiar las imágenes de la pieza del rompecabezas arrastrada y la pieza del rompecabezas destino:

   // Comprueba si la pieza del rompecabezas arrastrada no es la pieza del rompecabezas destino actual
   if (draggedPiece !== this) {
     // TODO
     // Guarda el estado actual de las piezas del rompecabezas arrastrada y destino
     let saveArr = [
       [draggedPiece.children[0].src, draggedPiece.children[0].dataset.id],
       [this.children[0].src, this.children[0].dataset.id]
     ];
   
     // Intercambia los atributos src y data-id de las imágenes
     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];
   }
   
   // Restablece la pieza del rompecabezas que se está arrastrando
   draggedPiece = null;

3. Este código primero comprueba si la pieza del rompecabezas arrastrada no es la pieza del rompecabezas destino actual. Si es así, guarda el estado actual de las piezas del rompecabezas arrastrada y destino, luego intercambia los atributos src y data-id de las imágenes.

Verificar la terminación del rompecabezas

En este paso, implementarás la lógica para comprobar si el rompecabezas se ha completado con éxito y mostrar o ocultar el mensaje de éxito en consecuencia.

1. En el archivo js/index.js, localiza la función drop.

2. En la función drop, después del código que agregaste en el paso anterior, agrega el siguiente código:

   if (draggedPiece !== this) {
     // TODO
     //...
     // Obtiene los valores de data-id de todas las imágenes en el contenedor del rompecabezas
     let imgDataIdList = [...container.getElementsByTagName("img")].map(
       (item) => item.dataset.id
     );
   
     // Comprueba si el rompecabezas está completado
     if (imgDataIdList.join(",") === "1,2,3,4,5,6,7,8,9") {
       // Muestra el mensaje de éxito
       successMessage.classList.remove("hide");
       successMessage.classList.add("show");
     } else {
       // Oculta el mensaje de éxito
       successMessage.classList.remove("show");
       successMessage.classList.add("hide");
     }
   }

3. Este código primero obtiene los valores de data-id de todas las imágenes en el contenedor del rompecabezas y comprueba si están en el orden correcto (del 1 al 9). Si es así, muestra el mensaje de éxito quitando la clase hide y agregando la clase show al elemento del mensaje de éxito. En caso contrario, oculta el mensaje de éxito quitando la clase show y agregando la clase hide.

Probar el proyecto completado

1. Actualiza la página para ver el estado inicial del rompecabezas.
2. Intenta arrastrar y soltar las piezas del rompecabezas para reorganizarlas.
3. Observa cómo el mensaje de éxito aparece o desaparece según la terminación del rompecabezas.
4. Asegúrate de que las piezas del rompecabezas se intercambien correctamente y que los atributos src y data-id de las imágenes se actualicen en consecuencia.

El efecto después de la terminación es el siguiente:

¡Felicitaciones! Has implementado con éxito el juego de rompecabezas utilizando el código proporcionado. Siente la libertad de explorar el proyecto más profundamente y experimentar con características adicionales o mejoras.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.