-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
160 lines (153 loc) · 4.72 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hangman</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="message-container" id="message-container">
<div class="message">
<h1>Playing Hangman</h1>
<div style="overflow-y: scroll; height: 70%; font-size: 14px">
<p>
Hangman is an old school favorite, a word game where the goal is
simply to find the missing word or words.
</p>
<p>
You will be presented with a number of blank spaces representing the
missing letters you need to find.
</p>
<p>
Use the keyboard to guess a letter (vowels will be visible as
hints).
</p>
<p>
If your chosen letter exists in the answer, then all places in the
answer where that letter appears will be revealed.
</p>
<p>
After you've revealed several letters, you may be able to guess what
the answer is and fill in the remaining letters.
</p>
<p style="color: maroon">
Be warned, every time you guess a letter wrong you loose a life and
the hangman begins to appear, piece by piece.
</p>
<p>
Solve the mystery before all the pieces appear because then the
hangman dies.
</p>
<p style="font-style: oblique">You win or he dies!</p>
<p style="font-weight: 800">
HINT: The word is one of world's countries.
</p>
</div>
<button onclick="closeWelcomeMessage()">Let's play</button>
</div>
</div>
<h1
style="
display: flex;
justify-content: space-evenly;
align-items: center;
width: 70%;
"
>
<div>HANGMAN</div>
<svg
onClick="location.reload()"
xmlns="http://www.w3.org/2000/svg"
style="width: 40px; height: 40px"
viewBox="0 0 512 512"
>
<title>Refresh Circle</title>
<path
d="M256 48C141.31 48 48 141.32 48 256c0 114.86 93.14 208 208 208 114.69 0 208-93.31 208-208 0-114.87-93.13-208-208-208zm0 313a94 94 0 010-188h4.21l-14.11-14.1a14 14 0 0119.8-19.8l40 40a14 14 0 010 19.8l-40 40a14 14 0 01-19.8-19.8l18-18c-2.38-.1-5.1-.1-8.1-.1a66 66 0 1066 66 14 14 0 0128 0 94.11 94.11 0 01-94 94z"
/>
</svg>
</h1>
<div class="wrong-letters-container">
<div id="wrong-letters"></div>
</div>
<div class="game-container">
<svg height="250" width="200" class="figure-container">
<!-- Rod -->
<line x1="60" y1="20" x2="140" y2="20" />
<line x1="140" y1="20" x2="140" y2="50" />
<line x1="60" y1="20" x2="60" y2="230" />
<line x1="20" y1="230" x2="100" y2="230" />
<!-- Head -->
<circle
cx="140"
cy="70"
r="20"
class="figure-part"
fill="black"
stroke="black"
/>
<!-- Body -->
<line
x1="140"
y1="90"
x2="140"
y2="150"
class="figure-part"
stroke="black"
/>
<!-- Arms -->
<line
x1="140"
y1="120"
x2="120"
y2="100"
class="figure-part"
stroke="black"
/>
<line
x1="140"
y1="120"
x2="160"
y2="100"
class="figure-part"
stroke="black"
/>
<!-- Legs -->
<line
x1="140"
y1="150"
x2="120"
y2="180"
class="figure-part"
stroke="black"
/>
<line
x1="140"
y1="150"
x2="160"
y2="180"
class="figure-part"
stroke="black"
/>
</svg>
</div>
<div class="word" id="word"></div>
<div class="text-container">
<input id="txtUserInput" type="text" placeholder="" maxlength="1" />
</div>
<h1>Enter alphabet here</h1>
<!-- Container for final message -->
<div class="popup-container" id="popup-container">
<div class="popup">
<h2 id="final-message"></h2>
<button id="play-button">Play Again</button>
</div>
</div>
<!-- Notification -->
<div class="notification-container" id="notification-container">
<p>You have already entered this letter</p>
</div>
<script src="scripts.js"></script>
</body>
</html>