-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (93 loc) · 3.44 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
<!DOCTYPE html>
<html>
<head>
<title>Target Practice</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap_3_3_5.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div id="mainHeader" class="outer row">
<h1 id="headerTitle" class="inner">TARGET PRACTICE</h1>
</div>
<div id="infoBody" class="row">
<div id="startInput" class="col-xs-6 outer welcome">
<form id="inputForm">
<div class="form-control inner">
<div class="col-xs-8">range size</div>
<div class="col-xs-4">
<input name="variSpaces" type="number" class="form-control" id="variSpaces" value="" placeholder="15">
</div>
</div>
<div class="form-control inner">
<div class="col-xs-8">number of discs</div>
<div class="col-xs-4">
<input type="number" class="form-control" id="variDiscs" value="" placeholder="5">
</div>
</div>
<div class="form-control inner">
<div class="col-xs-8">range of disc speed</div>
<div class="col-xs-4">
<input type="number" class="form-control" id="variVel" value="" placeholder="2">
</div>
</div>
<div class="form-control inner">
<div class="col-xs-8">refresh rate (sec)</div>
<div class="col-xs-4">
<input type="number" class="form-control" id="variGameSpeed" value="" placeholder="1.5">
</div>
</div>
<div class="form-control inner">
<div class="col-xs-8">timer length (sec)</div>
<div class="col-xs-4">
<input type="number" class="form-control" id="variTimer" value="" placeholder="60">
</div>
</div>
</form>
</div>
<div id="report" class="col-xs-6 outer notWelcome">
<p class="inner">
<span id="message">Press START to begin game.</span>
</p>
<p class="inner">
TIME REMAINING: <span id="timerTime">--</span>
</p>
<p class="inner">
HITS: <span id="hitCountRound">--</span><br>
MISSES: <span id="missCountRound">--</span><br>
ACCURACY: <span id="accuCountRound">--</span><br>
</p>
</div>
<div id="buttons" class="col-xs-offset-2 col-xs-2">
<div>
<button type="button" id ="start">start</button>
<button type="button" id="restart">new</button>
</div>
</div>
</div>
<div id="vizRange" class="row notWelcome">
</div>
<div id="instructions" class="row outer welcome">
<p class="inner header">
Welcome to the skeet shooter of the future!
</p>
<p class="inner">
The object of the game is to destroy all the discs before the timer runs out. Each disc moves at a constant speed, but you can't tell one from another. Track one, predict its path, then click the next square before the disc lands there to hit it.
</p>
<p class="inner">
Enter in custom game settings (or use the default ones), click START, then fire away!
</p>
<p class="inner">
Try a big range with a short refresh rate for a visual treat!
</p>
</div>
</div>
<footer>
<script src="js/jquery_1_11_3.js"></script>
<script type="text/javascript" src="js/variables.js"></script>
<script type="text/javascript" src="js/setup.js"></script>
<script type="text/javascript" src="js/update.js"></script>
<script type="text/javascript" src="js/ready.js"></script>
</footer>
</body>
</html>