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

Explota globos usando HTML/CSS y Javascript

Dificultad

  • easy

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • events

  • the-dom

Dificultad

  • easy

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • events

  • the-dom

Pop Balloons game using Javascript, HTML/CSS 🎈🎊

Este es un buen juego para practicar HTML, CSS y un poco de Javascript. El objetivo de este juego es reventar todos los globos haciendo clic en ellos.

🌱 Cómo iniciar este proyecto

Este proyecto viene con los archivos necesarios para empezar a trabajar, pero tienes dos opciones para empezar:

a) Abrir este enlace con Gitpod en tu navegador: https://gitpod.io#https://github.com/breatheco-de/exercise-pop-baloons-javascript.git

b) Clonar este repositorio localmente en tu computador:

1$ git clone https://github.com/breatheco-de/exercise-pop-baloons-javascript.git

Ejecuta el sitio web con el siguiente comando en tu terminal: $ npx http-server --yes -c-1

💡 Importante: Recuerda actualizar el remote del proyecto con el de tu repositorio usando git remote set-url origin <your new url>, y luego guardar tu código en tu nuevo repositorio usando add, commit y push.

📝 Instrucciones

Balloon Pop Game with HTML/CSS and Javascript

Crea un juego con el siguiente flujo de trabajo:

  1. Cuando el sitio web cargue (window.onload) tienes que mostrar (render) todos los globos.
  2. Cada globo debe tener un onClick para poder escuchar cuando el usuario hace clic en él
  3. Cuando el usuario hace clic en el globo, éste desaparece de la pantalla
  4. Cuando los 20 globos hayan desaparecido el sitio web se recarga y el juego comienza otra vez.

💪 Estrategia

Strategy to complete the pop balloons

  1. Primero, declara un array o arreglo de 20 colores, cada color representará un globo, los colores se pueden repetir.
  2. Para reventar un globo, tendrás que convertir el valor de esa posición del globo sea igual a null.
  3. Haz un loop o bucle con todos los colores y crea el string html para cada globo, debes generar un string html como este y añadirlo al DOM:
<div class="balloon active"></div>
<div class="balloon popped"></div>
<div class="balloon active"></div>
<div class="balloon active"></div>
  1. Agrega el string al innterHTML del elemento <div id =" balloon-map "> usando document.querySelector.

  2. Actualiza tu función que muestra (render) los globos para agregar también un onClick en cada div de globo para escuchar el clic.

  3. Cuando haces clic en un globo, anda al array y cambia el valor del color a null.

Regístrate para obtener acceso a proyectos similares

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

Dificultad

  • easy

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • events

  • the-dom

Dificultad

  • easy

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • events

  • the-dom

Dificultad

  • easy

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • events

  • the-dom

Dificultad

  • easy

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • events

  • the-dom

Regístrate para obtener acceso a proyectos similares

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

Dificultad

  • easy

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • events

  • the-dom

Dificultad

  • easy

Duración promedio

8 hrs

Tecnologías

  • html-css

  • javascript

  • events

  • the-dom