Juego de apilamiento de frutas con HTML, CSS, JavaScript

Introducción

En este proyecto, aprenderás a crear un sencillo juego de apilamiento de frutas utilizando HTML, CSS y JavaScript. El objetivo es apilar los elementos de fruta que caen en la parte superior de la página en la caja ubicada en la parte inferior. Si hay tres frutas idénticas en la caja, se eliminarán automáticamente.

👀 Vista previa

El efecto eliminable se ve así:

El efecto no eliminable es el siguiente:

🎯 Tareas

En este proyecto, aprenderás:

• Cómo configurar el proyecto abriendo los archivos proporcionados en el editor
• Cómo agregar un controlador de eventos de clic a los elementos de fruta en la parte superior de la página
• Cómo implementar la lógica del juego para agregar, eliminar y eliminar los elementos de fruta
• Cómo finalizar el proyecto y probar la funcionalidad

🏆 Logros

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

• Utilizar jQuery para manipular el DOM y manejar eventos
• Implementar la lógica básica del juego utilizando JavaScript
• Crear una interfaz de usuario simple e interactiva
• Probar y depurar tu código para garantizar la funcionalidad deseada

Configura la estructura del proyecto

En este paso, configurarás el proyecto abriendo los archivos proporcionados en el editor.

1. Abre el editor y deberías ver los siguientes archivos: index.html, style.css, jquery.min.js y los archivos de imágenes.
2. Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.
3. Abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Agrega el manejador de eventos de clic

En este paso, agregará el controlador de eventos de clic a los elementos de fruta en la parte superior de la página.

1. En el archivo index.html, localice la sección TODO en la etiqueta <script>.
2. La etiqueta <script> establece una matriz vacía de variables ids dentro.

let ids = [];

$("#card li").on("click", function (e) {
  // TODO: Por favor, implemente la función aquí
});

3. Agregue el siguiente código dentro de la sección TODO:

$("#card li").on("click", function (e) {
  // TODO: Por favor, implemente la función aquí
  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 agrega un controlador de eventos de clic a los elementos de fruta en la parte superior de la página. Cuando se hace clic en un elemento de fruta, se clonará y se agregará a la caja en la parte inferior de la página. Si hay tres frutas idénticas en la caja, se eliminarán. Si el elemento del rectángulo inferior (id=box) tiene 7 frutas y no se pueden eliminar, el nodo de elemento de fruta clicado no está en el elemento de rectángulo agregado.

Finaliza el proyecto

En este último paso, completarás el proyecto agregando los toques finales.

1. Prueba el proyecto haciendo clic en los elementos de fruta en la parte superior de la página. Verifica que las frutas se agreguen a la caja y se eliminen si hay tres idénticas. El efecto eliminable se ve así:

2. Si la caja tiene 7 frutas y no se pueden eliminar más, hacer clic en el elemento de fruta en la parte superior no debería tener ningún efecto. El efecto no eliminable es el siguiente:

¡Felicitaciones! Has completado el proyecto Fruit Stacker.

Resumen

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