-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
120 lines (103 loc) · 4.48 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>KurToMe/Bricked @ GitHub</title>
<style type="text/css">
body {
margin-top: 1.0em;
background-color: #94bcd1;
font-family: Helvetica, Arial, FreeSans, san-serif;
color: #000000;
}
#container {
margin: 0 auto;
width: 700px;
}
#game-container {
background-color: #ffffff;
height: 600px;
width: 600px;
}
h1 { font-size: 3.8em; color: #6b432e; margin-bottom: 3px; }
h1 .small { font-size: 0.4em; }
h1 a { text-decoration: none }
h2 { font-size: 1.5em; color: #6b432e; }
h3 { text-align: center; color: #6b432e; }
a { color: #6b432e; }
.description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
.notes { font-size: 1.0em; margin-bottom: 30px; margin-top: 10px;}
.download { float: right; }
pre { background: #000; color: #fff; padding: 15px;}
hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
.footer { text-align:center; padding-top:30px; font-style: italic; }
</style>
<script src="./lib/Box2dWeb-2.1a.3/Box2dWeb-2.1.a.3.min.js" ></script>
<script src="./lib/stats/Stats.js" ></script>
<script src="./lib/brain/brain-0.3.5.js" ></script>
</head>
<body>
<a href="https://github.com/KurToMe/Bricked"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<h1><a href="https://github.com/KurToMe/Bricked">Bricked</a>
<span class="small">by <a href="https://github.com/KurToMe">KurToMe</a></span></h1>
<div id="container">
<div id="game-container">
<canvas id="c" width=600 height=600 style="border: 1px solid black"></canvas>
</div>
<!-- JS that does all the work for the game. -->
<script type="text/javascript" src="./scripts/bricked.js"></script>
<div class="notes">
<p>
Note this is only tested on Chrome browser.
Chrome pauses javascript when on another tab, so open this in its own window.
Also, this can take around 10+ minutes of running to display anything even close to smart play.
</p>
</div>
<div class="description">
<p>
This is a work in progress proof-of-concept "game" which will attempt to have a simple AI agent learn and become proficient in game from scratch. All code is written in CoffeeScript.
</p>
<p>
The learning is done as Neural Network classification training.
The only data given to classify a point is simple data such as the ball's and paddle's relative position, velocity, etc.
The possible classifcations for each point are <b>left</b>, <b>right</b>, <b>stay</b>, each indicating the desired action of the paddle.
Training data is gained by storing classification data throughout the a single run of the ball, and when the ball hits or misses the paddle the stored data points are manually classified and passed to the nearal net trainer as training data.
The classification function returned from the neural net trainer is used whenever training completes, and then the next batch of training data can be sent to the trainer.
The neural net trains on a separate Web Worker thread allow training to happen in real time.
</p>
</div>
<h2>Authors</h2>
<p>Kurtis Melby ([email protected])
<br/> </p>
<h2>Libraries Used</h2>
<p>
<a href="http://box2d-js.sourceforge.net"/>box2dJs</a>
</p>
<p>
<a href="http://harthur.github.com/brain"/>brain</a>
</p>
<p>
<a href="https://github.com/mrdoob/stats.js"/>statsJs</a>
</p>
<div class="download">
<a href="https://github.com/KurToMe/Bricked/zipball/master">
<img border="0" width="90" src="https://github.com/images/modules/download/zip.png"></a>
<a href="https://github.com/KurToMe/Bricked/tarball/master">
<img border="0" width="90" src="https://github.com/images/modules/download/tar.png"></a>
</div>
<h2>Download</h2>
<p>
You can download this project in either
<a href="https://github.com/KurToMe/Bricked/zipball/master">zip</a> or
<a href="https://github.com/KurToMe/Bricked/tarball/master">tar formats.
</p>
<p>You can also clone the project with <a href="http://git-scm.com">Git</a>
by running:
<pre>$ git clone git://github.com/KurToMe/Bricked</pre>
</p>
<div class="footer">
get the source code on GitHub : <a href="https://github.com/KurToMe/Bricked">KurToMe/Bricked</a>
</div>
</div>
</body>
</html>