Bingo

Sencillo Emulador de Bingo (Player vs CPU)


Bingo

Hay que desarrollar un pequeño juego del Bingo.

  • 1️⃣ En el bombo hay 90 bolas (del 1 al 90, inclusive).
  • 2️⃣ Jugador y CPU tienen su cartón con 15 números (un mismo número puede estar en ambos cartones).
  • 3️⃣ Al pulsar en el bombo central, empezaremos a sacar números y comprobar si existen en los cartones.
  • 4️⃣ De existir, los tachamos y esperamos a que el usuario vuelva a pulsar para sacar un nuevo número.
  • 5️⃣ En la parte inferior, iremos añadiendo los números extraídos.
  • 6️⃣ El primer cartón que tache todos los números, será el ganador.
  • 7️⃣ Opcional: Confetti cuando gane el jugador.

Si no lo has leído aún, echa un vistazo al ¿Cómo empezar?, un documento donde damos algunas pautas de inicio, y un listado de recursos o herramientas que te ayudarán en tu proceso.

Requisitos

  • Nombre del repo: manzdev-retos-bingo 🐈 Crea tu repo pulsando aquí ❓ ¡Ayuda! ¿Cómo empiezo?
  • Sin framework: El objetivo de este reto es practicar Javascript vanilla.
  • Uso de librerías: Se permite el uso de librerías de apoyo como Lodash o Underscore, por ejemplo.
  • Tipografías alojadas: Puedes usar tipografías de Google Fonts, pero alójalas en tu propio proyecto.

Temas relevantes

Recursos proporcionados

  • Tamaño de bombo: 250x250px aprox.
  • Tamaño de cartones: 300x225px aprox.
  • Colores de fondo: ,
  • Otros colores: , ,

Pistas (¡Estoy bloqueado!)

Pista 1: Estructura HTML

Puedes intentar partir de una estructura similar a esta:

  <div class="container">
    <div class="player card"></div>
    <div class="drum">
      <div class="number"><em>Saca número</em></div>
    </div>
    <div class="cpu card"></div>
    <div class="marks"></div>
  </div>
Pista 2: Funciones

Una forma sencilla de abordar problemas de programación es seguir la filosofía de Divide y vencerás. Un buen consejo es hacer pequeñas funciones que realicen tareas concretas. Por ejemplo, algunas de ellas podrían ser:

  • createCard Crea array de 15 números aleatorios, crea el DOM, inserta los datos, y devuelve el array creado.

  • addNumber Añadir los números ya extraídos a la zona inferior de la página.

  • checkWinner Comprueba si el jugador o la CPU han ganado.

  • shuffle Desordena los elementos de un array

Pista 3: Algoritmo

Este ejercicio es muy sencillo si planteas adecuadamente los pasos a seguir, pero puede ser complejo si no lo haces. Para y piensa un poco antes como generar unas estructuras de datos de un bombo y unos cartones de modo que luego no tengas que hacer múltiples comprobaciones.

Pista 4: DOM

Para que este ejemplo sea muy sencillo, considera apoyarte en el DOM. Crea los contenedores de los números del cartón con la siguiente estructura:

<div class="player card">
  <div class="title">Player</div>
  <div class="numbers">
    <div class="number number-5">5</div>
    <div class="number number-16">16</div>
    ...
  </div>
</div>

Esto facilitará mucho luego, a la hora de localizar los números, utilizando un simple .querySelector() o .querySelectorAll() para buscarlos.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev