frpong/resources/public/index.html

91 lines
2.0 KiB
HTML
Raw Normal View History

2013-09-15 03:23:42 +05:30
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
2013-10-16 22:46:40 +05:30
<title>Gravity Pong: Flow Based Programming in Clojure using core.async</title>
2013-09-15 03:23:42 +05:30
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
body {
font-family: monospace;
}
2013-10-15 19:03:31 +05:30
#title {
margin: 0px;
2013-10-16 22:46:40 +05:30
width: 98%;
position: absolute;
2013-10-15 19:03:31 +05:30
}
#ball {
fill: orange;
}
#mass {
opacity: 0.5;
fill: khaki;
}
#rpaddle, #lpaddle {
fill: rgb(108, 182, 108);
}
#state {
font-size: 1.5em;
text-align: center;
}
#canvas {
border: 2px green solid;
2013-10-16 22:46:40 +05:30
margin-top: 10px;
}
#score {
font-size: 70px;
text-anchor: middle;
dominant-baseline: central;
}
#msg {
position: absolute;
width: 98%;
top: 40px;
font-size: 1.2em;
}
#msg .imp {
font-size: xx-large;
font-weight: bold;
}
</style>
2013-09-15 03:23:42 +05:30
</head>
<body>
<center>
<div id="screen">
2013-10-15 19:03:31 +05:30
<h2 id="title">Gravity Pong!</h2>
2013-10-16 22:46:40 +05:30
<div style="float: right">
<a target="_blank" href="http://github.com/abhin4v/frpong">github</a>
</div>
2013-10-16 00:32:26 +05:30
<div id="msg">press &lt;space&gt; to start</div>
<svg id="canvas">
<circle id="mass" />
<text id="score">0</text>
<circle id="ball" />
<rect id="lpaddle" />
<rect id="rpaddle" />
</svg>
<div>
2013-10-15 19:03:31 +05:30
<div style="float: left">
fps <span id="fps">0</span>
</div>
use W-S and Up-Down keys to move the paddles / use Left-Right keys to change gravity
2013-10-16 22:46:40 +05:30
<div style="float: right; font-size: smaller">Works only on Google Chrome</div>
</div>
</div>
</center>
2013-09-15 03:23:42 +05:30
<!-- pointing to cljsbuild generated js file -->
<script src="js/frpong.js"></script>
<script type="text/javascript">frpong.core.frpong()</script>
2013-09-15 03:23:42 +05:30
</body>
</html>