Number guess game using javascript in hindi

Number guess game using javascript in hindi

Leave a Comment / Javascript / By
Post Views: 13

Contents

Introduction

हेलो दोस्तों आज हम इस post में Javascript के मदद से Number guess game create करने वाले है!. Number guess game को create करने के लिए हमें HTML,css और javascript जैसे technology के बारे में थोड़ी information होनी बहुत ही जरुरी है!. इस technology को जाने बगर आप इस game को खुद से develop नहीं कर पाएंगे!.

Number guess game structure

इस game में हम random number generate करेंगे और उस number को हमें guess करना होता है की वो random number कोनसा होगा!. random number generate होगा वह 1 to 20 के बीच में होगा!. इस game में user को number guess करने में आसानी हो इस लिए हमें user guess number और random के बीच compare बी कराएँगे ताकि user को पता चल सके की user ने जो number guess किया है वह random number से छोटा है या बड़ा उसके आधार पर user अपना next number guess कर सकता है!. और final में random number और user का number match होने पर हम success का message display करेंगे!.

Game के लिए इस्तेमाल किये जाने वाले Javascript functions

Math.random()

Game में random number generate करने के लिए  Math.random() function का इस्तेमाल किया है!. सामान्य तोर पर
random() function 0 और 1 के बीच random number generate करने के लिए किया जाता है!. इस generate number को फिर
20 से multiplied किया जाता है और 1-20 के बीच number को generate करने के लिए 1 जोड़ा जाता है!.

document.querySelector()

document.querySelector() का इस्तेमाल specific element का content को get करने के लिए इस्तेमाल किया गया है!.
document.querySelector() document में first match होने वाला element return करता है!.

HTML and CSS code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Javascript Number Guessing game</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">  
  <style>
  	input[type="number"] {
  		width: 100px;
    	height: 50px;
  	}
  	input.btn.btn-primary.event_btn {
          width: 100px;
          margin-top: 20px;
        }
        .msg {
          font-size: 20px;
          padding: 0px 0 15px;
          font-weight: 800;
        }
        .score_detail, .highscore_detail {
          font-size: 20px;
          font-weight: 800;
          padding: 5px 0 15px;
        }
        .container-fluid.text-center {
    	background-color: beige;
    	padding: 50px 0px;
        }
    .secret_number {
        width: 25rem;
        border-radius: 20px;
        border: 1px solid;
        margin: 0 auto;
        font-size: 8rem;
        background: #061338;
        color: #fff;
        margin-bottom: 40px;
        }
  </style>
</head>
<body> 
<div class="container-fluid text-center bg_clr">    
  <div class="row content">
    <div class="col-sm-12 text-center"> 
      <h1>Guess Number!</h1> 
      <div class="submit_input">	
      	<input type="button" class="btn  btn-primary restart_game" value="Restart game!">
      </div>      
      <hr>
      <div class="secret_number">?</div>
      <div class="col-sm-6 col-md-6 col-lg-6 text-right">
      	<div class="user_input">
      		<input type="Number" name="guess_num" class="guess_num">
      	</div>
      	<div class="submit_input">	
      	  <input type="button" class="btn  btn-primary event_btn" value="Click">
        </div>        
      </div>
      <div class="col-sm-6 col-md-6 col-lg-6 text-left">
      	<div class="msg">Guessing starting...!</div>
      	<div class="score_detail">
      		Score: <span class="score">0</span>
      	</div>
      	<div class="highscore_detail">
      		Highscore: <span class="highscore">0</span>
      	</div>
      </div>      
    </div>    
  </div>
</div>
</body>
</html>

Javascript code

<script>	
    //New coding for better 

    let final_nub = Math.trunc( (Math.random() * 20) + 1 );
  let score = 20;
  let highscore = 0;

  const guessNumber = function () {
  	const guess_num = Number( document.querySelector('.guess_num').value );

  	if( !guess_num ){  		
  		document.querySelector('.msg').textContent = 'Please Enter Guessing Number';
  	} else if ( guess_num === final_nub ) {
  		document.querySelector('.secret_number').textContent = final_nub;
  		document.querySelector('.msg').textContent = 'You are Winner!';
  		document.querySelector('.bg_clr').style.backgroundColor='green';
  		if( score > highscore ){
  			highscore = score;
  			document.querySelector('.highscore').textContent = highscore;
  		}

  	} else if( guess_num != final_nub ){
  		document.querySelector('.msg').textContent = guess_num > final_nub?"Guessing number is to high":"Guessing number is to low";
  		score--;
      document.querySelector('.bg_clr').style.backgroundColor='';  
  		if( score > 1 ){
  			document.querySelector('.score').textContent = score;
  		}else{
  			document.querySelector('.score').textContent = 0;
  			document.querySelector('.msg').style.color = "#ff0000";
  			document.querySelector('.msg').textContent = "You lost the game!";
  		}

  	} else {
  		// document.querySelector('.msg').style.backgroundColor = "#ff0000";
  		// document.querySelector('.msg').textContent = 'You lost the game!';

  	}       	
  }

  document.querySelector('.event_btn').addEventListener('click',guessNumber);	

  //restartGame
  const restartGame = function() {
  	final_nub = Math.trunc( (Math.random() * 20) + 1 );  	
    score = 20;    
    document.querySelector('.msg').style.color = "";
  	document.querySelector('.secret_number').textContent = '?';
  	document.querySelector('.msg').textContent = 'Guessing starting...!';
  	document.querySelector('.score').textContent = 0;
  	document.querySelector('.highscore').textContent = 0;
  	document.querySelector('.bg_clr').style.backgroundColor='';
  	document.querySelector('.guess_num').value ='';  	
  }
  document.querySelector('.restart_game').addEventListener('click',restartGame);
