Jump to content
joagostini

JS - criar rotina que só avança após certa condição ser satisfeita pelo usuário

Recommended Posts

Olá, sou iniciante, e estou fazendo, como exercício, o jogo da velha. 'Desenvolvi' uma rotina de escolha de nível do jogo (serão 3 níveis) que deve aguardar a escolha do usuário para o programa prosseguir. Mas acho que não entendi direito como o javascript funciona, pois o que fiz não funciona e não encontrei uma solução (talvez não saíba como pesquisar corretamente o assunto na web).


O começo do HTML (que é pouco) onde está um select para escolha do nível é este:

<body>
    <div id="dvmenu">
        <button onclick="iniciar()">Iniciar Jogo</button>
        <p><br></p>
        <div id="dvQuemComeca">
            <label for="nivel">Escolha o nivel:</label>
            <select id="nivel" onChange='atualiza()'>
                <option value=0 selected>Escolha um nível</option>
                <option value=1>Nível 1 - Brincadeira</option>
                <option value=2>Nivel 2 - Surpresa</option>
                <option value=3>Nível 3 - Desafio</option>
            </select>
        </div>
        <div id="jogador" class="jogador"></div>
        <div id="vencedor" class="jogador"></div>
    </div>

 

O código JS é este:

//INÍCIO VEM DE LOAD
function iniciar() {
    casela = document.querySelectorAll('div[id^="p"]');
    for (let cas of casela) {
        cas.innerHTML = '';
    }
    for (let i = 0; i < 9; i++){
       tab = tab;
    }
    console.log(tab);
    nivel = 0; 
    msg = '';
    qtosLancesJog = 0;
    sorteiaJogador();
    //até aqui funcionou direito
}
//--------------------------------------------------------------------
//ESCOLHA DO NÍVEL DO JOGO
function atualiza(){
    let selecao = document.querySelector('#nivel');
    let opcao = selecao.options[selecao.selectedIndex];
    return opcao.value;   
}
 
//--------------------------------------------------------------------
 
