-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (92 loc) · 4.95 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="image/png" href="./assets/monsterIcon.png" rel="icon">
<title>Monster Mash</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Creepster&family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet">
</head>
<body>
<header class="wrapper">
<h1>Monster Mash</h1>
<p class="mode scary">A spooky scary card matching game!</p>
<p class="mode friendly"> A card matching game featuring friendly monsters. Fun for everyone! </p>
<button class="modeSwitch desktop">Click here to switch between scary and friendly mode.</button>
<button class="modeSwitch mobile">Press here to switch between scary and friendly mode.</button>
</header>
<main class="wrapper">
<section class="menu">
<p class="info desktop">Hover on the squares to get more info!</p>
<ul>
<div>
<li class="green">
<span class="letter animate__animated animate__bounceIn" id="letter">M</span>
<h2>The Monsters</h2>
<p class="details first" tabindex="0">The monsters featured on the cards are from the <span class="attributions">Universal Classic Monsters collection</span>and from modern times animated films. The monster icons are by <span class="attributions">iconcheese from the Noun Project.</span></p>
</li>
<li class="diffBackground">
<span class="letter animate__animated animate__bounceIn">A</span>
<h2>About</h2>
<p class="details" tabindex="0">This game was inspired by my love of monsters, vintage cinema and of course, the ultimate banger, Monster Mash.</p>
</li>
</div>
<div>
<li class="diffBackground">
<span class="letter animate__animated animate__bounceIn">S</span>
<h2>Start!</h2>
<div class="details" tabindex="0">
<p>Are you ready to start mashing monsters!? Hit the MASH button to choose your level. <strong>Once your level is selected, Monsters will apear and the Mash will begin!</strong></p>
<button class="start"><a href="#chooseLevel">MASH!</a></button>
</div>
</li>
<li class="green">
<span class="letter animate__animated animate__bounceIn">H</span>
<h2>How to play</h2>
<p class="details last" tabindex="0">Select two cards to find a matching pair. Once all matches have been found, you win! Try again to beat your move count.</p>
</li>
</div>
</ul>
</section>
<ul class="chooseLevel" id="chooseLevel">
<li>
<button class="level" value="6">Easy</button>
</li>
<li>
<button class="level" value="12">Average</button>
</li>
<li>
<button class="level" value="18">Hard</button>
</li>
</ul>
<section class="gameBoard">
<!-- Score container -->
<p class="score"><span class="creepyFont">Moves : </span><span class="currentScore creepyFont"> 0</span></p>
<!-- The game board whewre all the cards will be -->
<div class="board" id="start"></div>
<!-- Box that displays a match or not -->
<div class="matchMessage"></div>
<!-- Box that displays the win! -->
<div class="playAgain">
<p>All the <span class="creepyFont">monsters</span> have been <span class="creepyFont">mashed!<br>You win!</p></span>
<p class="ScoreResult">You won in <span class="currentScore">0</span> moves!</p>
<button>Play again!</button>
</div>
</section>
<div class="song">
<audio loop controls src="./assets/monsterMash.mp3">
Your browser does not support audio.
</audio>
</div>
</main>
<footer>
<p>Made by Syl @ <a href="https://www.junocollege.com" target="_blank">Juno College</a> 2020</p>
</footer>
<script src='https://code.jquery.com/jquery-3.4.0.min.js'
integrity='sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=' crossorigin='anonymous'></script>
<script src="script.js"></script>
</body>
</html>