</script>

HTML& Javascript source code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Javascript Number Guessing game</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">  
  <style>
  	input[type="number"] {
  		width: 100px;
    	height: 50px;
  	}
  	input.btn.btn-primary.event_btn {
          width: 100px;
          margin-top: 20px;
        }
        .msg {
          font-size: 20px;
          padding: 0px 0 15px;
          font-weight: 800;
        }
        .score_detail, .highscore_detail {
          font-size: 20px;
          font-weight: 800;
          padding: 5px 0 15px;
        }
        .container-fluid.text-center {
    	background-color: beige;
    	padding: 50px 0px;
        }
    .secret_number {
        width: 25rem;
        border-radius: 20px;
        border: 1px solid;
        margin: 0 auto;
        font-size: 8rem;
        background: #061338;
        color: #fff;
        margin-bottom: 40px;
        }
  </style>
</head>
<body> 
<div class="container-fluid text-center bg_clr">    
  <div class="row content">
    <div class="col-sm-12 text-center"> 
      <h1>Guess Number!</h1> 
      <div class="submit_input">	
      	<input type="button" class="btn  btn-primary restart_game" value="Restart game!">
      </div>      
      <hr>
      <div class="secret_number">?</div>
      <div class="col-sm-6 col-md-6 col-lg-6 text-right">
      	<div class="user_input">
      		<input type="Number" name="guess_num" class="guess_num">
      	</div>
      	<div class="submit_input">	
      	  <input type="button" class="btn  btn-primary event_btn" value="Click">
        </div>        
      </div>
      <div class="col-sm-6 col-md-6 col-lg-6 text-left">
      	<div class="msg">Guessing starting...!</div>
      	<div class="score_detail">
      		Score: <span class="score">0</span>
      	</div>
      	<div class="highscore_detail">
      		Highscore: <span class="highscore">0</span>
      	</div>
      </div>      
    </div>    
  </div>
</div>
<script>	
    //New coding for better 

    let final_nub = Math.trunc( (Math.random() * 20) + 1 );
  let score = 20;
  let highscore = 0;

  const guessNumber = function () {
  	const guess_num = Number( document.querySelector('.guess_num').value );

  	if( !guess_num ){  		
  		document.querySelector('.msg').textContent = 'Please Enter Guessing Number';
  	} else if ( guess_num === final_nub ) {
  		document.querySelector('.secret_number').textContent = final_nub;
  		document.querySelector('.msg').textContent = 'You are Winner!';
  		document.querySelector('.bg_clr').style.backgroundColor='green';
  		if( score > highscore ){
  			highscore = score;
  			document.querySelector('.highscore').textContent = highscore;
  		}

  	} else if( guess_num != final_nub ){
  		document.querySelector('.msg').textContent = guess_num > final_nub?"Guessing number is to high":"Guessing number is to low";
  		score--;
      document.querySelector('.bg_clr').style.backgroundColor='';  
  		if( score > 1 ){
  			document.querySelector('.score').textContent = score;
  		}else{
  			document.querySelector('.score').textContent = 0;
  			document.querySelector('.msg').style.color = "#ff0000";
  			document.querySelector('.msg').textContent = "You lost the game!";
  		}

  	} else {
  		// document.querySelector('.msg').style.backgroundColor = "#ff0000";
  		// document.querySelector('.msg').textContent = 'You lost the game!';

  	}       	
  }

  document.querySelector('.event_btn').addEventListener('click',guessNumber);	

  //restartGame
  const restartGame = function() {
  	final_nub = Math.trunc( (Math.random() * 20) + 1 );  	
    score = 20;    
    document.querySelector('.msg').style.color = "";
  	document.querySelector('.secret_number').textContent = '?';
  	document.querySelector('.msg').textContent = 'Guessing starting...!';
  	document.querySelector('.score').textContent = 0;
  	document.querySelector('.highscore').textContent = 0;
  	document.querySelector('.bg_clr').style.backgroundColor='';
  	document.querySelector('.guess_num').value ='';  	
  }
  document.querySelector('.restart_game').addEventListener('click',restartGame);
</script>
</body>
</html>

Related posts:

javascript variable in hindiJavascript variable in Hindi( Javascript variable let , const, var ) Javascript array methodJavascript array method in hindi javascript simple calculator in hindiCreate simple calculator using javascript in hindi document.getElementById method in hindiJavascript document.getElementById() method in hindi

Leave a Comment

Your email address will not be published.