[Bingo] - JavaScript

20/06/2019

Boa noite galera,
Sou novo aqui, pesquisei e n�o encontrei um padr�o para postar d�vidas.
Vamos l�, minha d�vida � a seguinte: Eu preciso criar uma esp�cie de "bingo", no html eu tenho 9 divs e cada uma possu� um n�mero dentro de um span, eu criei um bot�o que gera os n�meros aleat�rios e quando esse n�mero aleat�rio for igual algum dos n�meros dentro do span, ent�o trocar o background, at� que 3 spans na horizontal ou vertical possuam a mesma cor e exiba uma msg 'Bingo'.

Segue o c�digo abaixo.

<h1 class="text-center">Teste Bingo</h1>
        <div class="num text-center">
            <p id="numSorteio"></p>
        </div>
        <div class="sorteio col-12 text-center">
            <a href="#" class="btn btn-primary text-center btn-randow" onclick="gerarAleatorio()">sorteio</a>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-sm" value="3"><span>3</span></div>
                <div class="col-sm" value="8"><span>8</span></div>
                <div class="col-sm" value="10"><span>10</span></div>
            </div>
            <div class="row">
                <div class="col-sm" value="14"><span>14</span></div>
                <div class="col-sm" value="20"><span>20</span></div>
                <div class="col-sm" value="28"><span>28</span></div>
                </div>
            <div class="row">
                    <div class="col-sm" value="32"><span>32</span></div>
                    <div class="col-sm" value="40"><span>40</span></div>
                    <div class="col-sm" value="49"><span>49</span></div>
            </div>
        </div>

var sorteio = document.querySelector('p#numSorteio')
var sortNum = sorteio.innerHTML



function gerarAleatorio(){
   var numAleatorio = Math.floor(Math.random() * 50)
    sorteio.innerHTML = numAleatorio
}

function verificar (){
    let numerosDoSorteio = document.querySelectorAll('span')
    num = numerosDoSorteio
    for(num of numerosDoSorteio){
    console.log(num.innerHTML)
    if(num == sortNum){
        console.log('Mudou a cor')
        }
    }
}
verificar()

essa forma que estou tentando fazer a valida��o � poss�vel ou seria melhor criar um vetor com os valores iguais aos do span e tentar validar por ele

Danilo Alves

Curtir t�pico + 0

Responder

Posts

21/06/2019

Danilo Alves

Eu consegui fazer a verifica��o se os n�meros s�o iguais.
Agora para verificar se os span da mesma linha ou coluna possuem a mesma classe, com JQuery
teria algo parecido com $(".span-bingo").hasClass(".numeroSorteado"), como fazer essa verifica��o com JS puro?

<h1 class="text-center">Teste Bingo</h1>
    <div class="num text-center">
        <p id="numSorteio"></p>
    </div>
    <div class="sorteio col-12 text-center">
        <a href="#" id="bt-gerar" class="btn btn-primary text-center btn-randow" >sorteio</a>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-sm" value="3"><span  class="span-bingo l1">3</span></div>
            <div class="col-sm" value="8"><span class="span-bingo l1">8</span></div>
            <div class="col-sm" value="10"><span class="span-bingo l1">10</span></div>
        </div>
        <div class="row">
            <div class="col-sm" value="14"><span class="span-bingo l2">14</span></div>
            <div class="col-sm" value="20"><span class="span-bingo l2">20</span></div>
            <div class="col-sm" value="28"><span class="span-bingo l2">28</span></div>
            </div>
        <div class="row">
                <div class="col-sm" value="32"><span class="span-bingo l3">32</span></div>
                <div class="col-sm" value="40"><span class="span-bingo l3">40</span></div>
                <div class="col-sm" value="49"><span class="span-bingo l3">49</span></div>
        </div>
    </div>

var sorteio = document.querySelector('p#numSorteio')

var sortNum = sorteio.innerHTML
var numAleatorio
 document.getElementById("bt-gerar").onclick = gerarAleatorio = () =>{
    numAleatorio = Math.floor(Math.random() * 50)
    sorteio.innerHTML = numAleatorio
    var divs = document.querySelectorAll('span'), i;

    for (i = 0; i < divs.length; ++i) {
      if(divs[i].innerText == numAleatorio){
          console.log(divs)
        divs[i].classList.remove("span-bingo")
        divs[i].classList.add("numeroSorteado")
      }
			
    }
    
}

Responder

Gostei + 0