JS - criar rotina que só avança após certa condição ser satisfeita pelo usuário
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. *
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *
* *Discussão (1)
Carregando comentários...