-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
110 lines (99 loc) · 6.31 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<title>Pairs - Memory Game</title>
</head>
<body>
<!-- Bootstrap Navbar -->
<nav class="navbar navbar-expand-md navbar-dark bg-myblue mb-4 pe-4 ps-4">
<p class="navbar-brand my-0 ms-3 logo">Pairs</p>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link me-4 topmenu" href="javascript:void(0);" onclick="reload()">New game</a>
</li>
<li class="nav-item me-4">
<a class="nav-link topmenu" href="javascript:void(0);" onclick="solution()">Solution</a>
</li>
<li class="nav-item">
<a class="nav-link topmenu" href="javascript:void(0);" onclick="howtoplay()">How to play</a>
</li>
</ul>
</div>
</nav>
<!-- Board Game -->
<div id="game-center" class="text-center mt-cards text-nowrap">
<div>
<p class="fs-2 gold">Score: <span id='cScore'>0000000</span></p>
</div>
<div class="ctable flex-nowrap">
<img id="id0" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
<img id="id1" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
<img id="id2" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
<img id="id3" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
</div>
<div class="ctable flex-nowrap">
<img id="id4" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
<img id="id5" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
<img id="id6" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
<img id="id7" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
</div>
<div class="ctable flex-nowrap">
<img id="id8" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
<img id="id9" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
<img id="id10" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
<img id="id11" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
</div>
<div class="ctable flex-nowrap">
<img id="id12" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
<img id="id13" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
<img id="id14" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
<img id="id15" class="pic" onclick="guess(this.id)" src="assets/images/got-card.jpg" alt="got card image" />
</div>
</div>
<!-- How to play page -->
<div id="instructions">
<h2>Pairs: How to play</h2>
<p class="text-secondary">Pairs has long been a favourite game for all generations. It is easy to play, in fact it is so
simple that really young children can play with ease. It requires observation, concentration and a
good memory to win. This is a single player game. The game is also known as Concentration,
Pelmanism, Shinkei-suijaku, Pexeso and Memory.</p>
<h2 class="mt-4">Object of the Game</h2>
<p class="text-secondary">The object of the game is to collect all the matching pairs to win.</p>
<h2 class="mt-4">Playing Pairs</h2>
<p class="text-secondary">Choose a card by clicking on it to turn it over, then select another card to turn that over too. If
the two cards are a matching pair, for example two Jon Snow, then they will be removed from the game
table. The player is awarded another turn for making a match and goes again. If the cards are not a
match they are turned back over, and you can keep choosing another card to guess a pair. The game
continues in this fashion until all the cards are played. If the player would like to see the
solution, it’s possible to click on the button ‘Solution’ to turn all the cards over. It’s also
possible to start a new game by clicking on ‘New Game’. The player wins once all the cards have been played.</p>
<p class="text-end"><a href="javascript:void(0);" onclick="backtogame()" class="backtogame me-2 mt-2">Back to the game</a></p>
</div>
<!-- Well done page when the game is finished -->
<div id="welldone">
<p id='wellfont'>Well done!</p>
<p id='finalScore'></p>
<img src="assets/images/welldone.png" class="welldone-img" alt="well done image" />
</div>
<!-- Footer section -->
<footer class="bg-myblue">
<p class="m-0">Pairs - Memory Game - JavaScript Project</p>
</footer>
<!-- Javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
<script src="assets/js/script.js"></script>
</body>
</html>