├── img ├── bg.png ├── ia.png ├── Ruido.png ├── code.png ├── JS Game_files │ ├── style.css │ └── app.js └── JS Game.html ├── index.html ├── app.js └── style.css /img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheus-alcan/Alura-Jogo-2/HEAD/img/bg.png -------------------------------------------------------------------------------- /img/ia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheus-alcan/Alura-Jogo-2/HEAD/img/ia.png -------------------------------------------------------------------------------- /img/Ruido.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheus-alcan/Alura-Jogo-2/HEAD/img/Ruido.png -------------------------------------------------------------------------------- /img/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheus-alcan/Alura-Jogo-2/HEAD/img/code.png -------------------------------------------------------------------------------- /img/JS Game_files/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | background-color: black; 3 | background-image: url('./img/bg.png'); 4 | background-repeat: no-repeat; 5 | background-size: cover; 6 | background-position: center; 7 | opacity: 0.4; 8 | } 9 | -------------------------------------------------------------------------------- /img/JS Game_files/app.js: -------------------------------------------------------------------------------- 1 | // let numeroSecreto = parseInt(Math.random() * 11) 2 | // let tentativas = 1 3 | // let chute 4 | 5 | // alert('Boas vindas ao jogo do número secreto') 6 | 7 | // while (chute != numeroSecreto) { 8 | // let chute = prompt('Escolha um número entre 1 e 10') 9 | // if (chute == numeroSecreto) { 10 | // break 11 | // } else { 12 | // if (chute > numeroSecreto) { 13 | // alert('O número secreto é menor') 14 | // } else { 15 | // alert('O número secreto é maior') 16 | // } 17 | // } 18 | // tentativas++ 19 | // } 20 | 21 | // let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa' 22 | // alert(`O número secreto era ${numeroSecreto} e você acertou com apenas ${tentativas} ${palavraTentativa}`) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 13 | 14 | JS Game 15 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |

24 |

