Huckle Buckle

In Huckle Buckle Beanstalk, the player must guess the random number between 1 and 100. The player gets feedback after each guess to help guide them in their next guess.

Although the game looks simple (and it is fairly simple, from an interface perspective), much thought went into the user experience. It neatly encapsulates the way I think about design in terms of how it affects the user.

The user may input a guess either by clicking the on-screen guess button or by pressing the enter key. Once a guess is entered, the feedback is displayed, the guess field is cleared, and input is focused back on the field making it quick and easy to enter the next guess.

Another small touch is that the game tells how many guesses it took for the player to guess correctly. This facilitates a competitive drive to win in the fewest guesses.

Take a look at the code to see how the game was built.

Huckle Buckle

Huckle Buckle is adaptive to screen size. I've used Google Fonts to create a whimsical look for the interface.

Comparison Logic

Most of the logic of the game lies in this comparison.

<code class="language-javascript">// Compare the guess to the number and previous guess. Place feedback on the page for the player.
function compareGuess(event) {
    event.preventDefault();
    // Grab the guess from the text input field
    var guess = $('#guess').val();
    if (validGuess(guess)) {
        // Turn off any error messages
        $('.error').addClass('off').removeClass('on');
        // Convert guess value to an integer for comparison
        guess = parseInt(guess, 10);
        // Feedback for a correct guess. Show the reset button to start a new game.
        if (guess === number) {
            $('#guess-vs-number').text('You got it! The number was ' + number + '.');
            $('#guess-vs-guess').hide();
            $('#num-guesses').text('You made ' + numGuesses + ' guesses.');
            $('#reset').removeClass('off');
        // Feedback for a low guess
        } else if (number > guess) {
            $('#guess-vs-number').text('Higher than ' + guess);
        // Feedback for a high guess
        } else {
            $('#guess-vs-number').text('Lower than ' + guess);
        }
        // Blank out the guess input field and return focus to it
        $('#guess').val('').focus();
        // Increment number of guesses
        numGuesses++;
        if (previousGuess) {
            // Find distances of the current and previous guesses from the actual number
            var previousDistance = Math.abs(number - previousGuess);
            var currentDistance = Math.abs(number - guess);
            // Feedback for guess versus previous guess comparison
            if (guess === previousGuess) {
                $('#guess-vs-guess').text("Same guess!");
            } else if (currentDistance < previousDistance){
                $('#guess-vs-guess').text("Getting warmer...");
            } else if (currentDistance > previousDistance) {
                $('#guess-vs-guess').text("Getting colder...");
            } else {
                $('#guess-vs-guess').text("Same distance...");
            }
        }
        // Set new previous guess
        previousGuess = guess;
        // Display the response
        $('.response').removeClass('off');
    } else {
        // Give error for invalid guess. Blank out the guess field and return focus.
        $('.error').removeClass('off').addClass('on');
        $('#guess').val('').focus();
    }
}