-
Notifications
You must be signed in to change notification settings - Fork 0
/
random-elements.html
117 lines (115 loc) · 4.31 KB
/
random-elements.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="random-elements.css" />
<link rel="icon" type="image/x-icon" href="./assets/gun.png" />
</head>
<body>
<!-- instructions div (first page of the game)-->
<div id="instructions">
<div id="reset">
<button class="resetBtn">
<svg
id="svg"
xmlns="http://www.w3.org/2000/svg"
width="50"
height="50"
fill="currentColor"
class="bi bi-arrow-clockwise"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"
/>
<path
d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"
/>
</svg>
</button>
</div>
<div id="home">
<button class="resetBtn homeBtn">
<svg
id="svg"
xmlns="http://www.w3.org/2000/svg"
width="50"
height="50"
fill="currentColor"
class="bi bi-house"
viewBox="0 0 16 16"
>
<path
d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"
/>
</svg>
</button>
</div>
<div id="heading">Instructions & Mode Selection</div>
<div id="game-des">
This game has been developed to help you imporve your reaction time and
mouse hovering skills. In this game, random elements will pop up on your
screen and you have to click on them as soon as possible. Relevant stats
and score would be displayed to you when the game ends.
</div>
<div id="choose-mode-heading">Choose Difficulty Mode</div>
<div id="buttons">
<button class="easy">Easy</button>
<button class="medium">Medium</button>
<button class="hard">Hard</button>
</div>
<div id="choose-mode-heading">Choose Time Duration</div>
<div id="buttons">
<button class="sec10">10 sec</button>
<button class="sec20">20 sec</button>
<button class="sec30">30 sec</button>
</div>
<div id="startBtn">
<button>START</button>
</div>
</div>
<!-- main game-play area (appears when user clicks on start button in the instructions div) -->
<div id="parent">
<div id="timer">60s</div>
<div id="heading">Click on elements popping as FAST as you can</div>
<div id="game-arena"></div>
<div id="reaction-time-box">
Reaction time of last click: <span id="reaction-time"></span>
</div>
</div>
<!-- score div, shows all the stats after the timer of game ends -->
<div id="score">
<div id="home" class="score-home-btn">
<button class="resetBtn homeBtn">
<svg
id="svg"
xmlns="http://www.w3.org/2000/svg"
width="50"
height="50"
fill="currentColor"
class="bi bi-house"
viewBox="0 0 16 16"
>
<path
d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z"
/>
</svg>
</button>
</div>
<div id="heading">GAME END!</div>
<div id="score-text">
Thanks for playing the game! I hope you enjoyed playing it and your
Reaction Time & Reflexes have improved.
</div>
<div id="score-box">Elements Poppped: <span id="score-value"></span></div>
<div id="score-box">
Your Average Reaction Time: <span id="averageValue"></span>
</div>
<div id="playBtn">Play Again</div>
</div>
<script src="random-elements.js"></script>
</body>
</html>