How to
Guessing Game with a twist
Create a number guessing game between 1 and a number of your choice
It’s always fun to add a little levity when learning coding. Building a simple game is a good way to flex those logic muscles and lighten the mood a bit. Here, I am going to demo how to construct a simple Javascript guessing game called higher-lower. Normally, it would have a user guess a number between 1 and 25 or 100, but this one will have an extra layer of customization. The user will be about to change the number spread to make it as easy or hard as their heart desires.
HTML/CSS
The purpose of this how-to is really to get into the JavaScript aspects of the game so I am not going to dive into the HTML or CSS portions of this much. It is important to have that initial HTML structure to be able to select elements with the JavaScript. I believe you might be able to do the whole thing in JS alone but that is just not how i chose to do it. Anyway, here is a snapshot of what my HTML looks like and I will let your imagination run wild for the CSS.
Prompt and Validation
First, we are going to need to start out with a prompt for the user to be able to enter their desired number range. You could use form data and inputs to handle that or you could create a variable and set it equal to the data you get back from the prompt. Prompting is very simple and straightforward in JS, just call window.prompt(#whatever you want to ask).
However, it is not going to be that simple if you would like to validate the user’s answer and make sure you are getting the right one back. For instance, is the answer actually a number, is the number a positive/negative one.
You are going to want to create a function that takes in a prompt and loops through a series of statements using a while loop, checking for those very things. Set up some variables for valid input and the initial number. Return that initial number if it satisfies the conditions of being a number and greater than 0(since we don’t want letters, only integers, and the set of numbers should start at 1, not negative). You may want to console.log the initial number as well just to make sure you are getting back what you think you should.
Right before returning that initial number, you can use the getElementByID built in function to select an element and repeat the prompt input back on the screen for a better user experience.
Now that we have our number set, we need the game to spit out the actual number that we are trying to get. Luckily JavaScript has some built in math functions to make that process easier as well.
Use Math.floor and Math.random to randomly choose an integer and multiply that by the variable you chose earlier to store the input from the prompt. In my case, I chose pickedNumber. Finally, add 1 to the end of it, since that is where our number set starts and set it all to another variable name(num).
Logic
This is the meat and potatoes of the operation. Where you will create another loop to go through each guess that a user inputs and check it against the randomly generated number. We can add little messages once it is checked to give the user clues as to which way to figure their next guess, i.e. higher or lower. It is also helpful to throw in a few more checks to ensure that these guesses are in fact numbers, are valid(in the range of previously specified numbers) and have not been guessed already.
The add for a better user experience, in the end I chose to add some logic that keeps track of the users guesses and a counter for how many tries it took them. Outside of this next function we are about to create I initiated a count and set it equal to 0 as well as initiated a new array to keep track.
To get this function(do_guess) started, let’s first create another variable(guess) and select the input field from the HTML where the user inputs their guess. Using the id of “guess” grab that value by using .value. Since what you would be getting back is a string and not an integer like we want, encapsulate it with the JavaScript Number function.
Also, create a message variable to be selected with the getElementById function to display all the messages during the game like “try a higher number.”
For the loop I chose to create an if, else if statement. There are many other ways to set this up like a switch, case statement or maybe even a while, do loop. This is just what made sense in my brain. Carefully run through each of the scenarios that you need to create a specific outcome for. The win, the higher number, the lower number, out of range, and not a number. If it is in fact a valid guess we want to push that answer into the previously created empty array using the .push function and add one to our running count.
Additionally, create another nested loop inside the higher and lower number scenarios that checks to see if that array that we have been pushing the guesses into has that number already. I used the .includes method, but there are a few ways to set that up as well. Here is another opportunity to console.log the guessArray to make sure that you are getting the numbers back that you want.
All together it looks a little something like this…
Finally
There you have it! A fully functional guessing game that is customizable to make as easy or hard as you want. Not slap some CSS or bootstrap on that thing and make it your own. It was quite rewarding to see it all working in the end and had a great time building it. Hopefully this was helpful to anyone looking to do something similar and if you like this content, check out some of my other blogs or connect with me on LinkedIn.
