-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (108 loc) · 5.33 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
<!DOCTYPE html>
<html lang="en-GB" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EDXHR6SNC8"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-EDXHR6SNC8');
</script>
<title>Hangman Game</title>
<link rel="shortcut icon" href="media/images/svg/hangman-brand.svg">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&family=Fredoka+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Menu panel at the top of browser whereby game can be controlled -->
<nav class="menu-panel">
<div class="panel-left">
<img class="logo" src="media/images/svg/hangman-brand.svg" alt="hanging man logo">
<h1 class="main-title">HANGMAN</h1>
</div>
<div class="panel-right">
<button id="start">Start Game (Normal)</button>
<button id="hard-mode">Enable Hard Mode</button>
<button id="open-btn">☰ Categories</button>
</div>
</nav>
<!-- Sidebar containing category select buttons -->
<div id="cat-sidebar" class="sidebar">
<a href="javascript:void(0)" id="close-btn">×</a>
<h2>CATEGORIES</h2>
<button id="food">Food</button>
<button id="countries">Countries</button>
<button id="nouns">Nouns</button>
<button id="animals">Animals</button>
<button id="movies">Movies</button>
<button id="video-games">Video Games</button>
<button id="random-word">3 Random Words Challenge</button>
<button id="user-choice">Guess My Word!</button>
</div>
<!-- Overlay with content / messages. Displayed post-round & game over -->
<div id="myNav" class="overlay">
<div class="overlay-content">
<section id="round-end-display">
<p id="end-round-text"></p>
<p id="word-answer"></p>
<p id="game-text"></p>
<p id="hi-score"></p>
</section>
</div>
</div>
<!-- Wordnik API and sfx acknowledgements -->
<h3>
<i>Random Words </i>category is brought to you courtesy of <a href="https://www.wordnik.com/">Wordnik.</a><br>
Special thanks to <span class="credits">Matheus</span> for the button UI SFX and <span class="credits">Cleyton Kauffman</span> for the music, available from <a href="https://opengameart.org/">OpenGameArt.</a><br>
Game design and programming by <span class="credits">Ryan Hadley.</span>
</h3>
<!-- Main flex container for positioning and styling purposes -->
<section class="main-flex-wrapper">
<!-- Section containing game rules -->
<section class="rules">
<h2>Rules and Instructions</h2>
<ul>
<li>To begin, select a category from the panel at the top of the page and then select <i>Start Game</i></li>
<li>A word box is then generated containing the mystery word. Enter your guess letter and press <i>Submit</i></li>
<li>The game is played in rounds; successfully guessing a word will end the round and load the next word</li>
<li>Selecting <i>Hard Mode</i> ensures that your penalties carry over between rounds when ordinarily they'd reset. That means 10 guesses only throughout an entire category! However, it can be turned off at almost any stage of the game</li>
<li>ANY repeated letter is counted as incorrect and will also carry a penalty</li>
<li>You have 9 chances, with 10 incorrect guesses being game over</li>
</ul>
</section>
<!-- Section displaying chosen category, word and previous guesses made -->
<section class="flex-wrapper">
<section class="word-info-display">
<h3>Word Information</h3>
<h2 id="show-category"></h2>
<p id="previous-guesses"></p>
<p id="word-info"></p>
</section>
</section>
<!-- Dynamic Hangman image container -->
<section class="image">
<img id="hangman-img" src="media/images/0.jpg" alt="hangman image" />
</section>
<!-- Area where user can input and submit their guess -->
<input type="text" id="guess" placeholder="Guess">
<button id="submit-guess" type="submit">Submit</button>
</section>
<!-- Section containing word to be guessed, which is hidden by default -->
<section class="word-container">
<span id="word-box"></span>
</section>
<!-- Three main scripts are used in this program: -->
<script src="config.js"></script>
<!-- The categories and words used in the game, stored as objects -->
<script src="words.js"></script>
<!-- All global vars, along with destructured sound settings -->
<script src="globals.js"></script>
<!-- The main JS file that controls and manages the game and its flow -->
<script src="script.js"></script>
</body>
</html>