Fruit for Fun | Desarrollo de juegos con HTML, CSS, JavaScript

Introducción

En este proyecto, aprenderás a crear un sencillo juego "Fruit for Fun" utilizando HTML, CSS y JavaScript. El juego consiste en encontrar pares de imágenes de frutas al hacer clic en los cuadrados del tablero de juego.

👀 Vista previa

Vista previa del juego de coincidencia de frutas

🎯 Tareas

En este proyecto, aprenderás:

Cómo configurar los archivos y directorios del proyecto
Cómo implementar la funcionalidad del botón Iniciar para mostrar y ocultar las imágenes de frutas
Cómo implementar la funcionalidad de hacer clic en los cuadrados para mostrar las imágenes de frutas
Cómo implementar la funcionalidad para comparar las dos imágenes clicadas y actualizar la puntuación en consecuencia
Cómo actualizar la visualización de la puntuación en tiempo real

🏆 Logros

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

Estructurar y organizar un proyecto de desarrollo web
Utilizar JavaScript para manipular el DOM y manejar interacciones de usuario
Utilizar jQuery para simplificar el código JavaScript y las animaciones
Actualizar la interfaz de usuario en tiempo real según la lógica del juego

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├──css
│ └── style.css
├── Images
│ ├── apple.png
│ ├── cherry.png
│ ├── grape.png
│ ├── peach.png
│ ├── pear.png
│ ├── strawberry.png
│ ├──tangerine.png
│ └── watermelon.png
├─ js
│ ├── index.js
│ └── jquery-3.6.0.min.js
└── index.html

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

A continuación, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página. El juego no se ejecuta correctamente cuando haces clic en el botón de inicio, como se muestra a continuación:

Interfaz de juego incompleta

Implementar la funcionalidad de comparación

En este paso, implementarás la funcionalidad para comparar las dos imágenes clicadas. Sigue los pasos siguientes para completar este paso:

Al final del archivo js/index.js, agrega la siguiente función compare():

// Compara dos imágenes entre sí para ver si son iguales
function compare() {
  if ($("#" + images[0]).attr("src") == $("#" + images[1]).attr("src")) {
    score += 2;
    $("#score").text(score);
    // Oculta
    $("#" + images[0])
      .parent()
      .css("visibility", "hidden");
    $("#" + images[1])
      .parent()
      .css("visibility", "hidden");
    images = [];
    foundImage += 2;
  } else {
    score -= 2;
    $("#score").text(score);
    $("#" + images[0]).hide();
    $("#" + images[1]).hide();

    images = [];
  }
}

Esta función compara la fuente de las dos imágenes clicadas. Si son iguales, la puntuación aumenta en 2 y los cuadrados se ocultan. Si no son iguales, la puntuación disminuye en 2 y las imágenes se ocultan. $("#score").text(score) actualiza la visualización de la puntuación en la sección <p>The current number of points is <span id="score">0</span></p> del archivo html en tiempo real.

Implementar la funcionalidad del botón de inicio

En este paso, implementarás la funcionalidad del botón Iniciar. Sigue los pasos siguientes para completar este paso:

Abre el archivo js/index.js.
En la función startGame(), agrega el siguiente código para mostrar y luego ocultar las imágenes en los cuadrados cuando se hace clic en el botón Iniciar:

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
}

En la función startGame(), continúa con el código anterior seguido del siguiente código para ocultar el botón "Iniciar":

// Oculta el botón Iniciar
$("#start").css("visibility", "hidden");

Implementar la funcionalidad de clic

En este paso, implementarás la funcionalidad de hacer clic en los cuadrados. Sigue los pasos siguientes para completar este paso:

Abre el archivo js/index.js.
En la función startGame(), agrega el siguiente código para manejar el evento de clic en los cuadrados:

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
  // Oculta el botón Iniciar
  $("#start").css("visibility", "hidden");
  $(".img-box").bind("click", function () {
    var id = $(this).children().attr("id"); // Obtiene el id de la imagen clicada
    images.push(id);

    if ($(this).children().is(":hidden")) {
      $(this).children().show();
    } else {
      images.pop(id);
    }
    if (images.length == 2) {
      setTimeout(compare, 500);
    }
  });
}

Este código agregará el ID de la imagen clicada al array images. Si la imagen está oculta, se mostrará. Si la imagen ya está visible, se eliminará del array images. Cuando haya dos imágenes en el array images, la función compare() se llamará después de una demora de 500 ms.

Después de completar estos pasos, el juego "Fruit for Fun" debería estar completamente funcional y el resultado final es el siguiente:

Demostración del juego terminado