-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
58 lines (56 loc) · 2.33 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
<!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>
<main>
<section class="game--info">
<button class="close--info">×</button>
<div class="info-title">
<h2>Hey! there.</h2>
<h3>Welcome to PIG Game.</h3>
</div>
<p>This is a multi-player game. You can play with your friends.</p>
<p>
Firstly, you need to hit the 'Roll Dice' button to start the game.
Then you'll got some points from the dice. This will add to the
current points section. Then, If you hit the 'Hold' button, your
current points will be added to your score in the above. And the game
will turned to the next player. Next player will procced to the same
rules. But when any of two players will got 'one' point from the dice,
his/her current score will be zero and game will turn for next player.
The current score will always added to the main score. As, 50 is the
targeted score. If anyone get it, he/she will win the PIG game. Also,
'New Game' button will restart the game again.
</p>
</section>
<div class="info--overlay"></div>
<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="./images/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>
</main>
<script src="script.js"></script>
</body>
</html>