-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
92 lines (81 loc) · 2.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Memory Game</title>
<link rel="icon" href="images/logo/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/style.min.css" />
<link rel="stylesheet" type="text/css" href="css/modal.min.css" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Header -->
<header>
<h1 class="header_text">Memory Game</h1>
</header>
<!-- Main Content -->
<main>
<div class="canvas_scores_container">
<!-- Canvas -->
<div id="sketch"></div>
<!-- Scores -->
<div class="scores_and_restart">
<div class="scores">
<span class="scores_text">Matched Cards:</span>
<span id="matched_cards"></span>
<span class="scores_text">Score:</span>
<span id="score"></span>
<span class="scores_text">Highscore:</span>
<span id="highscore"></span>
</div>
<div class="restart_container">
<button class="restart_button button" onclick="restart()"><img src="images/restart.png" alt="restart" id="restart_icon">Restart</button>
</div>
</div>
</div>
<!-- Tutorial -->
<h2>How to play:</h2>
<p class="howto_text">
All of the cards are laid face down and two cards are
flipped face up over each turn.
Click on two different cards and if they match they stay turned up.
The object of the game is to turn over all
pairs of matching cards.
</p>
</main>
<!-- Footer -->
<footer>
<div class="footer_item">
<a href="https://github.com/sentouki/Memory-Game">
<img src="images/github-dark.png" alt="GitHub Repo">
</a>
</div>
<div class="footer_item">
<p>
Images:
<a href="http://www.freepik.com">Designed by macrovector / Freepik</a>
</p>
</div>
</footer>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal_content">
<div class="modal_image">🎊</div>
<div class="modal_header">Finished!</div>
<div class="modal_buttons">
<button class="button modal_close_button" onclick="closeModal()">Close</button>
<button class="button modal_restart_button" onclick="restartAndCloseModal()">Restart</button>
</div>
<!-- Close button -->
<div class="modal_close" onclick="closeModal()">×</div>
</div>
</div>
<script src="js/p5.min.js"></script>
<script src="js/p5.sound.min.js"></script>
<script src="js/card.min.js"></script>
<script src="js/helpers.min.js"></script>
<script src="js/sketch.min.js"></script>
<script src="js/modal.min.js"></script>
</body>
</html>