A tu propio ritmo

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Buscar en lecciones


IngresarEmpezar

Regístrate en 4Geeks

← Volver a Proyectos

Construye un Juego de Memoria con React: ¡Encuentra los Pares!

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

🌱 ¿Cómo iniciar este proyecto?

No clones este repositorio porque vamos a utilizar una plantilla diferente.

Recomendamos abrir la plantilla de React utilizando una herramienta de aprovisionamiento como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonar el repositorio de GitHub en tu computadora local usando el comando git clone.

Este es el repositorio que necesitas abrir o clonar:

https://github.com/4GeeksAcademy/react-hello

⚠ ¡Necesitarás tener Node.js instalado si lo haces localmente, pero todo eso ya está instalado en Codespaces o Gitpod!

📝 Instrucciones

Paso 1: Configura el Proyecto

Paso 2: Planifica la Estructura del Juego

Paso 3: Implementa el Tablero de Juego

1// Ejemplo de generación de cartas 2const cards = [ 3 { id: 1, image: 'url1', matched: false }, 4 { id: 2, image: 'url2', matched: false }, 5 // ... más cartas 6];

Paso 4: Maneja el Estado de las Cartas con useState

1const [cards, setCards] = useState([]); 2const [flippedCards, setFlippedCards] = useState([]); 3const [matchedCards, setMatchedCards] = useState([]);

Paso 5: Implementa la Lógica del Juego con useEffect

1useEffect(() => { 2 if (flippedCards.length === 2) { 3 const [firstCard, secondCard] = flippedCards; 4 if (firstCard.id === secondCard.id) { 5 setMatchedCards([...matchedCards, firstCard.id]); 6 } 7 setTimeout(() => setFlippedCards([]), 1000); 8 } 9}, [flippedCards]);

Paso 6: Agrega Control de Eventos de Clic

1const handleCardClick = (card) => { 2 if (flippedCards.length < 2 && !flippedCards.includes(card)) { 3 setFlippedCards([...flippedCards, card]); 4 } 5};

Paso 7: Agrega Animaciones Simples

1.card { 2 transition: transform 0.6s; 3 transform-style: preserve-3d; 4} 5 6.card.flipped { 7 transform: rotateY(180deg); 8}

Paso 8: Mejora la Interfaz de Usuario

Sección de Bonus

Características Adicionales para Practicar y Mejorar el Proyecto

  1. Contador de Puntuación: ¡Implementa un sistema de puntuación basado en el número de movimientos o el tiempo que tarda el jugador en completar el juego!

  2. Niveles de Dificultad: Agrega diferentes niveles de dificultad con más o menos cartas.

  3. Sonidos y Efectos: ¡Añade efectos de sonido al voltear cartas o encontrar un par!

  4. Guardar Progreso: Permite al jugador pausar y continuar el juego guardando el estado en el almacenamiento local.

  5. Tema Personalizable: ¡Deja que el jugador elija entre diferentes temas o conjuntos de imágenes para las cartas!

  6. Juego Multijugador: Implementa un modo para que dos jugadores compitan por turnos y registra quién encuentra más pares.

¡Explora diferentes mejoras para hacer tu juego de memoria más interactivo y entretenido!

Regístrate para obtener acceso a proyectos similares

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

Regístrate para obtener acceso a proyectos similares

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías

Dificultad

  • intermediate

Duración promedio

4 hrs

Tecnologías