Hay que desarrollar un pequeño juego del Bingo.
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.
manzdev-retos-bingo
🐈 Crea tu repo pulsando aquí ❓ ¡Ayuda! ¿Cómo empiezo?.map()
, .forEach()
, .filter()
, etc.250x250px
aprox.300x225px
aprox.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>
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
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.
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.
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