Dúvida quanto ao limite de tentativas | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Estou tentando acrescentar ao código o limite máximo de três tentativas ao usuário. Minha intenção é, após as três tentativas, fechar o local de digitação e pedir que o usuário atualize a página para tentar novamente.

Porém, após a primeira tentativa, o meu alert("ERROU! Tente novamente!") é executado três vezes e na sequência já pede que o usuário atualize a página para tentar novamente. Já tentei alterar o local da instrução, mas também não funcionou como gostaria.

<meta charset="utf-8">

<h1>Jogo da adivinhação</h1>
<hr>
<h3>Estou pensando em um número de 1 a 10. Tente adivinhar!</h3>

<input/>

<button>CHUTE</button>

<script>

var segredo = Math.round(Math.random() * 10);

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

var maximoTentativas = 3;
var tentativas = 1;

function verifica() {

    while (tentativas <= maximoTentativas) {

    if (input.value == segredo) {

        tentativas = maximoTentativas;
        alert("PARABÉNS! Você acertou!");

    } else {

        alert("ERROU! Tente novamente!");

    }

    tentativas++;
  }

  document.write("<h2>Atualize a página e tente novamente!</h2>");
}

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

</script>

function verifica() { if (tentativas <= maximoTentativas) { if (input.value == segredo) { tentativas = maximoTentativas; alert("PARABÉNS! Você acertou!"); } else { alert("ERROU! Tente novamente!"); } tentativas++; } if (tentativas > maximoTentativas) { document.write("<h2>Atualize a página e tente novamente!</h2>"); } }