-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathprototype.html
More file actions
206 lines (177 loc) · 12.8 KB
/
prototype.html
File metadata and controls
206 lines (177 loc) · 12.8 KB
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>
Prototype Game Trainer
</title>
<style type="text/css">
#topTen {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
}
path {
stroke-width: 1;
fill: none;
}
.data1 {
stroke: steelblue;
}
.data2 {
stroke: orange;
}
.axis {
shape-rendering: crispEdges;
}
.x.axis line {
stroke: lightgrey;
}
.x.axis .minor {
stroke-opacity: .5;
}
.x.axis path {
display: none;
}
.x.axis text {
font-size: 14;
}
.y.axis line, .y.axis path {
fill: none;
stroke: #000;
}
.y.axis text {
font-size: 14;
}
.y.axisRight text {
fill: orange;
}
.y.axisLeft text {
fill: steelblue;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<script>
$(function onLoad() {
var svg = d3.select("#gameScreen").append("svg"),
scoreboard = $("<div>").appendTo("body"),
margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 1000,
height = 500,
xScale = d3.scale.linear().range([margin.left, width - margin.right]).domain([0,60]),
yScale = d3.scale.linear().range([height - margin.top, margin.bottom]).domain([0,10]),
xAxis = d3.svg.axis().scale(xScale),
yAxis = d3.svg.axis().scale(yScale).orient("left");
svg.attr("width", width).attr("height", height);
svg.append("svg:g")
.attr("class","axis")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis);
svg.append("svg:g")
.attr("class","axis")
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis);
var lineGen = d3.svg.line()
.x(function(data) {
return xScale(data.time);
})
.y(function(data) {
return yScale(data.score);
});
var currentCount = 0;
var currentInc = 0;
var capturedData = [];
var total = 0;
var FPS = 4;
var collectorTimer = null;
function trapButton(e) {
e.preventDefault();
if(e.keyCode == 32) {
currentCount++;
total++;
scoreboard.html("Total: " + total);
}
}
if(!localStorage["scoreboard60"]) localStorage["scoreboard60"] = '[{"name":"J.D. Lowe - Thumbs only","date":"6/9/2015, 12:16:18 PM","total":443,"data":[{"time":0,"total":0,"score":0},{"time":0.25,"total":2,"score":2},{"time":0.5,"total":4,"score":2},{"time":0.75,"total":6,"score":2},{"time":1,"total":8,"score":2},{"time":1.25,"total":11,"score":3},{"time":1.5,"total":14,"score":3},{"time":1.75,"total":16,"score":2},{"time":2,"total":19,"score":3},{"time":2.25,"total":21,"score":2},{"time":2.5,"total":24,"score":3},{"time":2.75,"total":26,"score":2},{"time":3,"total":27,"score":1},{"time":3.25,"total":30,"score":3},{"time":3.5,"total":32,"score":2},{"time":3.75,"total":35,"score":3},{"time":4,"total":37,"score":2},{"time":4.25,"total":40,"score":3},{"time":4.5,"total":42,"score":2},{"time":4.75,"total":45,"score":3},{"time":5,"total":47,"score":2},{"time":5.25,"total":50,"score":3},{"time":5.5,"total":52,"score":2},{"time":5.75,"total":54,"score":2},{"time":6,"total":57,"score":3},{"time":6.25,"total":59,"score":2},{"time":6.5,"total":61,"score":2},{"time":6.75,"total":63,"score":2},{"time":7,"total":64,"score":1},{"time":7.25,"total":67,"score":3},{"time":7.5,"total":69,"score":2},{"time":7.75,"total":72,"score":3},{"time":8,"total":74,"score":2},{"time":8.25,"total":77,"score":3},{"time":8.5,"total":79,"score":2},{"time":8.75,"total":82,"score":3},{"time":9,"total":84,"score":2},{"time":9.25,"total":87,"score":3},{"time":9.5,"total":89,"score":2},{"time":9.75,"total":92,"score":3},{"time":10,"total":94,"score":2},{"time":10.25,"total":96,"score":2},{"time":10.5,"total":99,"score":3},{"time":10.75,"total":101,"score":2},{"time":11,"total":104,"score":3},{"time":11.25,"total":106,"score":2},{"time":11.5,"total":109,"score":3},{"time":11.75,"total":111,"score":2},{"time":12,"total":113,"score":2},{"time":12.25,"total":114,"score":1},{"time":12.5,"total":117,"score":3},{"time":12.75,"total":119,"score":2},{"time":13,"total":121,"score":2},{"time":13.25,"total":122,"score":1},{"time":13.5,"total":122,"score":0},{"time":13.75,"total":123,"score":1},{"time":14,"total":123,"score":0},{"time":14.25,"total":123,"score":0},{"time":14.5,"total":124,"score":1},{"time":14.75,"total":126,"score":2},{"time":15,"total":127,"score":1},{"time":15.25,"total":129,"score":2},{"time":15.5,"total":130,"score":1},{"time":15.75,"total":132,"score":2},{"time":16,"total":132,"score":0},{"time":16.25,"total":134,"score":2},{"time":16.5,"total":135,"score":1},{"time":16.75,"total":137,"score":2},{"time":17,"total":138,"score":1},{"time":17.25,"total":140,"score":2},{"time":17.5,"total":142,"score":2},{"time":17.75,"total":143,"score":1},{"time":18,"total":145,"score":2},{"time":18.25,"total":146,"score":1},{"time":18.5,"total":149,"score":3},{"time":18.75,"total":151,"score":2},{"time":19,"total":152,"score":1},{"time":19.25,"total":155,"score":3},{"time":19.5,"total":157,"score":2},{"time":19.75,"total":160,"score":3},{"time":20,"total":162,"score":2},{"time":20.25,"total":164,"score":2},{"time":20.5,"total":164,"score":0},{"time":20.75,"total":166,"score":2},{"time":21,"total":169,"score":3},{"time":21.25,"total":170,"score":1},{"time":21.5,"total":172,"score":2},{"time":21.75,"total":174,"score":2},{"time":22,"total":177,"score":3},{"time":22.25,"total":179,"score":2},{"time":22.5,"total":182,"score":3},{"time":22.75,"total":184,"score":2},{"time":23,"total":185,"score":1},{"time":23.25,"total":185,"score":0},{"time":23.5,"total":185,"score":0},{"time":23.75,"total":187,"score":2},{"time":24,"total":190,"score":3},{"time":24.25,"total":191,"score":1},{"time":24.5,"total":192,"score":1},{"time":24.75,"total":193,"score":1},{"time":25,"total":193,"score":0},{"time":25.25,"total":194,"score":1},{"time":25.5,"total":197,"score":3},{"time":25.75,"total":198,"score":1},{"time":26,"total":199,"score":1},{"time":26.25,"total":201,"score":2},{"time":26.5,"total":202,"score":1},{"time":26.75,"total":203,"score":1},{"time":27,"total":205,"score":2},{"time":27.25,"total":206,"score":1},{"time":27.5,"total":207,"score":1},{"time":27.75,"total":209,"score":2},{"time":28,"total":210,"score":1},{"time":28.25,"total":212,"score":2},{"time":28.5,"total":213,"score":1},{"time":28.75,"total":214,"score":1},{"time":29,"total":216,"score":2},{"time":29.25,"total":218,"score":2},{"time":29.5,"total":220,"score":2},{"time":29.75,"total":222,"score":2},{"time":30,"total":223,"score":1},{"time":30.25,"total":225,"score":2},{"time":30.5,"total":227,"score":2},{"time":30.75,"total":230,"score":3},{"time":31,"total":232,"score":2},{"time":31.25,"total":234,"score":2},{"time":31.5,"total":235,"score":1},{"time":31.75,"total":237,"score":2},{"time":32,"total":238,"score":1},{"time":32.25,"total":240,"score":2},{"time":32.5,"total":240,"score":0},{"time":32.75,"total":242,"score":2},{"time":33,"total":242,"score":0},{"time":33.25,"total":243,"score":1},{"time":33.5,"total":244,"score":1},{"time":33.75,"total":245,"score":1},{"time":34,"total":246,"score":1},{"time":34.25,"total":248,"score":2},{"time":34.5,"total":250,"score":2},{"time":34.75,"total":252,"score":2},{"time":35,"total":254,"score":2},{"time":35.25,"total":256,"score":2},{"time":35.5,"total":258,"score":2},{"time":35.75,"total":261,"score":3},{"time":36,"total":263,"score":2},{"time":36.25,"total":265,"score":2},{"time":36.5,"total":266,"score":1},{"time":36.75,"total":266,"score":0},{"time":37,"total":267,"score":1},{"time":37.25,"total":267,"score":0},{"time":37.5,"total":268,"score":1},{"time":37.75,"total":270,"score":2},{"time":38,"total":271,"score":1},{"time":38.25,"total":271,"score":0},{"time":38.5,"total":271,"score":0},{"time":38.75,"total":273,"score":2},{"time":39,"total":275,"score":2},{"time":39.25,"total":278,"score":3},{"time":39.5,"total":280,"score":2},{"time":39.75,"total":282,"score":2},{"time":40,"total":285,"score":3},{"time":40.25,"total":287,"score":2},{"time":40.5,"total":290,"score":3},{"time":40.75,"total":292,"score":2},{"time":41,"total":294,"score":2},{"time":41.25,"total":297,"score":3},{"time":41.5,"total":299,"score":2},{"time":41.75,"total":302,"score":3},{"time":42,"total":304,"score":2},{"time":42.25,"total":307,"score":3},{"time":42.5,"total":309,"score":2},{"time":42.75,"total":312,"score":3},{"time":43,"total":314,"score":2},{"time":43.25,"total":316,"score":2},{"time":43.5,"total":317,"score":1},{"time":43.75,"total":317,"score":0},{"time":44,"total":319,"score":2},{"time":44.25,"total":322,"score":3},{"time":44.5,"total":324,"score":2},{"time":44.75,"total":327,"score":3},{"time":45,"total":329,"score":2},{"time":45.25,"total":331,"score":2},{"time":45.5,"total":334,"score":3},{"time":45.75,"total":336,"score":2},{"time":46,"total":338,"score":2},{"time":46.25,"total":341,"score":3},{"time":46.5,"total":343,"score":2},{"time":46.75,"total":346,"score":3},{"time":47,"total":348,"score":2},{"time":47.25,"total":351,"score":3},{"time":47.5,"total":353,"score":2},{"time":47.75,"total":355,"score":2},{"time":48,"total":357,"score":2},{"time":48.25,"total":359,"score":2},{"time":48.5,"total":361,"score":2},{"time":48.75,"total":364,"score":3},{"time":49,"total":366,"score":2},{"time":49.25,"total":368,"score":2},{"time":49.5,"total":371,"score":3},{"time":49.75,"total":373,"score":2},{"time":50,"total":375,"score":2},{"time":50.25,"total":378,"score":3},{"time":50.5,"total":379,"score":1},{"time":50.75,"total":380,"score":1},{"time":51,"total":382,"score":2},{"time":51.25,"total":385,"score":3},{"time":51.5,"total":387,"score":2},{"time":51.75,"total":389,"score":2},{"time":52,"total":392,"score":3},{"time":52.25,"total":394,"score":2},{"time":52.5,"total":396,"score":2},{"time":52.75,"total":397,"score":1},{"time":53,"total":397,"score":0},{"time":53.25,"total":399,"score":2},{"time":53.5,"total":401,"score":2},{"time":53.75,"total":404,"score":3},{"time":54,"total":405,"score":1},{"time":54.25,"total":405,"score":0},{"time":54.5,"total":407,"score":2},{"time":54.75,"total":409,"score":2},{"time":55,"total":409,"score":0},{"time":55.25,"total":410,"score":1},{"time":55.5,"total":412,"score":2},{"time":55.75,"total":413,"score":1},{"time":56,"total":415,"score":2},{"time":56.25,"total":417,"score":2},{"time":56.5,"total":419,"score":2},{"time":56.75,"total":421,"score":2},{"time":57,"total":422,"score":1},{"time":57.25,"total":424,"score":2},{"time":57.5,"total":426,"score":2},{"time":57.75,"total":427,"score":1},{"time":58,"total":428,"score":1},{"time":58.25,"total":430,"score":2},{"time":58.5,"total":430,"score":0},{"time":58.75,"total":432,"score":2},{"time":59,"total":434,"score":2},{"time":59.25,"total":436,"score":2},{"time":59.5,"total":438,"score":2},{"time":59.75,"total":440,"score":2},{"time":60,"total":442,"score":2}]}]';
function scoreboardBuilder() {
var scoreboardArr = JSON.parse(localStorage["scoreboard60"]);
$("#topTen").html("");
scoreboardArr.slice(0,10).forEach(function(score) {
var li = $("<li>");
li.html(score.total + " - " + score.name + " - " + score.date);
$("#topTen").append(li);
});
}
var mainScoreBoard = JSON.parse(localStorage["scoreboard60"]);
function collectButton() {
if(currentInc > 60) {
clearInterval(collectorTimer);
$(document).unbind("keyup", trapButton);
var name = prompt("Please enter your name:", "");
var t = [];
if(localStorage["scoreboard60"]) t = JSON.parse(localStorage["scoreboard60"]);
t.push({
name: name,
date: (new Date()).toLocaleString(),
total: total,
data: capturedData
});
t = t.sort(function(a,b) {
return b.total - a.total;
});
localStorage["scoreboard60"] = JSON.stringify(t);
scoreboard.html("Total: " + total);
scoreboard.append($("<div>Average: " + (total / 60) + " per second.</div>"));
scoreboard.append($("<div>Game over. Refresh page to play again.</div>"));
scoreboardBuilder();
return;
}
var temp = currentCount;
currentCount = 0;
capturedData.push({
time: currentInc,
total: total,
score: temp
});
$(".removeMe").remove();
svg.append("svg:path")
.attr("d", lineGen(capturedData))
.attr("stroke", "green")
.attr("stroke-width", 2)
.attr("class", "removeMe")
.attr("fill", "none");
svg.append("svg:path")
.attr("d", lineGen(mainScoreBoard[0].data.slice(0, capturedData.length)))
.attr("stroke", "blue")
.attr("stroke-width", 2)
.attr("class", "removeMe")
.attr("fill", "none");
currentInc += (1/FPS);
}
$("#startScreen, #gameScreen").hide();
$("#startScreen").show();
$("#starter").click(function(e) {
$("#startScreen, #gameScreen").hide();
$("#gameScreen").show().focus();
scoreboardBuilder();
mainScoreBoard = JSON.parse(localStorage["scoreboard60"]);
$(document).bind("keyup", trapButton);
currentInc = 0;
total = 0;
scoreboard.html("Total: " + total);
collectorTimer = setInterval(collectButton, 1000/FPS);
});
});
</script>
<div id="startScreen">
<button id="starter">Start</button>
</div>
<div id="gameScreen">
<ol id="topTen">
</ol>
</div>
</body>
</html>