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
- Flex CSS para colocar elementos
- Regla @font-face para no enlazar tipografías desde Google Fonts
- Trabajar con el DOM Buscar, modificar e insertar elementos en el DOM
- Eventos Javascript para disparar funciones en eventos específicos
- Fisher-Yates Shuffle Implementación eficiente de "desordenación aleatoria" de array
- Array functions Funciones sobre arrays como
.map()
,.forEach()
,.filter()
, etc.
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.