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

joagostini · Março 27, 2021

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>

<button onclick="iniciar()">Iniciar Jogo</button>

<label for="nivel">Escolha o nivel:</label>

<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>

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.