++++
++++
Olá, Valdez.
Tudo bem?
Compartilha os códigos dos arquivos HTML, CSS e JavaScript por gentileza, assim fica melhor para uma resposta mais assertiva. Você pode colar eles aqui mesmo sem ser print, assim consigo copiar e testar.
No mais tenta limpar o cache do navegador, verificar o caminho da imagem para ver se está correto, testar em outro navegador também.
Espero ter ajudado de alguma forma. Qualquer dúvida manda aqui. aguardo os códigos. Bons estudos.
O codigo é o mesmo do professor, fui fazendo junto o codigo ta igual. Outra coisa qua achei estranho é que a voz não estava funcionado ai tive que colocar esse link antes da tag ai deu certo, mas o alerta não aparece, para habilitar a voz ou não, o jogo já inicia com a voz da ia. Já olhei tudo o codigo ta igual, não entendi pq o alerta não aparece para habilitar e nem o alerta
.texto__paragrafo {
font-size: 24px;
}
.container__imagem-pessoa {
display: none;
}
.container__conteudo {
display: block;
position: inherit;
}
.container__informacoes {
padding: 1rem
}
}
========================================
Js
let listaDeNumerosSorteados = [];
let numeroLimite = 10; let numeroSecreto = gerarNumeroAleatorio(); let tentativas = 1;
function exibirTextoNaTela(tag, texto) { let campo = document.querySelector(tag); campo.innerHTML = texto; responsiveVoice.speak(texto, 'Brazilian Portuguese Female', {rate:1.2}); }
function exibirMensagemInicial() { exibirTextoNaTela('h1', 'Jogo do número secreto'); exibirTextoNaTela('p', 'Escolha um número entre 1 e 10'); }
exibirMensagemInicial();
function verificarChute() { let chute = document.querySelector('input').value;
if (chute == numeroSecreto) {
exibirTextoNaTela('h1', 'Acertou!');
let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
let mensagemTentativas = `Você descobriu o número secreto com ${tentativas} ${palavraTentativa}!`;
exibirTextoNaTela('p', mensagemTentativas);
document.getElementById('reiniciar').removeAttribute('disabled');
} else {
if (chute > numeroSecreto) {
exibirTextoNaTela('p', 'O número secreto é menor');
} else {
exibirTextoNaTela('p', 'O número secreto é maior');
}
tentativas++;
limparCampo();
}
}
function gerarNumeroAleatorio() { let numeroEscolhido = parseInt(Math.random() * numeroLimite + 1); let quantidadeDeElementosNaLista = listaDeNumerosSorteados.length;
if (quantidadeDeElementosNaLista == numeroLimite) {
listaDeNumerosSorteados = [];
}
if (listaDeNumerosSorteados.includes(numeroEscolhido)) {
return gerarNumeroAleatorio();
} else {
listaDeNumerosSorteados.push(numeroEscolhido);
console.log(listaDeNumerosSorteados)
return numeroEscolhido;
}
}
function limparCampo() { chute = document.querySelector('input'); chute.value = ''; }
function reiniciarJogo() { numeroSecreto = gerarNumeroAleatorio(); limparCampo(); tentativas = 1; exibirMensagemInicial(); document.getElementById('reiniciar').setAttribute('disabled', true) } CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
color: white;
}
body { background: linear-gradient(#1354A5 0%, #041832 33.33%, #041832 66.67%, #01080E 100%); height: 100vh; display: flex; align-items: center; justify-content: center; }
body::before { background-image: url("img/code.png"); background-repeat: no-repeat; background-position: right; content: ""; display: block; position: absolute; width: 100%; height: 100%; opacity: 0.4; }
.container { width: 80%; height: 80%; display: flex; align-items: center; justify-content: space-between; border-radius: 24px; border: 1px solid #1875E8; box-shadow: 4px 4px 20px 0px rgba(1, 8, 14, 0.15); background-image: url("img/Ruido.png"); background-size: 100% 100%; position: relative; }
.container__conteudo { display: flex; align-items: center; position: absolute; bottom: 0; }
.container__informacoes { flex: 1; padding: 3rem; }
.container__botao { border-radius: 16px; background: #1875E8; padding: 16px 24px; width: 100%; font-size: 24px; font-weight: 700; border: none; margin-top: 2rem; }
.container__texto { margin: 16px 0 16px 0; }
.container__texto-azul { color: #1875E8; }
.container__input { width: 100%; height: 72px; border-radius: 16px; background-color: #FFF; border: none; color: #1875E8; padding: 2rem; font-size: 24px; font-weight: 700; font-family: 'Inter', sans-serif; }
.container__botoes { display: flex; gap: 2em; }
h1 { font-family: 'Chakra Petch', sans-serif; font-size: 72px; padding-bottom: 3rem; }
p, button { font-family: 'Inter', sans-serif; }
.texto__paragrafo { font-size: 32px; font-weight: 400; }
button:disabled { background-color: gray; }
@media screen and (max-width: 1250px) {
h1 {
font-size: 50px;
}
.container__botao {
font-size: 16px;
}
.texto__paragrafo {
font-size: 24px;
}
.container__imagem-pessoa {
display: none;
}
.container__conteudo {
display: block;
position: inherit;
}
.container__informacoes {
padding: 1rem
}
}
<div class="container">
<div class="container__conteudo">
<div class="container__informacoes">
<div class="container__texto">
<h1>Adivinhe o <span class="container__texto-azul">numero secreto</span></h1>
<p class="texto__paragrafo">Escolha um número entre 1 a 10</p>
</div>
<input type="number" min="1" max="10" class="container__input">
<div class="chute container__botoes">
<button onclick="verificarChute()" class="container__botao">Chutar</button>
<button onclick="reiniciarJogo()" id="reiniciar" class="container__botao" disabled>Novo jogo</button>
</div>
</div>
<img src="./img/ia.png" alt="Uma pessoa olhando para a esquerda" class="container__imagem-pessoa" />
</div>
</div>
<script src="app.js" defer></script>
<script src="https://code.responsivevoice.org/responsivevoice.js?key=cJcrQ6be"></script>
Opa, Valdez.
Eu testei o projeto com os seus códigos e funcionou perfeitamente, eu baixei o projeto do curso, e troquei todos códigos (HTML, CSS, JS) pelos seus e funcionou, a única coisa que manti foi a pasta "img" do curso.
No código do CSS tem o @media screen and (max-width: 1250px)
, com um display: none;
na classe da imagem .container__imagem-pessoa
, pode ser que sua tela seja menor que isso e a imagem desaparece por causa dessa regra, no caso isso é feito para a imagem sumir mesmo em dispositivos menores incluindo tablets e celulares. Para resolver você pode diminuir um pouco esse valor do @media screen and (max-width: 1250px)
, para 1000
ou até menos, para testar.
Qualquer novidade manda aqui por gentileza.