There are two folders and an HTML file for the Hangman game. The two folders are named as css and js. The index.html HTML file should contain the following code:
<html lang="en" ng-app="hangman">
<head>
<title>Hangman</title>
<link rel="stylesheet" href="css/styles.css">
<script src="js/angular.min.js"></script>
</head>
<body ng-controller="StartHangman">
<p>Hangman</p>
<svg width="400" height="400">
<rect ng-show="failedGuess.length >= 1" x="0" y="0" width="40" height="400"></rect>
<rect ng-show="failedGuess.length >= 2" x="40" y="20" width="200" height="40"></rect>
<rect ng-show="failedGuess.length >= 3" x="173" y="50" width="4" height="100"></rect>
<circle ng-show="failedGuess.length >= 3" cx="175" cy="120" r="40"></circle>
<line ng-show="failedGuess.length >= 4" x1="175" y1="150" x2="175" y2="185" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
<line ng-show="failedGuess.length >= 4" x1="175" y1="180" x2="100" y2="240" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
<line ng-show="failedGuess.length >= 5" x1="175" y1="180" x2="250" y2="240" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
<line ng-show="failedGuess.length >= 6" x1="175" y1="180" x2="175" y2="265" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
<line ng-show="failedGuess.length >= 7" x1="175" y1="260" x2="120" y2="340" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
<line ng-show="failedGuess.length >= 8" x1="175" y1="260" x2="230" y2="340" style="stroke:rgb(0,0,0)" stroke-width="10"></line>
</svg>
<div ng-show="stage == 'initial'">
<h2>Please enter your secret words:</h2>
<input type="text" ng-model="secretWords" autofocus ng-keyup="$event.keyCode == 13 ? startGame() : null">
<button ng-click="startGame()">Enter</button>
</div>
<div ng-show="stage == 'play'">
<h1>{{ answer }}</h1>
<h2>Failed guess ({{ failedGuess.length }}) = {{ failedGuess}}</h2>
<input type="text" ng-model="charGuess" id="char-guess" ng-keyup="$event.keyCode == 13 ? guess(charGuess) : null" placeholder="Guess a letter">
<button ng-click="guess(charGuess)">Enter</button>
</div>
<div ng-show="stage == 'won'">
<h1>You Win! :)</h1>
<h2>That's right, the secret words is {{ secretWords }}</h2>
<p>Press F5 to replay</p>
</div>
<div ng-show="stage == 'lost'">
<h1>You Lose! :(</h1>
<h2>The secret word is {{ secretWords }}</h2>
<p>Press F5 to replay</p>
</div>
<script src="js/hangman.js"></script>
</body>
</html>The css folder should have a styles.css file. The styles.css file should contain the following code:
body {
font-family: monospace;
text-align: center;
font-size: 16px;
line-height: 1.40;
}
input[type="text"] {
padding: 5px;
font-family: monospace;
height: 30px;
font-size: 1.8em;
background-color: #fff;
border: 2px solid #000;
vertical-align: bottom;
}
svg {
margin: 0 0 30px;
}
button {
cursor: pointer;
margin: 0;
height: 44px;
background-color: #fff;
border: 2px solid #000;
}There should be two JavaScript files in the js folder, angular.min.js and hangman.js.
The angular.min.js file is a framework. You can download it from https://angularjs.org/ or it is available with the code bundle of the book.
The hangman.js file should have the following code:
var hangman = angular.module('hangman', []).controller('StartHangman', StartHangman);
function StartHangman($scope, $document) {
$scope.stage = "initial";
$scope.secretWords = "";
$scope.answer = "";
$scope.failedGuess = [];
var hasWon = function() {
var foundDash = $scope.answer.search(/-/);
return (foundDash == -1);
}
var hasLost = function() {
return ($scope.failedGuess.length >= 8);
}
$scope.startGame = function() {
$scope.secretWords = $scope.secretWords.toLowerCase();
for(i in $scope.secretWords) {
$scope.answer += $scope.secretWords[i] == ' ' ? ' ' : '-';
}
$scope.stage = "play"
}
$scope.guess = function(ch) {
ch = ch.toLowerCase();
$scope.charGuess = "";
if(ch.length != 1) {
if(ch.length > 1) {
alert("Please only enter one character at a time");
}
return ;
}
/* If ch is already in the failed guess list */
for(i in $scope.failedGuess) {
if(ch == $scope.failedGuess[i]) return ;
}
/* Check if it's part of the answer */
var found = false;
$scope.answer = $scope.answer.split(""); /* convert to array of char */
for(i in $scope.secretWords) {
if($scope.secretWords[i] === ch) {
found = true;
$scope.answer[i] = ch;
}
}
$scope.answer = $scope.answer.join(""); /* convert back to string */
if(!found) {
$scope.failedGuess.push(ch);
}
if(hasWon()) {
$scope.stage = "won";
}
if(hasLost()) {
$scope.stage = "lost";
}
}
}We used var hangman = angular.module('hangman', []).controller('StartHangman', StartHangman); to import our angular.min.js file and start controlling the rest of our game's code.
We wrote a StartHangman($scope, $document) {} function, where we will write our code. We passed two variables, $scope and $document, from our angular.min.js file.
We initialized few variables, as follows:
$scope.stage = "initial"; $scope.secretWords = ""; $scope.answer = ""; $scope.failedGuess = [];
We wrote two functions for winning and losing the game, as follows:
var hasWon = function() {
var foundDash = $scope.answer.search(/-/);
return (foundDash == -1);
}
var hasLost = function() {
return ($scope.failedGuess.length >= 8);
}We have fixed our number of guesses here. Then, we wrote a function to start our game. We made an object and used the inheritance property of JavaScript, as shown in the following:
$scope.startGame = function() {
$scope.secretWords = $scope.secretWords.toLowerCase();
for(i in $scope.secretWords) {
$scope.answer += $scope.secretWords[i] == ' ' ? ' ' : '-';
}
$scope.stage = "play"
}We took an input from the player in order to store as our secret word.
The prompt page of the game will look similar to the following image:
Then, our most important function, $scope.guess = function(ch){}, was introduced. We passed a character to the function and checked whether it matches any letters entered by the player with the secret word.