-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (144 loc) · 5.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>THE MEMORY GAME</title>
<link rel="icon" href="#" />
<!-- to solve the error: GET http://127.0.0.1:5500/favicon.ico 404 (Not Found) -->
<link rel="stylesheet" href=".\style.css" />
</head>
<body id="body">
<header id="header">
<div id="header-left">
<h4>
MERAKI_Academy_Project_1 <br />
B06_Kamal Lahloh
</h4>
</div>
<div id="header-center"><h1>THE MEMORY GAME</h1></div>
<div id="header-right">
<button id="dark">Dark Theme</button>
<button id="light">Light Theme</button>
</div>
</header>
<!-- ------------------------------------------------------------ -->
<!-- ------------------------------------------------------------ -->
<!-- ------------------------------------------------------------ -->
<div id="body-welcome">
<main id="main-welcome">
<div id="logo">
<p id="win-lose"></p>
<img id="logo-photo" src="Media/meraki-logo.jpg" alt="logo" />
<p id="logo-text"></p>
</div>
<div class="welcome-text">
<h4>Welcome to The Memory Game</h4>
<br />
How to Play: <br />
The game starts with all the cards face-down. Start by turning over
two cards. If the two cards have the same picture, the cards stays
face-up, otherwise the cards turns face-down again. You will win if
all the cards faces-up. <br />
At first choose the number of cards to start the game with. The
difficulty since you need to finish the game with less mistakes than
what you chooses. And the time limit to finish the game within.
</div>
<div id="number" class="number choices">
<label for="number">number of cards:</label>
<select id="number-select" name="number" class="number select">
<option value="24">24 Cards</option>
<option value="22">22 Cards</option>
<option value="20">20 Cards</option>
<option value="18">18 Cards</option>
<option value="16">16 Cards</option>
<option value="14">14 Cards</option>
<option value="12">12 Cards</option>
<option value="10" selected>10 Cards</option>
<option value="8">8 Cards</option>
<option value="6">6 Cards</option>
<option value="4">4 Cards</option>
</select>
</div>
<div id="difficulty" class="difficulty choices">
<label for="difficulty">Difficulty:</label>
<select
id="difficulty-select"
name="difficulty"
class="difficulty select"
>
<option value="5" selected>5 mistakes</option>
<option value="20">20 mistakes</option>
<option value="Number.POSITIVE_INFINITY">unlimited mistakes</option>
</select>
</div>
<div id="time" class="time choices">
<label for="time">Time:</label>
<select id="time-select" name="time" class="time select">
<option value="120000" selected>2 Minutes</option>
<option value="600000">10 Minutes</option>
<option value="-100000">No time limit</option>
</select>
</div>
</main>
</div>
<!-- ------------------------------------------------------------ -->
<div id="body-game">
<main id="main-index">
<div id="timer">
<br>
Time limit =
<p id="timer-value"></p>
<br>
Countdown =
<p id="timer-countdown"></p>
<br>
</div>
<div>
<p id="motivation"></p>
</div>
<div id="game"></div>
<div id="hint-div">
<div class="number-of-mistakes">
No. of mistakes is
<p id="number-of-mistakes"></p>
<p id="wrong-attempts-counter"></p>
</div>
<br />
<button id="hint-button">HINT</button>
</div>
<div id="start"></div>
</main>
</div>
<!-- ------------------------------------------------------------ -->
<!-- ------------------------------------------------------------ -->
<!-- ------------------------------------------------------------ -->
<footer id="footer">
<div>
<audio id="music" loop autoplay muted controls>
<source src="Media/Canon in D - Pachelbel.mp3" type="audio/mpeg" />
<a href="Media/Canon in D - Pachelbel.mp3"> Download audio </a>
</audio>
<audio id="sound-correct">
<source src="Media/sound-correct.wav" type="audio/wav" />
</audio>
<audio id="sound-wrong">
<source src="Media/sound-wrong.wav" type="audio/wav" />
</audio>
<audio id="sound-win">
<source src="Media/sound-win.wav" type="audio/wav" />
</audio>
<audio id="sound-lose">
<source src="Media/sound-lose.wav" type="audio/wav" />
</audio>
</div>
<p id="reset-warning"></p>
<div>
<button id="reset-button" class="game-class">Reset</button>
<button id="play-now-button">Play Now</button>
<button id="play-again-button">Play Again</button>
</div>
</footer>
<script src=".\main.js"></script>
</body>
</html>