-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
52 lines (46 loc) · 2.35 KB
/
index.html
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
50
51
52
<!DOCTYPE html>
<html lang="en" ng-app="hangman">
<head>
<meta charset="UTF-8">
<title>Hangman</title>
<link rel="stylesheet" href="css/styles.css">
<script src="js/angular.min.js"></script>
</head>
<body ng-controller="StartHangman">
<p><a href="https://github.com/irff/hangman">Fork on GitHub</a></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>