-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
127 lines (124 loc) · 5.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Shut The Box">
<meta name="author" content="">
<link href="bootstrap.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="application.js"></script>
<script src="game.js"></script>
<script src="https://code.createjs.com/soundjs-0.6.1.min.js"></script>
</head>
<body>
<section class="intro-page">
<div class="jumbotron">
<div class="container" align="center">
<h1>Are you ready to play <br> Shut The Box?</h1>
<br>
<h2>This is a game for two players</h2>
<br>
<h4>How many tiles do you want?</h4>
<button id="9tile" type="button" class="btn btn-default btn-lg" type="submit">9 Tiles</button>
<button id="12tile" type="button" class="btn btn-default btn-lg" type="submit">12 Tiles</button>
</div>
<br>
<div class="container" align="center">
<div class="row">
<div>
<button id="start-game" class="btn btn-success btn-lg" type="submit">Start the Game</button>
</div>
</div>
</div>
</div>
</section>
<section class="game-page hide">
<header class="container">
<h1 align="center">Shut The Box</h1>
<div class="row">
<div class="col-xs-12">
<ul class="nav nav-tabs">
<li class="active"><a href="#game" data-toggle="tab">Game</a></li>
<li><a href="#rules" data-toggle="tab">Rules</a></li>
<li role="presentation" class="active">
<button id="new-game" class="btn btn-default">New Game</button>
</li>
</ul>
<div class="tab-content">
<div id="game" class="tab-pane fade in active"></div>
<div id="rules" class="tab-pane fade">
<p>At the start of the game all tiles are "open", showing the numerals 1 to 9.</p>
<p>During the game, each player plays in turn. A player begins his or her turn by throwing or rolling two dice into the box.</p>
<p>After throwing, the player adds up the dots (pips) on the dice and then "shuts" (closes) one of any combination of open numbers that equals the total number of dots showing on the dice. For example, if the total number of dots is 8, the player may choose any of the following sets of numbers (as long as all of the numbers in the set are available to be covered):</p>
<ul>
<li>8</li>
<li>7, 1</li>
<li>6, 2</li>
<li>5, 3</li>
<li>5, 2, 1</li>
<li>4, 3, 1</li>
</ul>
<p>The player then rolls the dice again, aiming to shut more numbers. The player continues throwing the dice and shutting numbers until reaching a point at which, given the results produced by the dice, the player cannot shut any more numbers. At that point, the player scores the sum of the numbers that are still uncovered. For example, if the numbers 2, 3, and 5 are still open when the player throws a one, the player's score is 10 (2 + 3 + 5 = 10). Play then passes to the next player.</p>
<p>After every player has taken a turn, the player with the lowest score wins.</p>
<p>If a player succeeds in closing all of the numbers, he or she is said to have <strong>"Shut the Box”</strong> the player wins immediately and the game is over.</p>
</div>
</div>
</div>
</div>
</header>
<section id="tile-board" class="container bg-success" align="center">
<div id="tiles">
<a class="tile tile-active" value="1" id="p1-tile1">1</a>
<a class="tile tile-active" value="2" id="p1-tile2">2</a>
<a class="tile tile-active" value="3" id="p1-tile3">3</a>
<a class="tile tile-active" value="4" id="p1-tile4">4</a>
<a class="tile tile-active" value="5" id="p1-tile5">5</a>
<a class="tile tile-active" value="6" id="p1-tile6">6</a>
<a class="tile tile-active" value="7" id="p1-tile7">7</a>
<a class="tile tile-active" value="8" id="p1-tile8">8</a>
<a class="tile tile-active" value="9" id="p1-tile9">9</a>
</div>
<div class="dice">
<img id="dice1" src="img/face6.png">
<img id="dice2" src="img/face6.png">
<div>
<button id="roll-btn" class="btn btn-default btn-lg">Roll the dice</button>
<button id="confirm-tiles" class="btn btn-default hide">Ok</button>
</div>
<div>
<button id="end-turn" class="btn btn-default hide">Cant go, I give up</button>
</div>
</div>
</section>
<article class="container" align="center">
<div class="col-xs-4">
<p class="player-message"></p>
</div>
<div class="col-xs-4">
<p class="tile-message"></p>
</div>
<div class="col-xs-4">
<p class="roll-total"></p>
</div>
</article>
<section id="scoreboard" class="container" align="center">
<h2><strong>Scoreboard</strong></h2>
<div class="col-xs-6">
<h3 class="player1">Player 1: <span>0</h3>
</div>
<div class="col-xs-6">
<h3 class="player2">Player 2: <span>0</h3>
</div>
</section>
<footer class="container">
<p class="credit" align="left">Credit: Dice by Christian Mohr from the Noun Project</p>
</footer>
</section>
</body>
</html>