abhin4v
/
frpong
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

UI improvement. Made the game full screen

master
Abhinav Sarkar 2013-10-12 20:11:30 +05:30
parent d5f8f6702c
commit d78ff03952
2 changed files with 64 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
resources/public/index.html
View File

@ -6,17 +6,47 @@
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> <![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> </head>
<body> <body>
<div>FPS: <span id="fps"></span></div> <center>
<div>State: <span id="state"></span></div> <div id="screen">
<div>Score: <span id="score"></span></div> <div>
<div>Velocity: <span id="vel"></span></div> <div id="state">press any key to start</div>
<svg style="border: 1px black solid" id="canvas"> </div>
<circle id="ball" /> <svg id="canvas">
<rect id="lpaddle" /> <circle id="ball" />
<rect id="rpaddle" /> <rect id="lpaddle" />
</svg> <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 --> <!-- pointing to cljsbuild generated js file -->
<script src="js/frpong.js"></script> <script src="js/frpong.js"></script>

43
src/cljs/frpong/core.cljs
View File

@ -54,12 +54,13 @@
[(+ x (* vel-x tick)) (+ y (* vel-y tick))]) [(+ x (* vel-x tick)) (+ y (* vel-y tick))])
(defn ^:export frpong [] (defn ^:export frpong []
(let [width 800 (let [body-el (.-body js/document)
height 400 width (- (.-scrollWidth body-el) 20)
height (- (.-scrollHeight body-el) 125)
padding 5 padding 5
paddle-size 100 paddle-size 100
paddle-width 10 paddle-width 10
ball-radius 5 ball-radius 8
ball-speed 0.33 ball-speed 0.33
init-pos [(/ width 2) (/ height 2)] init-pos [(/ width 2) (/ height 2)]
init-vel (let [sgn #(if (< % 0.5) -1 1) init-vel (let [sgn #(if (< % 0.5) -1 1)
@ -135,7 +136,7 @@
(collision-detector (tap ticks-m) (tap pos-m) (tap vel-m) (collision-detector (tap ticks-m) (tap pos-m) (tap vel-m)
pl-pos-sust pr-pos-sust (tap game-state-m) game-state vel) pl-pos-sust pr-pos-sust (tap game-state-m) game-state vel)
(renderer (tap ticks-m) (tap game-state-m) (tap pos-m) (tap vel-m) (tap pl-pos-m) (tap pr-pos-m)))) (renderer (tap ticks-m) (tap game-state-m) (tap pos-m) (tap pl-pos-m) (tap pr-pos-m))))
(defn ticker (defn ticker
"Ticker component. "Ticker component.
@ -248,25 +249,31 @@
"Renderer component. "Renderer component.
Renders the ball and paddle positions on the browser. Also shows the game state and stats. Renders the ball and paddle positions on the browser. Also shows the game state and stats.
Reads the current values from the signals supplied as parameters." Reads the current values from the signals supplied as parameters."
[ticks game-state pos vel pl-pos pr-pos] [ticks game-state pos pl-pos pr-pos]
(let [ball-el (dom/by-id "ball") (let [ball-el (dom/by-id "ball")
state-el (dom/by-id "state") state-el (dom/by-id "state")
score-el (dom/by-id "score") score-el (dom/by-id "score")
lpaddle-el (dom/by-id "lpaddle") lpaddle-el (dom/by-id "lpaddle")
rpaddle-el (dom/by-id "rpaddle") rpaddle-el (dom/by-id "rpaddle")
fps-el (dom/by-id "fps") fps-el (dom/by-id "fps")]
vel-el (dom/by-id "vel")] (go (loop [fps-p nil state-p nil score-p nil]
(go-loop (let [fps (int (/ 1000 (<! ticks)))
(let [fps (/ 1000 (<! ticks)) [x y] (<! pos)
[x y] (<! pos) [state score] (<! game-state)
[state score] (<! game-state)] state (condp = state
(dom/set-text! fps-el fps) :moving "Playing"
(dom/set-text! state-el (name state)) :collision "Playing"
(dom/set-text! score-el score) :gameover "Game Over")]
(dom/set-text! vel-el (<! vel)) (when-not (= fps fps-p)
(doto ball-el (dom/set-text! fps-el fps))
(dom/set-attr! "cx" x) (when-not (= state state-p)
(dom/set-attr! "cy" y)))) (dom/set-text! state-el state))
(when-not (= score score-p)
(dom/set-text! score-el score))
(doto ball-el
(dom/set-attr! "cx" x)
(dom/set-attr! "cy" y))
(recur fps state score))))
(go-loop (go-loop
(dom/set-attr! lpaddle-el "y" (<! pl-pos))) (dom/set-attr! lpaddle-el "y" (<! pl-pos)))
(go-loop (go-loop