Game – Guess The Number – Angular

Lets start playing an angular game.

Demo

This game is to guess the computer generated random number between 1 and 100. If you enter a number that is more than the actual number then you will get an alert stating “Your number is higher”. If it is lower than actual then you will get “Your number is lower”.

Guess the word Demo

Few Important Numbers to make learning Awesome

You might wonder how to code this up with your normal javascript and css. Lets scale that up and think you already found a logic for this. Now let me know how much lines of code will you need to create something like this??? …

Is your answer is around 100? or 200? or 500? Lets forget about the html and think of javascript alone. Now think how much code do you need? around 100 to be minimum. Lets come to the reality with angular.

You need just 40 lines with angular to code the entire application with bootstrap css. The javascript alone will take less than 15 lines. Now lets digg into how we do this.

Coding

First lets create a simple html with bootstrap that gives you basic options using bootstrap. (Creating the above shown image here)

<div class="container" ng-controller="GuessTheNumberController">
	<h2>Guess the Number !</h2>
	<p class="well lead">Guess the computer generated random number between 1 and 1000.</p>
	<label>Your Guess: </label><input type="number" ng-model="guess"/>
	<button ng-click="verifyGuess()" class="btn btn-primary btn-sm">Verify</button>	
	<button ng-click="initializeGame()" class="btn btn-warning btn-sm">Restart</button>	
	<p>
		<p ng-show="deviation<0" class="alert alert-warning">Your guess is higher.</p>
		<p ng-show="deviation>0" class="alert alert-warning">Your guess is lower.</p>
		<p ng-show="deviation===0" class="alert alert-success">Yes! That"s it.</p>
	</p>
	<p class="text-info">No of guesses : <span class="badge">{{noOfTries}}</span><p>
</div>

You can see we already uses few directives here.
ngController, ngModel, ngClick, ngShow

Want to know in detail you can see our previous courses here

ngController – Controllers in Angular
ngModel – Working with ngModel Directive
ngClick and ngShow – Data binding using angular

Now you can see that I am using a controller named GuessTheNumberController and a scope variable named deviation

Now lets see that controller and look at what it does

                angular.module('app',[])
		.controller('GuessTheNumberController', GuessTheNumberController);
		function GuessTheNumberController($scope) {
			$scope.verifyGuess = function () {
				$scope.deviation = $scope.original - $scope.guess;
				$scope.noOfTries = $scope.noOfTries + 1;
			}
			$scope.initializeGame=function() {
				$scope.noOfTries = 0;
				$scope.original = Math.floor((Math.random() * 1000) + 1);
				$scope.guess = null;
				$scope.deviation = null;
			}
			$scope.initializeGame();
		}

You can see I am using just two functions. One for initializing the angular game and another for verifying your guessed word. Here we are making the use of random number generation that generates a random number below 100. That random number will be your original number. Then for each number of guess we are calling verifyGuess function that calculates deviation and increases the number of tries that you make.

You can see how easy it is by using angular in your application. Logic is what you need to think and use it in your own way using angular.

Comment if you find any difficulty in angular. I am here to help you with that.