//SORTEIA QUEM VAI COMEÇAR JOGANDO
//função para definir o jogador que inicia o tab
function sorteiaJogador() {//funcionou direito
    let quemComeca = parseInt(Math.floor(Math.random() * 2));
    if (quemComeca == 0{
        msg = 'Computador';
        //setTimeout(lanceCpu, 2000);//dá um intervalo antes do computador realizar o 1 lance
        lanceCpu();
    } else msg = 'Humano';//neste caso a rotina espera que o jogador clique no tabuleiro, qdo roda a função lancetab(pos)
        lanceHumano();
    document.querySelector('#jogador').innerHTML = `<br>O ${msg} começa!`;
}
//--------------------------------------------------------------------
 
//ESCOLHA RANDÔMICA, NIVEL = 1, Da POSIÇÃO DO LANCE DA CPU NO tabULEIRO
function jogouCpu(){//funcionou direito
//nível 1 modo randômico
pos = Math.floor(Math.random() * 9);
return pos;
}
 
//função humana
function lanceHumano(){
    console.log('Estou na função humana');
    do {
        nivel = atualiza();
        console.log(nivel);
    } while (nivel === 0);
    console.log(nivel + ' passei direto');
}

 

O problema está nesse do...while da function lanceHumano(). Segundo entendi, ele prosseguiria apenas quando nivel!== 0, caso contrário, ficaria 'preso' até o momento que o usuário escolhesse uma das opções. Pelo HTML percebesse que setei o select para value=0. Mas ele nem se dá ao trabalho de esperar um miléssimo de segundo, segue em frente com o valor que tiver, no caso 0. O while  não tem efeito. Essa minha perspectiva está errada? Se sim, o que fazer? (paradigma funcional, await?) Obrigado.

P.S.. No código tem uns conole.logs que servem watch-dogs para ajudar a entender por onde vão as rotinas.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By WitherZx
      estou cursando na Rocketseat, e um dos exercícios de la é fazer um sisteminha de conversão de notas, de numérico para alfabético, eu fiz o exercício de duas formas, uma deu certo (com if's), porem quando tentei usar switch, deu erro, sempre caia em 'default', como posso resolver? ps: eu não quero ver a solução do vídeo pq lá provavelmente vai ensinar com if's, e isso eu já sei.
       
      function ConverteNota(nota) {     nota = Number(nota)     let notaA = (nota >= 9 && nota <= 10);     let notaB = (nota >= 8 && nota < 9);     let notaC = (nota >= 7 && nota < 8);     let notaD = (nota >= 6 && nota < 7);     let notaF = (nota < 6 && nota >= 0);       switch (nota) {         case notaA:             console.log('Nota A');             break;           case notaB:             console.log('Nota B');             break;           case notaC:             console.log('Nota C');             break;           case notaD:             console.log('Nota D');             break;           case notaF:             console.log('nota F');             break;           default:             console.log('insira uma nota valida!')             break;     }; };   ConverteNota(10);
    • By Sapinn
      Pessoa de novo eu aqui kk. Acho que essa pergunta é simples mas eu não sei como fazer, já pesquisei em vários cantos mas só achei a resposta em Jquery e eu queria fazer em Javascript puro. Basicamente eu gostaria de transferir dados de uma tabela para um form eu já consegui fazer mas só funciona em um td e eu gostaria nos outros não funcionam. 
      <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>     <table border="1px">         <tr>             <td>Nome</td>             <td>Endereço</td>             <td>Telefone</td>             <td>Adicionar</td>         </tr>         <tr>             <td id="nome_cliente" value="Sapien">Sapinn</td>             <td id="endereco_cliente" value="Rua 01">Rua 01</td>             <td id="tel_cliente" value="(88) 9 9999-9999">(88)9 9999-9999</td>             <td><button onclick="adicionar()">Adicionar</button></td>         </tr>         <tr>             <td id="nome_cliente" value="Sapien">Supremo</td>             <td id="endereco_cliente" value="Rua 01">Rua 05</td>             <td id="tel_cliente" value="(88) 9 9999-9999">(88)9 0000-0000</td>             <td><button onclick="adicionar()">Adicionar</button></td>         </tr>     </table><br><br>     Nome:<input type="text" name="nome" id="nome">     Telefone: <input type="text" name="telefone" id="telefone">     Endereço: <input type="text" name="endereco" id="endereco">     <script>         function adicionar(){                         let nome_cliente = document.getElementById("nome_cliente").innerHTML;             let endereco_cliente = document.getElementById("endereco_cliente").innerHTML;             let tel_cliente = document.getElementById("tel_cliente").innerHTML;             document.getElementById('nome').value = nome_cliente;             document.getElementById('telefone').value = tel_cliente;             document.getElementById('endereco').value = endereco_cliente;             console.log(nome_cliente, endereco_cliente, tel_cliente)                      }     </script> </body> </html>  
    • By Sapinn
      Fala galera tudo beleza? Então alguém sabe como adicionar e remover campos de texto com js. Tipo teria um botão com um + "mais" para adicionar novos campos e junto a estes campos teria um ícone com um lixeira para remover, toda vez que fosse clicado nesse ícone o campo seria removido, apenas aquele campo. Encontrei um código para adicionar um campo mas a parte de remover ta dando dor de cabeça
      <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Pagina</title>     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"> </head> <body>     <form id="myForm">         <div id="lines"></div>         <button type="button" onclick="addInput('lines')">+</button>         <input type="submit" value="Enviar">       </form>             <script>           var formLine = 1;                 function addInput(divName) {                 var newdiv = document.createElement('div');                 newdiv.innerHTML += '<input type="text" name="produto" id='+formLine+'>';                 newdiv.innerHTML += ' <i class="bi bi-trash-fill"></i>';                 document.getElementById(divName).appendChild(newdiv);                 formLine++;             }         addInput('lines');       </script> </body> </html>  
    • By henriquers
      Bom Dia a todos !
       
      Gostaria de saber se tem algum modo de executar um evento em um option do select por exemplo: Um select com vários produtos aparecendo apenas o código do produto e a descrição de cada um, e quando passa o mouse sobre um deles no select inicia um evento que carrega uma imagem do produto ao lado do select sem precisar clikar no produto para aparecer a imagem.
      Eu consegui fazer colocando um onchange no select, mas gostaria um que não precise clicar no produto para aparecer a imagem, carregando a imagem quando passa o mouse nas opções do select.
       
       
      Desde já agraço a ajuda.
    • By aw10home
      Quando faço a consulta no phpMyadmim consigo o resultado esperado. Mas pelo visto não estou sabendo fazer direito em PHP. O que estou errando? Porque não consigo fazer a média (prtm) "aparecer"?
      abaixo meu código.
      <?php if (isset($_GET['$id_aluno'])){ $id_aluno = addslashes($_GET['$id_aluno']);} elseif (isset($_GET['id_aluno'])){ $id_aluno = addslashes($_GET['id_aluno']);}//addslashes evita sqlinjection else{ $id_aluno=(""); } $informacao=$con->prepare("SELECT a.id_aluno, a.nome, SUM(((b.prt*5)+(m.prt*3)+(v.prt*2))/10 ) as prtm FROM aluno a inner join avb1 b on a.id_aluno = b.id_aluno inner join avm2 m on a.id_aluno = m.id_aluno inner join avp v on a.id_aluno = v.id_aluno group by a.id_aluno, a.nome WHERE a.id_aluno = $id_usuario"); $informacao->execute(); ?> <!------------> <table class="cBolt"> <tr> <td>Avaliação</td> <td>Bim.</td> <td>Português</td> </tr> <?php while($linha=$informacao->fetch(PDO::FETCH_ASSOC)){ ?> <tr> <td>Média</td> <td>1º</td> <td><?php echo $linha['prtm'];?></td> </tr> <?php } ?> </table>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.