UI improvement. Made the game full screen
parent
d5f8f6702c
commit
d78ff03952
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue