Construir un juego web interactivo de tarjeta de raspado

Introducción

En este proyecto, lo guiaremos a través del proceso de creación de un sencillo juego de tarjeta de raspado basado en la web. Este juego permite a los usuarios raspar una superposición gris para revelar una imagen subyacente, que será un mensaje de "ganador" o "inténtalo de nuevo". Usaremos HTML para la estructura, CSS para el estilo y JavaScript para la interactividad.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderá:

Cómo configurar un proyecto web básico con HTML, CSS y JavaScript
Cómo manipular el lienzo HTML5 para crear efectos interactivos
Cómo usar JavaScript para manejar interacciones de usuario como clics y movimientos del mouse
Cómo trabajar con imágenes en el desarrollo web, incluyendo cargarlas y mostrarlas dinámicamente
Cómo implementar una lógica de juego simple que decida aleatoriamente el resultado para el usuario

🏆 Logros

Después de completar este proyecto, podrá:

Demostrar una sólida comprensión del lienzo HTML5 y sus capacidades para juegos y aplicaciones interactivas basadas en la web
Mostrar habilidad en el uso de JavaScript para crear contenido dinámico y responder a entradas de usuario
Integrar varias tecnologías web para crear una aplicación web completa y funcional
Diseñar una interfaz de usuario simple pero atractiva para un juego basado en la web
Aplicar conceptos básicos de desarrollo de juegos como resultados aleatorios e interacción de usuario

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") subgraph Lab Skills javascript/functions -.-> lab-445725{{"Construir un juego web de tarjeta de raspado"}} javascript/array_methods -.-> lab-445725{{"Construir un juego web de tarjeta de raspado"}} javascript/dom_select -.-> lab-445725{{"Construir un juego web de tarjeta de raspado"}} javascript/dom_manip -.-> lab-445725{{"Construir un juego web de tarjeta de raspado"}} javascript/event_handle -.-> lab-445725{{"Construir un juego web de tarjeta de raspado"}} end

Crea la estructura HTML

En este paso, configuramos la estructura básica de la página web en index.html, incluyendo la declaración DOCTYPE, el elemento html y las secciones head y body. Definimos el conjunto de caracteres como UTF-8 para el reconocimiento universal de caracteres y configuramos el viewport para el diseño responsivo, asegurándonos de que nuestra aplicación de tarjeta de raspado se vea bien en dispositivos de diferentes tamaños.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tarjeta de Raspado</title>
  </head>
  <body>
    <div id="main">
      <div class="msg">
        ¿Sientes suerte? ¡Intenta!
        <a href="#" onclick="window.location.reload()">Inténtalo de nuevo</a>
      </div>
      <div>
        <canvas></canvas>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

Dentro del body, creamos un elemento div con un id de "main" que sirve como contenedor para nuestra aplicación. Dentro de este contenedor, incluimos un div con una clase de "msg" para mostrar un mensaje ameno que invita al usuario a probar su suerte. Este mensaje también incluye un enlace que, al hacer clic, recarga la página, lo que permite a los usuarios probar la tarjeta de raspado nuevamente sin tener que actualizar manualmente el navegador.

Finalmente, incluimos un elemento canvas donde se implementará el efecto de la tarjeta de raspado, y enlazamos un archivo JavaScript externo llamado "main.js" donde residirá la lógica de nuestra aplicación.

Esta estructura HTML proporciona la base necesaria para nuestra aplicación de tarjeta de raspado, definiendo las áreas donde se mostrará el texto y la superficie raspable.

✨ Revisar Solución y Practicar

Estiliza el lienzo

En el archivo JavaScript main.js, comenzamos seleccionando el elemento del lienzo y aplicando algunos estilos iniciales.

const canvas = document.querySelector("canvas");
canvas.style.backgroundColor = "transparent";
canvas.style.position = "absolute";

Establecemos el backgroundColor en "transparent" para asegurarnos de que el fondo del lienzo no oculte ninguna parte de la página web en la que se coloca. Al establecer la position en "absolute", permitimos más flexibilidad en la colocación del lienzo sobre otros elementos si es necesario.

Este paso es crucial para preparar el elemento del lienzo, asegurando que se integre sin problemas con el resto del diseño de la página web y esté listo para los elementos dinámicos que agregaremos en pasos subsiguientes.

✨ Revisar Solución y Practicar

Carga la imagen de raspado

Aquí, cargamos una imagen aleatoria para utilizarla como fondo de la tarjeta de raspado.

// Continúa en main.js

// Array de posibles imágenes a revelar
const images = ["winner.png", "try_again.png"];
const selectedImage = images[Math.floor(Math.random() * images.length)];

// Crea un nuevo objeto Image y establece la fuente
const img = new Image();
img.src = selectedImage;

// Una vez que la imagen se ha cargado, ajusta el tamaño del lienzo y el fondo
img.onload = () => {
  const ctx = canvas.getContext("2d");
  const w = img.width;
  const h = img.height;
  canvas.width = w;
  canvas.height = h;
  canvas.style.backgroundImage = `url(${img.src})`;

Creamos un array llamado images que contiene los nombres de archivo de las posibles imágenes. Luego, seleccionamos una imagen aleatoria de este array utilizando Math.floor(Math.random() * images.length).

Creamos un nuevo objeto Image y establecemos su fuente (src) en la imagen elegida. El oyente de eventos onload nos asegura de que solo continuemos con el resto del script una vez que la imagen se ha cargado completamente, evitando cualquier problema que podría surgir al tratar de manipular una imagen que no se ha descargado por completo.

Este paso es crucial para la naturaleza dinámica de la tarjeta de raspado, ya que introduce variabilidad y sorpresa cada vez que la aplicación se carga o se actualiza. Al cargar una imagen aleatoria, simulamos el resultado incierto de una tarjeta de raspado real, mejorando la experiencia del usuario.

✨ Revisar Solución y Practicar

Prepara la capa de raspado

Después de cargar la imagen seleccionada en el lienzo, necesitamos preparar la capa de raspado. Esto se logra cubriendo todo el lienzo con un rectángulo gris. Esta capa gris sirve como la superficie raspable con la que el usuario interactuará para revelar la imagen debajo.

// Continúa en main.js

// Cubre el lienzo con un rectángulo gris para actuar como la capa de raspado
ctx.fillStyle = "gray";
ctx.fillRect(0, 0, w, h);

// Prepara el lienzo para el efecto de raspado
ctx.globalCompositeOperation = "destination-out";

En este paso, establecemos el estilo de relleno en gris y dibujamos un rectángulo que cubre todo el lienzo, creando una capa de raspado sobre la imagen seleccionada. La globalCompositeOperation establecida en "destination-out" asegura de que cualquier nuevo dibujo en el lienzo hará que las capas subyacentes sean transparentes, permitiendo que la imagen debajo sea revelada dondequiera que el usuario raspe.

✨ Revisar Solución y Practicar

Crea la función de raspado

Para implementar el efecto de raspado, definimos una función draw que se llamará cada vez que el usuario interactúe con el lienzo. Esta función verifica si el usuario está actualmente dibujando (bandera isDrawing) y luego calcula la posición del cursor o del toque en relación con el lienzo. Luego dibuja un círculo en esta posición con una operación de composición que hace que la capa gris sea transparente, revelando la imagen debajo.

// Continúa en main.js

let isDrawing = false;

// Define la función para simular el raspado
const draw = (e) => {
  if (!isDrawing) return;
  e.preventDefault();
  const clientX = e.clientX || e.touches[0].clientX;
  const clientY = e.clientY || e.touches[0].clientY;
  const rect = canvas.getBoundingClientRect();
  const x = clientX - rect.left;
  const y = clientY - rect.top;

  // Dibuja un círculo en la posición del cursor o del toque
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fill();
};

Esta función primero asegura de que la bandera isDrawing sea verdadera, lo que indica que el usuario ha iniciado una acción de raspado. Luego calcula la posición exacta donde se está produciendo el raspado y dibuja un círculo en esa posición, quitando efectivamente la capa gris para revelar partes de la imagen subyacente.

✨ Revisar Solución y Practicar

Agrega oyentes de eventos para las acciones de raspado

Finalmente, necesitamos detectar cuándo el usuario realiza acciones en el lienzo para desencadenar el efecto de raspado.

// Continúa en main.js

  // Oyentes de eventos para manejar las interacciones de mouse y toque
  canvas.addEventListener("mousedown", (e) => {
    isDrawing = true;
    draw(e);
  });
  canvas.addEventListener("touchstart", (e) => {
    isDrawing = true;
    draw(e);
  });
  canvas.addEventListener("mousemove", draw);
  canvas.addEventListener("touchmove", draw);
  canvas.addEventListener("mouseup", () => {
    isDrawing = false;
  });
  canvas.addEventListener("touchend", () => {
    isDrawing = false;
  });
}

Agregamos oyentes de eventos para mousedown, mousemove, mouseup, touchstart, touchmove y touchend. Estos oyentes establecen la bandera isDrawing y llaman a la función draw en consecuencia para crear un efecto de raspado interactivo.

Cuando el usuario presiona el botón del mouse o toca la pantalla (mousedown o touchstart), establecemos isDrawing en verdadero y comenzamos a rastrear su movimiento para crear el efecto de raspado. Cuando liberan el botón o dejan de tocar la pantalla (mouseup o touchend), establecemos isDrawing en falso, deteniendo la acción de raspado. Los eventos mousemove y touchmove siguen llamando a la función draw siempre que isDrawing sea verdadero, permitiendo que el usuario quite la capa gris y revele la imagen debajo a medida que mueven el mouse o el dedo sobre el lienzo.

Para ver los siguientes efectos, haz clic en el botón Go Live en la esquina inferior derecha de WebIDE y cambia a la pestaña "Web 8080".

✨ Revisar Solución y Practicar

Resumen

En este proyecto, hemos creado un sencillo juego de tarjeta de raspado donde los usuarios pueden raspar una capa para revelar un mensaje oculto. Configuramos la estructura HTML, inicializamos el lienzo en JavaScript, cargamos y mostramos imágenes, y implementamos el efecto de raspado utilizando la API del lienzo. Este proyecto puede ser una adición divertida a las páginas web y puede extenderse de varias maneras, como agregando más imágenes, mejorando el diseño o integrándolo en un juego más grande.