Number Guessing Game using JavaScript

Prerequisites:

The game is to guess a random number generated by computer in range 1 – 10 in minimum number of Guesses.

Functions to be used:



1. document.getElementById(“id given”): document.getElementById() is used to fetch an element from the HTML page having the id as provided (specified) by the user.
“.value” is used to access the value of the HTML element accessed.

2. Math.random() : The random() function is used to generate a random number between 0 (inclusive) and 1 (exclusive). This generated number is then multiplied with 10 and added 1 to generate numbers from 1 – 10.

3. Math.floor() : The floor() function is used to return the number to the nearest integer (downwards). The value will not be rounded, if the passed argument is an integer.

Implementation of the Game.

filter_none

edit
close

play_arrow

link
brightness_4
code

                        <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Number Guessing Game</title>
  
    <style>
        html {
    font-family: sans-serif;
    }
      
        body {
    width: 50%;
    max-width: 800px;
    min-width: 480px;
    margin: 0 auto;
    }
    </style>
</head>
  
<body>
<h1>Guess The Number</h1>
  
<p>We have selected a random number between 1 - 10. 
See if you can guess it.</p>
  
<div class="form">
    <label for="guessField">Enter a guess: </label>
    <input type = "text" id = "guessField" class = "guessField">
    <input type = "submit" value = "Submit guess" 
           class = "guessSubmit" id = "submitguess">
</div>
  
<script type = "text/javascript">
  
    // random value generated
    var y = Math.floor(Math.random() * 10 + 1);
      
    // counting the number of guesses
    // made for correct Guess
    var guess = 1;
      
    document.getElementById("submitguess").onclick = function(){
      
   // number guessed by user     
   var x = document.getElementById("guessField").value;
  
   if(x == y)
   {    
       alert("CONGRATULATIONS!!! YOU GUESSED IT RIGHT IN "
               + guess + " GUESS ");
   }
   else if(x > y) /* if guessed number is greater
                   than actual number*/ 
   {    
       guess++;
       alert("OOPS SORRY!! TRY A SMALLER NUMBER");
   }
   else
   {
       guess++;
       alert("OOPS SORRY!! TRY A GREATER NUMBER")
   }
}
</script>
</body>
</html>                    

chevron_right






                        filter_none








Output:





          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
This article is contributed by singhshivam and vikas_5666. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.