Falta pouco!

0 dias

0 horas

0 min

0 seg

1
resposta

[Projeto] Jogo do número secreto - Veja as mudanças no Código Final - Quem já viu jogo sem som?

Olá pessoal!

Fiz várias mudanças, mudei a fonte no arquivo CSS, mudanças no index e app.

Testem por favor e digam o que acharam.
Vai o Git - https://github.com/juniorshop/jogo-do-numero-secretoModificado

No arquivo CSS separei essas duas tags p/ colocar fontes diferentes.

h1 {
font-family: 'Kristen ITC', sans-serif;
font-size: 72px;
padding-bottom: 3rem;
}

p,
button {
font-family: 'OCR-A BT', sans-serif;
}

Alterei a cor do
button:hover {
background-color: #2980b9;

Aterei o .container__botao p/ deixar os botões mais arredondados
.container__botao {

font-size: 24px;
font-weight: 700;
background-color: #1875E8;
border-radius: 20px;
border: 0;
margin-top: 2rem;
padding: 16px 24px;
width: 100%;
cursor: pointer;
}

No index, fiz várias alterações p/ colocar som nos botões, no campo de entrada do número, o atributo required aria-required="true" serve para indicar que um campo de formulário é obrigatório,.

No app.js

Fiz alterações e implementei novas funcionalidades, som nos botões, som nos eventos de erros e acertos, inclusive em homenagem ao nosso amigo das tardes de domingo consegui encontrar um arquivo de som com a voz do Faustão "Acertou".

let numeroLimite = 10; //não precisa mais

Essa função foi implementada para validar a entrada no campo número. As tentativas só são contadas quando a entrada é valida ou seja quando se coloca um número válido e não como estava antes.

//Essa função é para validar a entrada no campo número
function verificaChute(chute){

//função para tocar Som no Botão chutar
function tocarSomDoBotao(id1,id2) {

//Essa função toca som dos eventos botão reiniciar, erros e acertos
function tocarSomDeEventos(arquivoSom) {

Essa verifica se acertou o número digitado, com som nos eventos de erros e acertos
Vai abaixo mudanças que fiz no código que resolveu alguns conflitos na forma de pronunciar frases pelo responsiveVoice , nas palavras tentativa e tentativas que foi resolvido com um simples caractere sobrescrito 1** ª ** tentativa!, 2ª tentativa!. Também essa linha pode ser excluída let mensagemTentativas = Você descobriu o número secreto na ${tentativas}ª tentativa!; diminuindo o código sem a necessidade de operador ternário.

function verificarChute() {
let chute = document.querySelector('input').value;
resultadoChute = verificaChute(chute);

if (resultadoChute == true) {
if (chute == numeroSecreto) {
//exibirTextoNaTela('h2', <span style='color: green;'>Acertou</span>);
tocarSomDeEventos('acertou-faustão.mp3');// Toca o som p/ acertos
exibirTextoNaTela('h1', 'Acertou!');//Mudei a fonte no CSS

        //let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
        //Essa linha foi um avanço na econômia de códio substituindo a linha acima e suas variáveis. 
        //O que mudou tudo foi ${tentativas}ª
        //e a frase é pronunciada de forma correta. Antes era 1 um tentativa, 2 dois tentativas. Agora se resolveu esse problema.
        let mensagemTentativas = `Você descobriu o número secreto na ${tentativas}ª tentativa!`;
        exibirTextoNaTela('p', mensagemTentativas);
        document.getElementById('reiniciar').removeAttribute('disabled');
    } else {
        if (chute > numeroSecreto) {
            exibirTextoNaTela('p', 'O número secreto é menor');
            tocarSomDeEventos('goofy-chute.mp3');// Toca o som p/ erros
        } else {
            exibirTextoNaTela('p', 'O número secreto é maior');
            tocarSomDeEventos('goofy-chute.mp3');// Toca o som p/ erros
        }
        tentativas++;
        limparCampo();//Para limpar o campo número
    }
}

}

//Para limpar o campo número
function limparCampo() {

1 resposta

Oi, Fábio! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Gostei bastante das alterações que você fez, principalmente a parte de adicionar sons nos eventos de acerto e erro, isso deixou o jogo mais interativo e divertido. Além disso, a solução para melhorar a pronúncia de "tentativa" no responsiveVoice foi bem criativa.

Uma dica interessante para o futuro é usar o método toFixed() para controlar casas decimais em números. Veja este exemplo:


let numero = 3.14159;
console.log(numero.toFixed(2));

Esse código imprime 3.14, útil quando você quer formatar números de forma mais limpa.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!