-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
87 lines (82 loc) · 3.58 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Pig Game</title>
</head>
<body>
<div class="overlay hidden"></div>
<main>
<section class="player player--0 player--active">
<h2 class="name" id="name--0">Player 1</h2>
<p class="score" id="score--0">43</p>
<div class="current">
<p class="current-label">Current</p>
<p class="current-score" id="current--0">0</p>
</div>
</section>
<section class="player player--1">
<h2 class="name" id="name--1">Player 2</h2>
<p class="score" id="score--1">24</p>
<div class="current">
<p class="current-label">Current</p>
<p class="current-score" id="current--1">0</p>
</div>
</section>
<img src="dice-5.png" alt="Playing dice" class="dice" />
<button class="btn btn--new">🔄 New game</button>
<button class="btn btn--roll">🎲 Roll dice</button>
<button class="btn btn--hold">📥 Hold</button>
<!-- begin -->
<button class="btn btn--instruct" onclick="openPopup()">
📃 Instruction
</button>
<!-- <button class="show-modal">Show modal 3</button> -->
<!-- <div class="modal hidden">
<button class="close-modal">×</button>
<h1>I'm a modal window 😍</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="overlay hidden"></div> -->
<!-- begin -->
<div class="btn--instruct">
<!-- <button class="btn btn--instruct">📃 Instruction</button> -->
<div class="popup" id="popup">
<h2>INSTRUCTION</h2>
<p>
=>This is a 2 player game.<br />
<br />=>The first player starts rolling the dice and can roll it as
many times he/she wants.<br />=> However score reduces to 0 if 1 is
encountered in the dice. When the player chooses to hold,the current
score is stored and the next player plays.<br /><br />=> The first
player to accumulate a score of 20 wins!!!
<!-- This is a 2 player game. The player whose turn it is can roll the
dice as many times he wants till 1 appears in which case the turn
goes to the next player. After each roll the score gets added to the
players current score and he can either hold the score soo his
current score is added with the hold score which is safe or he can
take a risk it increase his score and roll again. But if 1 appears
on the dice he looses. FIRST PLAYER TO SCORE 20 POINTS WINS!! -->
</p>
<button type="button" onclick="closePopup()">OK</button>
</div>
</div>
<!-- end -->
<!-- end -->
<!-- <button class="btn btn--roll">🎲 Roll dice</button>
<button class="btn btn--hold">📥 Hold</button> -->
</main>
<script src="script.js"></script>
</body>
</html>