79 lines
2.0 KiB
HTML
79 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Gravity Pong: Functional Reactive Programming 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;
|
|
}
|
|
|
|
#title {
|
|
margin: 0px;
|
|
position: absolute;
|
|
width: 98%;
|
|
z-index: -1;
|
|
}
|
|
|
|
#ball {
|
|
fill: orange;
|
|
}
|
|
|
|
#rpaddle, #lpaddle {
|
|
fill: rgb(108, 182, 108);
|
|
}
|
|
|
|
#state {
|
|
font-size: 1.5em;
|
|
text-align: center;
|
|
}
|
|
|
|
#canvas {
|
|
border: 2px green solid;
|
|
}
|
|
|
|
#score {
|
|
font-size: 70px;
|
|
text-anchor: middle;
|
|
dominant-baseline: central;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<center>
|
|
<div id="screen">
|
|
<h2 id="title">Gravity Pong!</h2>
|
|
<div>
|
|
<span style="float: left; vertical-align: top;">Gravity
|
|
<input id="gravity" type="range" min="1" max="10" value="1" step="1" />
|
|
</span>
|
|
<span style="float: right; font-size: small">
|
|
<span id="state">press <space> to start</span>
|
|
</span>
|
|
</div>
|
|
<svg id="canvas">
|
|
<text id="score">0</text>
|
|
<circle id="ball" />
|
|
<rect id="lpaddle" />
|
|
<rect id="rpaddle" />
|
|
</svg>
|
|
<div>
|
|
<div style="float: left">
|
|
fps <span id="fps">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">
|
|
<a target="_blank" href="https://github.com/abhin4v/frpong">Source</a>
|
|
</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> |