Numbers Guessing Game Javascript
OverviewWe will create a simple guess the number type game. It will choose a random number between 1 and 100, then challenge the player to guess the number in 10 turns. After each turn the player would be told if they are right or wrong — and, if they are wrong, whether the guess was too low or too high. It would also tell the player what numbers they previously guessed.
The game will end once the player guesses correctly, or once they run out of turns. When the game ends, the player should be given an option to start playing again.Upon looking at this brief, the first thing we can do is to start breaking it down into simple actionable tasks, in as much of a programmer mindset as possible:. Generate a random number between 1 and 100. Record the turn number the player is on. Let randomNumber = Math.floor(Math.random. 100) + 1;const guesses = document.querySelector('.guesses');const lastResult = document.querySelector('.lastResult');const lowOrHi = document.querySelector('.lowOrHi');const guessSubmit = document.querySelector('.guessSubmit');const guessField = document.querySelector('.guessField');let guessCount = 1;let resetButton;This section of the code sets up the variables and constants we need to store the data our program will use.
Codehs Guessing Game Answer
Variables are basically containers for values (such as numbers, or strings of text). You create a variable with the keyword let (or var) followed by a name for your variable (you'll read more about the difference between the keywords in a ). Constants are used to store values that you don't want to change, and are created with the keyword const. CheckGuess;After pressing Return/ Enter, you should see an alert come up that says 'I am a placeholder'; we have defined a function in our code that creates an alert whenever we call it.Note: You'll learn a lot more about functions.OJavaScript operators allow us to perform tests, do maths, join strings together, and other such things.If you haven't already done so, save your code, refresh the page in your browser, and open the. Then we can try typing in the examples shown below — type in each one from the 'Example' columns exactly as shown, pressing Return/ Enter after each one, and see what results they return. If you don't have easy access to the browser developer tools, you can always use the simple built-in console seen below:First let's look at arithmetic operators, for example:OperatorNameExample+Addition6 + 9-Subtraction20 - 15.Multiplication3. 7/Division10 / 5You can also use the + operator to join text strings together (in programming, this is called concatenation).
Try entering the following lines, one at a time. Name = name + ' says hello!' ;When we are running true/false tests (for example inside conditionals — see ) we use. For example:OperatorNameExampleStrict equality (is it exactly the same?)5 2 + 4!Non-equality (is it not the same?)'Chris'! 'Ch' + 'ris'Greater than10 20CReturning to our checkGuess function, I think it's safe to say that we don't want it to just spit out a placeholder message. We want it to check whether a player's guess is correct or not, and respond appropriately.At this point, replace your current checkGuess function with this version instead.
Javascript Alphabet Guessing Game
GuessSubmit.addEventListener('click', checkGuess);Here we are adding an event listener to the guessSubmit button. This is a method that takes two input values (called arguments) — the type of event we are listening out for (in this case click) as a string, and the code we want to run when the event occurs (in this case the checkGuess function). Note that we don't need to specify the parentheses when writing it inside ).Try saving and refreshing your code now, and your example should work — to a point. The only problem now is that if you guess the correct answer or run out of guesses, the game will break because we've not yet defined the setGameOver function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.Finishing the game funLet's add that setGameOver function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript.
GuessField.focus;This line uses the method to automatically put the text cursor into the text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.Let's analyze what's going on here in a bit more detail. In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.In this particular case, we first created a guessField constant that stores a reference to the text input form field in our HTML — the following line can be found amongst our declarations near the top of the code.
Const guessField = document.querySelector('.guessField');To get this reference, we used the method of the object. querySelector takes one piece of information — a that selects the element you want a reference to.Because guessField now contains a reference to an element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is focus, so we can now use this line to focus the text input. GuessField.focus;Variables that don't contain references to form elements won't have focus available to them. For example, the guesses constant contains a reference to a element, and the guessCount variable contains a number.Playing with browser objectsLet's play with some browser objects a bit.
First of all, open up your program in a browser. Next, open your, and make sure the JavaScript console tab is open. Type in guessField and the console will show you that the variable contains an element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!.
Now type in the following.