Guess the Number

"Guess the Number" is a simple yet addictive game that challenges your intuition and deduction skills. The goal is to guess the correct number randomly chosen by the game, which lies between 1 and 100. Each time you submit a guess, you'll receive instant feedback: If your guess is too high, you'll be prompted to try a lower number. If your guess is too low, you'll be guided to aim higher. And if you get it right, you'll be celebrated for your accuracy! This game is perfect for quick, fun entertainment while sharpening your problem-solving skills. Are you ready to take on the challenge and guess the number in as few attempts as possible? 🎯

Here is the code

CSS

h1 {
    margin-bottom: 20px;
}

.game-container {
    text-align: center;
    max-width: 400px;
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

input[type="number"] {
    width: 60%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.guess-btn {
    padding: 10px 20px;
    margin-top: 10px;
    font-size: 1em;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.guess-btn:hover {
    background-color: #0056b3;
}

.message {
    margin-top: 15px;
    font-size: 1.1em;
}

HTML

<div class="game-container">
    <h1>Guess the Number</h1>
    <p>I'm thinking of a number between 1 and 100. Can you guess it?</p>
    <input type="number" id="guess" placeholder="Enter your guess">
    <button class="guess-btn" id="submit-btn">Submit</button>
    <p class="message" id="message"></p>
    <p>Score: <span id="score-display">100</span></p>
</div>

let randomNumber = Math.floor(Math.random() * 100) + 1;
const guessInput = document.getElementById('guess');
const submitBtn = document.getElementById('submit-btn');
const message = document.getElementById('message');
const scoreDisplay = document.getElementById('score-display');
const hiddenScore = document.getElementById('hiddenScore');

let attempts = 0; // Number of tries
let score = 100; // Initial score

function checkGuess() {
    const userGuess = parseInt(guessInput.value);

    // Validation de l'entrée
    if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
        message.textContent = 'Please enter a valid number between 1 and 100.';
        message.style.color = 'orange';
        return;
    }

    attempts++; // Increment nb of tries

    // Decrease score on each try
    score = Math.max(100 - attempts * 10, 0); // Score decrease of 10 points per try, minimum 0
    scoreDisplay.textContent = score;
    hiddenScore.value = score;

    // Check if player has found the number
    if (userGuess === randomNumber) {
        message.textContent = `Congratulations! You guessed it right! The number was ${randomNumber}.`;
        message.style.color = 'green';
        document.querySelector('.share-buttons').style.display = 'flex'; // Show share buttons
        randomNumber = Math.floor(Math.random() * 100) + 1;
        attempts = 0;
    } else if (userGuess > randomNumber) {
        message.textContent = 'Too high! Try again.';
        message.style.color = 'red';
    } else {
        message.textContent = 'Too low! Try again.';
        message.style.color = 'red';
    }

    guessInput.value = ''; // Reset input field
}

submitBtn.addEventListener('click', checkGuess);

guessInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        checkGuess();
    }
});