Consolidando Conhecimentos - Minha Resolução | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

<meta charset="utf-8">

<head>
    <h2>Tente adivinhar um numero de 1 a 10!</h2>
</head>

<br><br>

<form>
    <input/>
    <button>Qual é o seu chute!</button>
</form>

<script>

function sorteia() {

    return Math.round(Math.random() * 10);
}

function sorteiaNumeros(quantidade) {

    var segredos = [];
    var numero = 1;

    while(numero <= quantidade) {

        var random = sorteia();

        if(random !== 0){

            var achou = false

            for(posicao = 0; posicao < segredos.length; posicao++){

                if(segredos[posicao] == random){
                achou = true;
                break;
            }
        }
            if(achou == false){

            segredos.push(random);
            numero++;
        }

        }



    }
    return segredos
} 

var segredos = sorteiaNumeros(3);

console.log(segredos);

var input = document.querySelector("input");
input.focus();

function verifica() {

    var achou = false;
    for (posicao = 0; posicao < segredos.length; posicao++){

            if(input.value == segredos [posicao]) {

            alert("VOCÊ ACERTOU!!!");    
            achou = true;
            break;
        } 

    }

    if(achou == false){

        alert("Você ERROU!!!");
    }

    input.value = "";
    input.focus();
}

var button = document.querySelector("button");

button.onclick = verifica; 

</script>

Olá, Walyson! Tudo certo?

Parabéns pelo código!

Para contribuir com seus estudos, deixo uma dica com relação ao uso de tags HTML. A tag <head></head> (que significa “cabeça” em Inglês) é utilizada quando estamos organizando o conteúdo que não será apresentado ao usuário, como metadados. Um exemplo disso é este trecho de código: <meta charset="UTF-8">.

Uma tag com nome parecido é <header></header> , a qual delimita o cabeçalho da nossa página. Nesse espaço, geralmente adicionamos o título do nosso projeto, como esse que você utilizou!

Uma mudança bem legal que você poderia fazer é a seguinte:

<head>
    <meta charset="UTF-8">
</head>

<header>
    <h2>Tente adivinhar um numero de 1 a 10!</h2>
</header>

Existem muitas outras coisas que podemos adicionar no momento que estamos construindo algo em HTML — como divisões semânticas, títulos, parágrafos, imagens, etc. Contudo, de maneira geral, seu código ficará da seguinte forma após essa sucinta modificação:

<head>
    <meta charset="UTF-8">
</head>

<header>
    <h2>Tente adivinhar um numero de 1 a 10!</h2>
</header>

<br><br>

<form>
    <input/>
    <button>Qual é o seu chute!</button>
</form>

<script>

    function sorteia() {
        return Math.round(Math.random() * 10);
    }

    function sorteiaNumeros(quantidade) {

        var segredos = [];
        var numero = 1;

        while(numero <= quantidade) {

            var random = sorteia();

            if(random !== 0){

                var achou = false

                for(posicao = 0; posicao < segredos.length; posicao++){

                    if(segredos[posicao] == random){
                        achou = true;
                        break;
                    }
                }

                if(achou == false){
                    segredos.push(random);
                    numero++;
                }
            }
        }
        return segredos
    } 

    var segredos = sorteiaNumeros(3);

    console.log(segredos);

    var input = document.querySelector("input");
    input.focus();

    function verifica() {

        var achou = false;
        for (posicao = 0; posicao < segredos.length; posicao++){

            if(input.value == segredos [posicao]) {
                alert("VOCÊ ACERTOU!!!");    
                achou = true;
                break;
            } 

        }

        if(achou == false){
            alert("Você ERROU!!!");
        }

        input.value = "";
        input.focus();
    }

    var button = document.querySelector("button");
    button.onclick = verifica; 

</script>

Caso você se interessa pelo assunto abordado, estou deixando como indicação de leitura um artigo da Alura que comenta sobre o HTML e algumas de suas tags:

O que é o HTML e suas tags? Parte 1: estrutura básica

Por fim, ressalto que se você sentir dificuldade em algum momento durante seus estudos ou tenha dúvidas sobre minha explicação, lembre-se que você pode contar com o fórum enviando sua pergunta, ficarei feliz em te ajudar!

Até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!