Depois de quebrar muito a cabeça o metade do dia inteiro (literalmente) eu consegui dar uma melhorada no código do professor. Sò não sei se eu conseguiria replicar isso do zero novamente kkkkk, espero que isso tenha ajudado no meu raciocínio:
<html>
<head>
<meta charset="UTF-8">
</head>
<body style="background-color: rgb(203, 203, 248); padding: 20px;">
<div style="text-align: center; ">
<h1 style="border: 5px solid black; border-radius: 10px; background-color: black; color: white;">/\/\/\/\ Você contra você! - Verifique se você acerta o elemento do vetor: /\/\/\/\</h1>
<br>
<p style="padding: 10px;">* * *Defina o tamanho do vetor para tentar acertar algum de seus elementos randômicos <br> e o tamanho de seu maior elemento * * *</p>
<br>
<div>
Intervalo:
<input style="padding: 10px; border: none; border-radius: 10px; margin-right: 20px;" id="intervalo" oninput="this.value = Math.abs(this.value)" type="number" placeholder="Intervalo">
Tamanho:
<input style="padding: 10px; border: none; border-radius: 10px; margin-right: 20px;" type="number" id="tamanhoVetor" oninput="this.value = Math.abs(this.value)" placeholder="Insira o tamanho do vetor">
</div>
<br>
<button style="padding: 10px; border-radius: 10px; margin-right: 20px; background-color: rgb(255, 255, 255);" onclick="definirIntervalo(); entrada()">Definir intervalo dos elementos e o tamanho do vetor</button>
</div>
<div style="text-align: center;">
<div id="resIntervalo" style="text-align: center;">
<br>
Intervalo Definido:
</div>
<div id="resEntrada" style="text-align: center;">
<br>
Tamanho Definido:
</div>
</div>
<br>
<div style="text-align: center;">
<hr>
<h3 style="font-weight: bold; font-size: 35px;">Chute!</h3>
<p>Insira o número para tentar acertar algum elemento</p>
<input style="padding: 10px; border: none; border-radius: 10px; margin-right: 20px;" type="text" id="chute" placeholder="Tente acertar algum num sorteado no vetor">
<button style="padding: 10px; border-radius: 10px; margin-right: 20px; background-color: rgb(255, 255, 255);" onclick="verificaChute()">Verificar chute</button>
</div>
</body>
</html>
<script>
var tamanho
var intervalo
var vetorAuxiliar = []
var vetor = []
function tamanhoMaximoVetor(tamanho){
for(var i = 0; i < tamanho; i++){
vetorAuxiliar.push(0) // defino o tamanho máximo do vetor auxiliar pra depois deixar ele como tamanho limite
}
}
function sorteiaNum(tamanho,intervalo){
for(var i = 0; i < tamanho; i++){
while(true){
var n = Math.round(Math.random() * intervalo);
if (vetor.includes(n) == false){
vetor.push(n);
break;
}
}
}
}
function adicionaElemento(n){
for(var i = 0; i < vetorAuxiliar.length; i++){ //
if(vetor.indexOf(Number(n)) != -1 ){
vetor.push(n)
}
}
}
var entradaDiv = document.getElementById('resEntrada')
function entrada() {
intervalo = definirIntervalo()
var inputTamanho = document.getElementById("tamanhoVetor");
tamanho = Number(inputTamanho.value);
entradaDiv.innerHTML = 'Tamanho Definido: ' + tamanho
if(tamanho < intervalo || tamanho == 0){
sorteiaNum(tamanho, intervalo)
tamanhoMaximoVetor(tamanho)
}else{
alert('Erro, o tamanho do vetor deve ser menor que o intervalo, pois os elementos não se repetem.')
tamanho = 0
entradaDiv.innerHTML = 'Tamanho Definido: '
}
}
function verificaChute(){
var achou = false
var inputChute = document.getElementById('chute')
for(var i = 0; i < vetor.length; i++){
if(inputChute.value == vetor[i]){
achou = true
alert("Você acertou!")
}
}
if(achou == false){
alert('Você errou')
}
}
var intervaloDiv = document.getElementById('resIntervalo')
function definirIntervalo(){
var inputIntervalo = document.getElementById('intervalo')
intervalo = Number(inputIntervalo.value);
intervaloDiv.innerHTML = 'Intervalo Definido: ' + intervalo
return intervalo
}
</script>