generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
88 lines (76 loc) · 3.55 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="2D JavaScript Game">
<meta name="keywords"
content="2D, JavaScript, game, whac-a-mole, retro, desktop, mobile, tablet">
<meta name="author" content="Janet Dornan">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Hunt | Simple JavaScript Game</title>
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://kit.fontawesome.com/7c6e646adf.js" crossorigin="anonymous"></script>
<!-- EmailJS - comment out this block when running Jest tests -->
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js">
</script>
<script>
(function(){
emailjs.init("QaZlE9csUadOLmKm2");
})();
</script>
</head>
<body>
<h1>Box Hunt</h1>
<h2 class="white-text">Score: <span id="score">0</span> Time left: <span id="time-left">60</span>s</h2>
<h2 id="game-over" aria-label="Game Over text visible when game ends"></h2>
<div class="grid">
<!-- JavaScript will create the 3x3 grid with 9 tiles:
<div class="tile" id="0"></div>
<div class="tile" id="1"></div>
etc to...
<div class="tile" id="8"></div>
-->
</div>
<div class="buttons-div">
<button id="start-game">Start</button>
<button id="reset-game">Replay</button>
</div>
<h2>Instructions</h2>
<p class="instructions">
This game is similar to the retro 2D version of Whac-A-Mole.
When the coloured box appears, try to hit it.
The more hits you achieve in 60 seconds, the more points you score.
But beware, the higher your score, the faster the box moves!
</p><br>
<ul>
<li><i class="fa-solid fa-circle-play"></i> Press <strong>[ Start ]</strong></li>
<li><br></li>
<li><i class="fa-solid fa-gavel"></i> Hit the <strong>coloured</strong> box</li>
<li><br></li>
<li><i class="fa-solid fa-stopwatch"></i> Game stops after <strong>60</strong> seconds</li>
<li><br></li>
<li><i class="fa-solid fa-reply"></i> Press <strong>[ Replay ]</strong> to restart game</li>
<li><br></li>
</ul>
<h2>Email Us</h2>
<p class="contact-heading">Submit your game idea...</p>
<!-- Used code from Sending Emails Using EmailJS tutorial by Code Institute -->
<form onsubmit="return sendMail(this);" id="send-idea">
<input type="text" name="name" id="fullname" aria-label="Enter full name" placeholder="Full Name" required>
<input type="email" name="emailaddress" id="emailaddress" aria-label="Enter email address" placeholder="Email" required>
<textarea rows="5" name="message" id="message" aria-label="Enter game idea" placeholder="Game Idea" required></textarea>
<h2 id="form-submit" aria-label="Text for successful or failed form submission"></h2>
<button type="submit" id="submit-button">Send My Idea</button>
</form>
<script src="assets/scripts/app.js"></script>
<script src="assets/scripts/sendEmail.js"></script>
<footer class="footer">
<p>Game made with 💜 by Janet
<a target="_blank" aria-label="Github account link" href="https://github.com/janet-dev">
<i class="fa-brands fa-github" aria-hidden="true"></i>
</a> 2023</p>
</footer>
</body>
</html>