├── readme.md ├── css └── style.css ├── index.html └── js └── scripts.js /readme.md: -------------------------------------------------------------------------------- 1 | ## Jogo de Adivinhação
2 | > Esse é um jogo simples de adivinhação. 3 | 4 | ![Alt Text](https://i.imgur.com/BwFzLo3.gif) 5 | #### Ferramentas 6 | * HTML, CSS e Javascript 7 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: Verdana, Geneva, Tahoma, sans-serif; 5 | color: #5E503F; 6 | } 7 | 8 | .container { 9 | width: 100vw; 10 | height: 100vh; 11 | display: flex; 12 | justify-content: center; 13 | flex-direction: row; 14 | align-items: center; 15 | background-color: #C6AC8F; 16 | } 17 | 18 | .caixa { 19 | width: 500px; 20 | border: 3px solid #5E503F; 21 | padding: 20px; 22 | } 23 | 24 | .titulo { 25 | text-align: center; 26 | margin-bottom: 10px; 27 | } 28 | 29 | .descricaoTitulo { 30 | margin-bottom: 10px; 31 | } 32 | 33 | .form { 34 | display: grid; 35 | grid-auto-flow: row; 36 | grid-gap: 10px; 37 | grid-template: 2, 1fr; 38 | justify-items: center; 39 | } 40 | 41 | .form label { 42 | font-weight: bold; 43 | } 44 | 45 | .campoPalpite { 46 | width: 100px; 47 | background-color: #C6AC8F; 48 | border: 2px solid #5E503F; 49 | padding: 2px; 50 | outline: none; 51 | } 52 | 53 | .envioPalpite { 54 | padding: 5px; 55 | border: 3px solid #5E503F; 56 | background-color: #C6AC8F; 57 | } 58 | 59 | .palpites { 60 | font-weight: bold; 61 | margin-top: 5px; 62 | } 63 | 64 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Jogo de Adivinhação 6 | 7 | 8 | 9 |
10 |
11 |

Jogo de Adivinhação

12 |

Selecionamos um número aleatório entre 1 e 100. Veja se consegue 13 | adivinhar em 10 chances ou menos. Lhe diremos se seu palpite está com 14 | valor alto ou baixo. 15 |

16 | 17 |
18 | 19 | 20 | 21 |
22 | 23 |
24 |

25 |

26 |

27 |

28 |
29 |
30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /js/scripts.js: -------------------------------------------------------------------------------- 1 | var numeroAleatorio = Math.floor(Math.random() * 100) + 1; 2 | 3 | var palpites = document.querySelector('.palpites'); 4 | var ultimoResultado = document.querySelector('.ultimoResultado'); 5 | var baixoOuAlto = document.querySelector('.baixoOuAlto'); 6 | 7 | var envioPalpite = document.querySelector('.envioPalpite'); 8 | var campoPalpite = document.querySelector('.campoPalpite'); 9 | 10 | var contagemPalpites = 1; 11 | var botaoReinicio; 12 | campoPalpite.focus(); 13 | 14 | function conferirPalpite() { 15 | var palpiteUsuario = Number(campoPalpite.value); 16 | if (contagemPalpites === 1) { 17 | palpites.textContent = 'Palpites anteriores: '; 18 | } 19 | palpites.textContent += palpiteUsuario + ' '; 20 | 21 | if (palpiteUsuario == numeroAleatorio) { 22 | ultimoResultado.textContent = "Parabéns! Você acertou!"; 23 | ultimoResultado.style.color = "green"; 24 | baixoOuAlto.textContent = ""; 25 | configFimDeJogo(); 26 | } else if (contagemPalpites == 10) { 27 | ultimoResultado.textContent = "FIM DE JOGO!"; 28 | baixoOuAlto.textContent = ""; 29 | configFimDeJogo(); 30 | } else { 31 | ultimoResultado.textContent = "Errado!" 32 | ultimoResultado.style.color = "red"; 33 | if (palpiteUsuario < numeroAleatorio) { 34 | baixoOuAlto.textContent = "Seu palpite está muito baixo!"; 35 | } else if (palpiteUsuario > numeroAleatorio) { 36 | baixoOuAlto.textContent = "Seu palpite está muito alto!" 37 | } 38 | } 39 | 40 | contagemPalpites++; 41 | campoPalpite.value = ""; 42 | campoPalpite.focus(); 43 | } 44 | 45 | envioPalpite.addEventListener('click', conferirPalpite); 46 | 47 | function configFimDeJogo() { 48 | campoPalpite.disabled = true; 49 | envioPalpite.disabled = true; 50 | botaoReinicio = document.createElement('button'); 51 | botaoReinicio.textContent = "Iniciar novo jogo"; 52 | document.querySelector('.reiniciarJogo').appendChild(botaoReinicio); 53 | botaoReinicio.style.border = "3px solid #5E503F"; 54 | botaoReinicio.style.marginTop = "10px"; 55 | botaoReinicio.style.padding = "5px"; 56 | botaoReinicio.style.backgroundColor = "#C6AC8F"; 57 | 58 | botaoReinicio.addEventListener('click', reiniciarJogo); 59 | } 60 | 61 | function reiniciarJogo() { 62 | contagemPalpites = 1; 63 | 64 | var reiniciarPartida = document.querySelectorAll('.resultadoPalpites p'); 65 | for (var i = 0; i < reiniciarPartida.length ; i++) { 66 | reiniciarPartida[i].textContent = ""; 67 | } 68 | 69 | campoPalpite.disabled = false; 70 | envioPalpite.disabled = false; 71 | campoPalpite.value = ""; 72 | campoPalpite.focus(); 73 | 74 | ultimoResultado.style.backgroundColor = '#C6AC8F'; 75 | 76 | numeroAleatorio = Math.floor(Math.random() * 100) + 1; 77 | } 78 | 79 | --------------------------------------------------------------------------------