-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
183 lines (183 loc) · 11.9 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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="word game based on the classic hangman game">
<meta name="keywords"
content="word-game, game, spelling, vocabulary, words, retro-video-game, hangman, hangman-game">
<!--google fonts link-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=VT323&display=swap" rel="stylesheet">
<!-- css link -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- favicon links -->
<link rel="shortcut icon" href="pumpkin-halloween-spooky-scary.ico" type="image/x-icon">
<link rel="icon" href="pumpkin-halloween-spooky-scary.ico" type="image/x-icon">
<title>Pumpkin Puzzler</title>
</head>
<body>
<!--header for the page, containing Logo, Score and Instructions button-->
<header class="page-header">
<a href="index.html">
<h1 class="logo">Pumpkin Puzzler</h1>
</a>
<!--ul containing Score and Instructions button-->
<ul>
<!--Icon initially, word 'Score' shown at larger screen size. Score updated by script.js -->
<li>
<i class="fas fa-trophy" role="img" aria-label="Score"></i> <span class="hide-text">Score:
</span><span id="score">0</span>
</li>
<!--button to open instructions-modal, script.js uses id to access. Only icon shown initially-->
<li>
<button type="button" id="instructions-open" class="header-footer-btn"
aria-label="Click to open instructions box"><i class="fas fa-lightbulb" aria-hidden="true"></i><span
class="hide-text" aria-hidden="true"> Instructions</span></button>
</li>
</ul>
</header>
<!--outer modal when the Instructions button is clicked, retrieved by id in script.js-->
<div class="modal" role="dialog" id="instructions-modal">
<!--content of modal box-->
<div class="modal-content">
<!--modal header with title and close button-->
<header class="modal-header">
<h2>Instructions</h2>
<button type="button" class="modal-close" aria-label="Close instructions box"
id="close-modal">×</button>
</header>
<!--modal text with intro text and instruction list-->
<div class="modal-text">
<p>Guess the word by clicking on the letters and get the trophy before the monster does!</p>
<ol>
<li>Pick a category: Adjective or Verb</li>
<li>A word will be chosen at random which you will need to guess!</li>
<li>The number of dashes: _ shows how many letters are in the word that you need to guess</li>
<li>Click on one of the letters in the keyboard shown on screen to make a guess</li>
<li>If you guess correctly, the letter will fill the blank space(s) in the word</li>
<li>If you guess incorrectly, the monster will eat one of the obstacles and get one step closer to
the trophy!</li>
<li>You can keep guessing but for every wrong guess the monster eats another obstacle and after
eating six obstacles it gets the trophy!</li>
<li>You have 7 chances to guess incorrectly</li>
<li>If you guess all the correct letters before running out of chances, you get the trophy!</li>
<li>If you need a hint, click on the Hint? button and you will see a short hint to help you guess
the word</li>
<li>The letters you have already guessed are disabled, so you know not to choose them again. They
will also show as either red if incorrect or green if correct.</li>
<li>The number of trophies you have won, representing the words you have guessed correctly, are
shown in the Score at the top of the page.</li>
<li>You can get in touch with us via the Contact Us link at the bottom of the page, with any
questions or suggestions. This link is only visible when the game is not being played as you
would lose progress in the game otherwise!</li>
</ol>
</div>
</div>
</div>
<!--end of modal section-->
<!--game area containing 3 divs: monster/guesses/trophy area, word/button area and keyboard area-->
<main>
<!--monster/guesses/trophy area, div for game over message, imgs for monster,guess,trophy. Updated by script.js -->
<div class="guesses page-section" aria-live="polite" aria-atomic="true">
<!-- text to be displayed when game is over by script.js, initially hidden -->
<div class="game-over-text hidden" id="game-over-text-box">
<p>GAME OVER!</p>
<!-- msg varies depending on if won or lost - handled by script.js -->
<p id="won-or-lost-msg"></p>
</div>
<!--all img.guess are shown at game start. During game, each wrong guess adds hidden class to img.guess-->
<img src="assets/images/pumpkin.png" alt="monster" class="guess monster">
<img src="assets/images/apple.png" alt="obstacle between monster and trophy" class="guess" data-guess="7">
<img src="assets/images/apple.png" alt="obstacle between monster and trophy" class="guess" data-guess="6">
<img src="assets/images/apple.png" alt="obstacle between monster and trophy" class="guess" data-guess="5">
<img src="assets/images/apple.png" alt="obstacle between monster and trophy" class="guess" data-guess="4">
<img src="assets/images/apple.png" alt="obstacle between monster and trophy" class="guess" data-guess="3">
<img src="assets/images/apple.png" alt="obstacle between monster and trophy" class="guess" data-guess="2">
<!--img.trophy is shown with the winning msg at game over stage if game won-->
<img src="assets/images/trophy.png" alt="trophy" class="guess trophy" data-guess="1">
</div>
<!-- end of monster/guesses/trophy div -->
<!-- word area - 3 child divs shown/hidden by script.js depending on stage of game (start, in play, over)-->
<div class="page-section word-area" aria-live="polite" aria-atomic="true">
<!-- word area before game started, shown on page loading and after Play Again btn click -->
<div id="word-area-at-start">
<p>Can you guess the word and beat the pumpkin to win the trophy?</p>
<p>Pick a category below to start the game!</p>
<!-- button area - category buttons, game starts when user clicks one of the buttons -->
<div class="word-button-area">
<button type="button" class="word-btn main-btn category-btn">adjective</button>
<button type="button" class="word-btn main-btn category-btn">verb</button>
</div>
</div>
<!-- word area when game is in play, initially hidden -->
<div class="hidden" id="word-area-in-play">
<!-- chosen category displayed in span with id=category, by script.js -->
<p><span class="span-label"><i class="fas fa-list-ul" aria-hidden="true"></i> Category:
</span><span id="category"></span></p>
<p>Use the keyboard on screen to guess the letters</p>
<!-- div containing the word to be guessed. Child spans generated by script.js for each letter -->
<div id="span-container" class="letter-space-container"></div>
<!-- button area - when game in play - Hint button -->
<div class="word-button-area">
<button type="button" class="word-btn main-btn" id="hint">Hint?</button>
<!-- text of hint - hidden initially - shown when Hint button clicked -->
<p class="hidden"><span class="span-label"><i class="far fa-hand-point-right"
aria-hidden="true"></i> Hint: </span><span></span></p>
</div>
</div>
<!--word area when game over, initially hidden-->
<div class="hidden" id="word-area-game-over">
<!-- word and meaning retrieved by script.js, displayed in relevant spans below -->
<p><span class="span-label"><i class="fas fa-book-open" aria-hidden="true"></i> The word was:
</span><span class="word"></span></p>
<p><span class="span-label"><i class="fas fa-question-circle" aria-hidden="true"></i> Meaning:
</span><span class="definition"></span></p>
<!-- button area - when game over - Play Again button to reset the game -->
<div class="word-button-area">
<button type="button" class="word-btn main-btn" id="reset">Play Again</button>
</div>
</div>
</div>
<!-- end of word area divs -->
<!-- keyboard for user to guess letters -->
<div class="keyboard page-section">
<!--buttons for letters A-Z. Initially disabled, disabled attribute removed by script.js when game in-play. -->
<button type="button" class="key main-btn" disabled>A</button>
<button type="button" class="key main-btn" disabled>B</button>
<button type="button" class="key main-btn" disabled>C</button>
<button type="button" class="key main-btn" disabled>D</button>
<button type="button" class="key main-btn" disabled>E</button>
<button type="button" class="key main-btn" disabled>F</button>
<button type="button" class="key main-btn" disabled>G</button>
<button type="button" class="key main-btn" disabled>H</button>
<button type="button" class="key main-btn" disabled>I</button>
<button type="button" class="key main-btn" disabled>J</button>
<button type="button" class="key main-btn" disabled>K</button>
<button type="button" class="key main-btn" disabled>L</button>
<button type="button" class="key main-btn" disabled>M</button>
<button type="button" class="key main-btn" disabled>N</button>
<button type="button" class="key main-btn" disabled>O</button>
<button type="button" class="key main-btn" disabled>P</button>
<button type="button" class="key main-btn" disabled>Q</button>
<button type="button" class="key main-btn" disabled>R</button>
<button type="button" class="key main-btn" disabled>S</button>
<button type="button" class="key main-btn" disabled>T</button>
<button type="button" class="key main-btn" disabled>U</button>
<button type="button" class="key main-btn" disabled>V</button>
<button type="button" class="key main-btn" disabled>W</button>
<button type="button" class="key main-btn" disabled>X</button>
<button type="button" class="key main-btn" disabled>Y</button>
<button type="button" class="key main-btn" disabled>Z</button>
</div>
<!-- end of keyboard div -->
</main>
<!--script for the fontawesome icons-->
<script src="https://kit.fontawesome.com/f92ca5e5ec.js" crossorigin="anonymous"></script>
<!--script holding array of word objects (with hint, meaning, type) from which random word is chosen by type -->
<script src="assets/js/words.js"></script>
<!--script for page functionality and game functionality -->
<script src="assets/js/script.js"></script>
</body>
</html>