[Projeto] Advinha mais | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Código do advinha mais com um pouco de estilo

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="caixa">
        <h1>Advinhe</h1>
        <input />
        <button>Compare</button>
    </div>

    <script>

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

        function sorteiaNumero(quantidade) {

            var segredos = [];

            var numero = 1;

                while(numero <= quantidade){

                    var numeroAleatorio = sorteia();

                    if(numeroAleatorio != 0) {


                        var achou = false;

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

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

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


        var segredos = sorteiaNumero(5);

        console.log(segredos);

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

        input.focus();

        function verifica() {
            var achou = false;

            for(var 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>
</body>
</html>

CSS:

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
}

.caixa{
    width: 500px;
    height: 200px;
    background: white;
    padding: 10px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

h1 {
    font-size: 1rem;
    text-transform: uppercase;
}

input, button {
    height: 30px;
    width: 300px;
    border-radius: 25px;
    padding: 0px 15px;
    outline: none;
    border: none;
}

input {
    background-color: rgba(169, 163, 163, 0.811);
    margin-bottom: 10px;
}

button:hover {
    background: rgba(5, 243, 5, 0.539);
    outline: auto rgba(5, 243, 5, 0.539);
}

Resultado:

Imagem tela