25 |
26 | 27 |
28 | 29 | 30 |
31 |
32 | Uma pessoa olhando para a esquerda 33 |
34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /img/JS Game.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JS Game 8 | 9 | 10 | 11 | 12 | 49 | 50 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | let listaDosNumerosDaSorte = []; 2 | let numeroLimite = 10; 3 | let numeroSecreto = numeroAleatorio(); 4 | let tentativas = 1; 5 | 6 | mensagemInicial(); 7 | 8 | function exibirNaTela(tag, texto){ 9 | let campo = document.querySelector(tag); 10 | campo.innerHTML = texto; 11 | responsiveVoice.speak(texto, "Brazilian Portuguese Female", {rate:1.2}); 12 | } 13 | 14 | function mensagemInicial(){ 15 | exibirNaTela("h1","Jodo do numero secreto"); 16 | exibirNaTela("p","Digite um numero de 1 a 10"); 17 | } 18 | 19 | function verificarChute(){ 20 | let chute = document.querySelector("input").value; 21 | if(chute == numeroSecreto){ 22 | let verificaTentativa = tentativas > 1 ? "tentativas" : "tentativa" 23 | exibirNaTela("h1", "PARABENS VOCÊ ACERTOU!"); 24 | let mensagem = `Você acertou com ${tentativas} ${verificaTentativa}`; 25 | exibirNaTela("p", mensagem); 26 | document.getElementById("reiniciar").removeAttribute("disabled"); 27 | } else{ 28 | if(chute < numeroSecreto){ 29 | exibirNaTela("p", "O número secreto é maior"); 30 | } else{ 31 | exibirNaTela("p", "O numero secreto é menor"); 32 | } 33 | tentativas++; 34 | limparCampo(); 35 | } 36 | } 37 | 38 | function numeroAleatorio(){ 39 | let numeroEscolhido = parseInt(Math.random() * numeroLimite + 1); 40 | let quantidadeDeNumerosNaLista = listaDosNumerosDaSorte.length; 41 | if(quantidadeDeNumerosNaLista == numeroLimite){ 42 | listaDosNumerosDaSorte = []; 43 | } 44 | if(listaDosNumerosDaSorte.includes(numeroEscolhido)){ 45 | return numeroAleatorio(); 46 | } else{ 47 | listaDosNumerosDaSorte.push(numeroEscolhido); 48 | return numeroEscolhido; 49 | } 50 | } 51 | 52 | function limparCampo(){ 53 | chute = document.querySelector("input"); 54 | chute.value = ''; 55 | } 56 | 57 | function reiniciarJogo(){ 58 | numeroSecreto = numeroAleatorio(); 59 | tentativas = 1; 60 | limparCampo(); 61 | mensagemInicial(); 62 | document.getElementById("reiniciar").setAttribute("disebled", true); 63 | } 64 | 65 | console.log(numeroSecreto); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | color: white; 6 | } 7 | 8 | body { 9 | background: linear-gradient(#1354A5 0%, #041832 33.33%, #041832 66.67%, #01080E 100%); 10 | height: 100vh; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | } 15 | 16 | 17 | body::before { 18 | background-image: url("img/code.png"); 19 | background-repeat: no-repeat; 20 | background-position: right; 21 | content: ""; 22 | display: block; 23 | position: absolute; 24 | width: 100%; 25 | height: 100%; 26 | opacity: 0.4; 27 | } 28 | 29 | .container { 30 | width: 80%; 31 | height: 80%; 32 | display: flex; 33 | align-items: center; 34 | justify-content: space-between; 35 | border-radius: 24px; 36 | border: 1px solid #1875E8; 37 | box-shadow: 4px 4px 20px 0px rgba(1, 8, 14, 0.15); 38 | background-image: url("img/Ruido.png"); 39 | background-size: 100% 100%; 40 | position: relative; 41 | } 42 | 43 | 44 | .container__conteudo { 45 | display: flex; 46 | align-items: center; 47 | position: absolute; 48 | bottom: 0; 49 | } 50 | 51 | .container__informacoes { 52 | flex: 1; 53 | padding: 3rem; 54 | } 55 | 56 | .container__botao { 57 | border-radius: 16px; 58 | background: #1875E8; 59 | padding: 16px 24px; 60 | width: 100%; 61 | font-size: 24px; 62 | font-weight: 700; 63 | border: none; 64 | margin-top: 2rem; 65 | } 66 | 67 | .container__texto { 68 | margin: 16px 0 16px 0; 69 | } 70 | 71 | .container__texto-azul { 72 | color: #1875E8; 73 | } 74 | 75 | .container__input { 76 | width: 100%; 77 | height: 72px; 78 | border-radius: 16px; 79 | background-color: #FFF; 80 | border: none; 81 | color: #1875E8; 82 | padding: 2rem; 83 | font-size: 24px; 84 | font-weight: 700; 85 | font-family: 'Inter', sans-serif; 86 | } 87 | 88 | .container__botoes { 89 | display: flex; 90 | gap: 2em; 91 | } 92 | 93 | h1 { 94 | font-family: 'Chakra Petch', sans-serif; 95 | font-size: 72px; 96 | padding-bottom: 3rem; 97 | } 98 | 99 | p, 100 | button { 101 | font-family: 'Inter', sans-serif; 102 | } 103 | 104 | .texto__paragrafo { 105 | font-size: 32px; 106 | font-weight: 400; 107 | } 108 | 109 | button:disabled { 110 | background-color: gray; 111 | } 112 | 113 | @media screen and (max-width: 1250px) { 114 | 115 | h1 { 116 | font-size: 50px; 117 | } 118 | 119 | .container__botao { 120 | font-size: 16px; 121 | } 122 | 123 | 124 | .texto__paragrafo { 125 | font-size: 24px; 126 | } 127 | 128 | .container__imagem-pessoa { 129 | display: none; 130 | } 131 | 132 | .container__conteudo { 133 | display: block; 134 | position: inherit; 135 | } 136 | 137 | .container__informacoes { 138 | padding: 1rem 139 | } 140 | } --------------------------------------------------------------------------------