forked from carltonhurdle/week-4-game
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·107 lines (90 loc) · 3.83 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
<!DOCTYPE html>
<html lang='en-us'>
<head>
<!-- remember to include this UTF-8 tag... -->
<meta charset="UTF-8">
<!-- adding this to increase mobile compatibility -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Week-4-Game</title>
<!-- should have bootstrap css first -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- added jquery for full browser compatibility of the project -->
<script src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="assets/javascript/game.js"></script>
</head>
<body>
<div id="main" class="container-fluid normal">
<div class="row">
<div id="game-title-wrapper" class="col-xs-12">
<h1 id="game-title">
Crystals Collector!
</h1>
</div>
</div>
<div class="row">
<div id="game-rules-wrapper" class="col-xs-12">
<a href="#game-rules" id="game-rules-button" class="btn btn-info" data-toggle="collapse">Rules</a>
<div id="game-rules" class="collapse">
<p>You will be given a random number at the start of the game.</p>
<p>There are four crystals below. By clicking on a crystal you will add a
specific amount of points to your total score.</p>
<p>You win the game by matching your total score to the random number from
the start of the game. You lose the game if your total score goes above the
random number.</p>
<p>The value of each crystal is hidden from you until you click on it.</p>
<p>Each time when the game starts, the game will change the values of each
Crystal Gem.</p>
</div>
</div>
</div>
<div class="sbs-container row">
<div class="col-xs-6 col-sm-3">
<div id="wins" class="sbs-inner">
<div class="title">Wins:</div>
<div class="number"><span id="valTotalWins">00</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div id="losses" class="sbs-inner">
<div class="title">Losses:</div>
<div class="number"><span id="valTotalLosses">00</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div id="target-number" class="sbs-inner">
<div class="title">Target Number:</div>
<div class="number"><span id="valTargetNumber">00</span></div>
</div>
</div>
<div class="col-xs-6 col-sm-3">
<div id="running-total" class="sbs-inner">
<div class="title">Running Total:</div>
<div class="number"><span id="valRunningTotal">00</span></div>
</div>
</div>
</div>
<div id="message" class="row">
<span id="valMessage" class="col-xs-12">Welcome!</span>
</div>
<div id="crystal-buttons" class="row">
<!-- want to center crystals and reset center and resize for slightly larger screens -->
<div class="col-xs-offset-1 col-xs-5 col-sm-offset-0 col-sm-3">
<img src="assets/images/steven.png" id="button1" onclick="addCrystal(event.currentTarget.id)" class="crystal img-responsive">
</div>
<div class="col-xs-5 col-sm-3">
<img src="assets/images/amethyst.png" id="button2" onclick="addCrystal(event.currentTarget.id)" class="crystal img-responsive">
</div>
<div class="col-xs-offset-1 col-xs-5 col-sm-offset-0 col-sm-3">
<img src="assets/images/rose.png" id="button3" onclick="addCrystal(event.currentTarget.id)" class="crystal img-responsive">
</div>
<div class="col-xs-5 col-sm-3">
<img src="assets/images/lapis.png" id="button4" onclick="addCrystal(event.currentTarget.id)" class="crystal img-responsive">
</div>
</div>
</div><!-- main-container -->
</body>
</html>