frpong/resources/public/index.html

55 lines
1.3 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Functional Reactive Pong in Clojure using core.async</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
body {
font-family: monospace;
}
#ball {
fill: orange;
}
#rpaddle, #lpaddle {
fill: rgb(108, 182, 108);
}
#state {
font-size: 1.5em;
text-align: center;
}
#canvas {
border: 2px green solid;
}
</style>
</head>
<body>
<center>
<div id="screen">
<div>
<div id="state">press &lt;space&gt; to start</div>
</div>
<svg id="canvas">
<circle id="ball" />
<rect id="lpaddle" />
<rect id="rpaddle" />
</svg>
<div>
<div style="float: left">score <span id="score">0</span></div>
use W-S keys to move the left paddle and Up-Down arrow keys to move the right paddle
<div style="float: right"><span id="fps">0</span> fps</div>
</div>
</div>
</center>
<!-- pointing to cljsbuild generated js file -->
<script src="js/frpong.js"></script>
<script type="text/javascript">frpong.core.frpong()</script>
</body>
</html>