91 lines
2.0 KiB

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Gravity Pong: Flow Based Programming in Clojure using core.async</title>
<!--[if lt IE 9]>
<script src=""></script>
<style type="text/css">
body {
font-family: monospace;
#title {
margin: 0px;
width: 98%;
position: absolute;
#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;
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;
<div id="screen">
<h2 id="title">Gravity Pong!</h2>
<div style="float: right">
<a target="_blank" href="">github</a>
<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" />
<div style="float: left">
fps <span id="fps">0</span>
use W-S and Up-Down keys to move the paddles / use Left-Right keys to change gravity
<div style="float: right; font-size: smaller">Works only on Google Chrome</div>
<!-- pointing to cljsbuild generated js file -->
<script src="js/frpong.js"></script>
<script type="text/javascript">frpong.core.frpong()</script>