April 6, 2016 10:26 pm

Creating the logic (Angular controller) of a Hangman game

Hangman is a popular game in which users have to guess the characters in a word with missing letters. Each time they guess a character that does not exist – a man who is being hanged is slowly drawn on the screen. When they get hanged or they complete the word, a new word is given for them and they start anew.Creating a Hangman game with Nodejs Angularjs

Read Part 1: Creating a Hangman game with Node.js/Angular.js

Firstly, we create our main module which we call hangman. We use it in our HTML view through the ng-app directive.

Thereafter, we create our only controller, call it hangIt and define the function where the fun is going to be in. Besides the usual $scope dependency injection, we also injection $http which would be used for AJAX requests.

In our controller, we initialize some properties. What they do is shown in comments.

Afterwards, define the loadWords method which will load all words by issuing an AJAX request to the back-end API route and set up some of the game properties.

When it is called, it will reset the current round’s attempts (we will load a new word – so we start a new round) and the currently displayed pieces of the hangman’s graphic .

Afterwards, it will issue an AJAX GET request to our API. Upon receiving a response, it will save the response’s data to the $scope.wordsproperty (all possible words). Our API returns an array and sets the appropriate headers with the help of Express’ res.send() method so we can do that.

After we have all the words, we pick a random word, and replace a random number of characters of the words to underscores (_) and save the resulting string to the $scope.theGameWord property. We also save the word before replacing any characters in the $scope.completedWord property.

Following that, we define our checkGuess function which will be called when a user submits his guess.

If there is no character entered by the user – it just returns.

Then, it sets a variable called correctChoice to false. This variable would tell us if the user has guessed a character. If he guessed a character, we would not consider it as a failed attempt and would not draw more parts of the ASCII hangman. Otherwise, the user would be one attempt closer to failing the word.

Thus, we loop over the characters in the completed word (without any missing characters) and check if any characters in what is presented to the user (any characters that are shown as underscores (_) to the user) should in fact have a value that is equal to the character that the user guessed.

If so, this is not a failed attempt so we set correctChoice to true. Then, we replace the underscored character with what the user guessed.  Outside of the loop, if the choice was incorrect we draw another line of the Hangman ASCII and increment the attempts property. We also empty the user’s input so he can just type another character and check if all characters are revealed by the user. If that is the case, he has successfully completed this word and we load a new one.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
$scope.checkGuess = function() {
 
if (!$scope.guess || !$scope.guess.length) {
 
return;
 
}
 
var correctChoice = false;
 
for (var i = 0 ; i < $scope.completedWord.length;i++) {
 
if ($scope.theGameWord[i] === “_” && $scope.completedWord[i] === $scope.guess) {
 
correctChoice = true;
 
var gameWordArr = $scope.theGameWord.split(“”);
 
gameWordArr[i] = $scope.guess;
 
$scope.theGameWord = gameWordArr.join(“”);
 
}
 
}
 
if (!correctChoice) {
 
$scope.attempts += 1;
 
$scope.drawMan();
 
}
 
// empty user’s input
 
$scope.guess = “”;
 
if ($scope.theGameWord.indexOf(“_”) === 1) {
 
// he completed the word
 
$scope.numCompletedWords +=1;
 
$scope.loadWords();
 
}
 
}

Our final method is called drawMan. In it, we check if the user has attempted unsuccessfully to guess the word more times than the Hangman ASCII has lines (array items) in it. If that is the case, he failed and so we show him/her the correct word, load a new word and increment the total failed words statistics.

If he has not failed the word yet, we draw a line (an array item) for each failed attempt of the user. In other words, we save the drawn ASCII string to the currentDrawingproperty which will be used by Angular’s two-way data binding in our HTML view to be automatically re-displayed.

Conclusion

By now, you should be able to create various different applications using Angular as the last tutorials concerning Angular have touched upon enough matter to make you dangerous!

Tutorial Categories:

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories: