A classic guessing game developed with HTML, CSS, and JavaScript. The goal is to discover the secret number (between 1 and 10) in as few attempts as possible. The game provides hints and ensures that each number is drawn only once per complete cycle.
- No-Repetition Logic: Uses a list (
listaDeNumerosSorteados) to ensure that the secret number does not repeat until all numbers within the limit (1 to 10) have been drawn. - Attempt Counter: Records the player's performance (correctly shows "attempt" or "attempts").
- Dynamic Hints: Guides the player by indicating if the secret number is "higher" or "lower" than the guess.
- Voice Accessibility: Includes the
responsiveVoice.jslibrary to read the game messages and interactions in Brazilian Portuguese. - Responsive Design: The interface adapts to different screen sizes.
| Technology | Purpose |
|---|---|
| HTML5 | Semantic structure of the game. |
| CSS3 | Styling, layout, and responsiveness. |
| JavaScript (ES6+) | Core game logic (drawing, checking, counting). |
| ResponsiveVoice.js | Speech synthesis. |
This project is fully front-end and does not require a server or external package installation (other than the voice library, which is loaded via CDN).
- Download the Files: Make sure the following files are in the same folder:
index.html(or your HTML file)app.js(with the JavaScript logic)style.css(with the styling CSS)- The folder
img/containing the assets (ia.png,code.png, etc.).
- Run: Open the
index.htmlfile directly in your preferred browser (Chrome, Edge, Firefox).
- Start: The game begins with the secret number drawn and the attempt counter set to 1.
- Guess: Enter your guess in the text field and click the "Guess" button.
- Result:
- Correct: The game congratulates the player and displays the total number of attempts. The "New Game" button is enabled.
- Wrong: The game indicates if the secret number is higher or lower, increments the counter, and clears the guess field.
- Restart: Click the "New Game" button to reset the counter, draw a new number, and disable the restart button.
The function below ensures that when drawing a new number, it is not already in the list of numbers chosen in the current round:
function gerarNumeroAleatorio() {
let numeroEscolhido = parseInt(Math.random() * numeroLimite + 1);
let quantidadeDeElementosNaLista = listaDeNumerosSorteados.length;
if (quantidadeDeElementosNaLista == numeroLimite) {
listaDeNumerosSorteados = [];
}
if (listaDeNumerosSorteados.includes(numeroEscolhido)) {
// If the number has already been drawn, try again
return gerarNumeroAleatorio();
} else {
// If it's new, add it to the list and return it
listaDeNumerosSorteados.push(numeroEscolhido);
return numeroEscolhido;
}
}