Added key controls for gravity, removed slider. Changed the message display.

master
Abhinav Sarkar 2013-10-15 23:04:42 +05:30
parent 724f91ec8f
commit e023942ac2
3 changed files with 42 additions and 32 deletions

View File

@ -13,9 +13,6 @@ body {
#title { #title {
margin: 0px; margin: 0px;
position: absolute;
width: 98%;
z-index: -1;
} }
#ball { #ball {
@ -38,6 +35,7 @@ body {
#canvas { #canvas {
border: 2px green solid; border: 2px green solid;
margin-top: 3px;
} }
#score { #score {
@ -45,20 +43,25 @@ body {
text-anchor: middle; text-anchor: middle;
dominant-baseline: central; dominant-baseline: central;
} }
#msg {
position: absolute;
width: 98%;
top: 40px;
font-size: 1.2em;
}
#msg .imp {
font-size: xx-large;
font-weight: bold;
}
</style> </style>
</head> </head>
<body> <body>
<center> <center>
<div id="screen"> <div id="screen">
<h2 id="title">Gravity Pong!</h2> <h2 id="title">Gravity Pong!</h2>
<div> <div id="msg"></div>
<span style="float: left; vertical-align: top;">Gravity
0 <input id="gravity" type="range" min="0" max="10" value="1" step="1" /> 10
</span>
<span style="float: right; font-size: smaller">
<span id="state">press &lt;space&gt; to start</span>
</span>
</div>
<svg id="canvas"> <svg id="canvas">
<circle id="mass" /> <circle id="mass" />
<text id="score">0</text> <text id="score">0</text>
@ -70,7 +73,7 @@ body {
<div style="float: left"> <div style="float: left">
fps <span id="fps">0</span> fps <span id="fps">0</span>
</div> </div>
use W-S keys to move the left paddle and Up-Down arrow keys to move the right paddle use W-S and Up-Down keys to move the paddles / use Left-Right keys to change gravity
<div style="float: right"> <div style="float: right">
<a target="_blank" href="https://github.com/abhin4v/frpong">Source</a> <a target="_blank" href="https://github.com/abhin4v/frpong">Source</a>
</div> </div>

View File

@ -50,6 +50,11 @@
(close! c)))) (close! c))))
c)) c))
(defn flash [el msgs millis]
(when (not-empty msgs)
(do (dom/set-text! el (first msgs))
(.setTimeout js/window #(flash el (rest msgs) millis) millis))))
;; Global settings ;; Global settings
(def *width* (- (.-scrollWidth (.-body js/document)) 20)) (def *width* (- (.-scrollWidth (.-body js/document)) 20))
(def *height* (- (.-scrollHeight (.-body js/document)) 130)) (def *height* (- (.-scrollHeight (.-body js/document)) 130))
@ -60,7 +65,7 @@
(def *ball-radius* 8) (def *ball-radius* 8)
(def *ball-speed* 0.6) (def *ball-speed* 0.6)
(def *init-vel-deg-lim* [35 55]) (def *init-vel-deg-lim* [35 55])
(def *perturb-factor* 0.02) (def *perturb-factor* 0.05)
(def *init-mass-radius* 0) (def *init-mass-radius* 0)
@ -71,16 +76,19 @@
(def *init-paddle-pos* (/ (- *height* *paddle-size*) 2)) (def *init-paddle-pos* (/ (- *height* *paddle-size*) 2))
(def *gravity* (atom 0.005)) (def *gravity* (atom 0.005))
(def *gravity-step* 0.005)
(defn mass-radius [] (defn mass-radius []
(+ *init-mass-radius* (* (deref *gravity*) 1000))) (+ *init-mass-radius* (* (deref *gravity*) 1000)))
;; listen for changes in the gravity input slider and set the atom value accordingly (defn setup-gravity-control []
(ev/listen! (dom/by-id "gravity") :change (let [keydowns (first (event-chan :keydown))
#(let [val (* (int (dom/value (dom/by-id "gravity"))) 0.01)] actions { 37 #(- % *gravity-step*) 39 #(+ % *gravity-step*) }]
(reset! *gravity* val) (go-loop
(dom/set-attr! (dom/by-id "mass") "r" (mass-radius)) (let [k (:keyCode (<! keydowns))]
(.blur (dom/by-id "gravity")))) (when (contains? actions k)
(do (swap! *gravity* #(max 0 (min 10 ((actions k) %))))
(dom/set-attr! (dom/by-id "mass") "r" (mass-radius))))))))
(defn layout-game (defn layout-game
"Lays out the game screen." "Lays out the game screen."
@ -268,7 +276,7 @@
:moving vel :moving vel
:gameover 0)) :gameover 0))
(defn perturb [v] (* v (+ 1 (/ (- (rand) 0.5) (/ 0.5 *perturb-factor*))))) (defn perturb [v] (* v (+ 1 (* (rand) *perturb-factor*))))
(defn collision-detector [ticks pos vel-in acc pd-pos game-state-in game-state vel-out] (defn collision-detector [ticks pos vel-in acc pd-pos game-state-in game-state vel-out]
"Collision Detector component. "Collision Detector component.
@ -317,15 +325,13 @@
Reads the current values from the signals supplied as parameters." Reads the current values from the signals supplied as parameters."
[ticks game-state pos pd-pos] [ticks game-state pos pd-pos]
(let [ball-el (dom/by-id "ball") (let [ball-el (dom/by-id "ball")
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")
title-el (dom/by-id "title")] msg-el (dom/by-id "msg")]
(dom/set-style! ball-el "fill" "orange") (dom/set-style! ball-el "fill" "orange")
(dom/set-text! state-el "") (dom/set-text! msg-el "")
(dom/set-text! title-el "Gravity Pong!")
(go (loop [fps-p nil score-p nil] (go (loop [fps-p nil score-p nil]
(let [fps (int (/ 1000 (<! ticks))) (let [fps (int (/ 1000 (<! ticks)))
[x y] (<! pos) [x y] (<! pos)
@ -342,12 +348,13 @@
(dom/set-text! score-el score)) (dom/set-text! score-el score))
(when (= state :gameover) (when (= state :gameover)
(do (dom/set-style! ball-el "fill" "red") (do (dom/set-style! ball-el "fill" "red")
(dom/set-text! state-el "press <space> to restart") (dom/set-html! msg-el "<span class='imp'>GAME OVER</span><br>press &lt;space&gt; to restart")
(dom/set-text! title-el "GAME OVER")
(start-on-space))) (start-on-space)))
(recur fps score)))))) (recur fps score))))))
;; Everything is ready now. Layout the game and start it on pressing <space>! ;; Everything is ready now. Layout the game and start it on pressing <space>!
(defn ^:export frpong [] (defn ^:export frpong []
(setup-gravity-control)
(layout-game) (layout-game)
(dom/set-text! (dom/by-id "msg") "press <space> to start")
(start-on-space)) (start-on-space))

View File

@ -128,13 +128,13 @@
(defn event-chan (defn event-chan
([event-type] ([event-type]
(let [c (chan)] (let [c (chan)
(ev/listen! ev/root-element event-type #(put! c %)) [lkey] (ev/listen! event-type #(put! c %))]
[c #(do (ev/unlisten! ev/root-element event-type) (close! c))])) [c #(do (ev/unlisten-by-key! lkey) (close! c))]))
([node event-type] ([node event-type]
(let [c (chan)] (let [c (chan)
(ev/listen! node event-type #(put! c %)) [lkey] (ev/listen! node event-type #(put! c %))]
[c #(do (ev/unlisten! node event-type) (close! c))]))) [c #(do (ev/unlisten-by-key! lkey) (close! c))])))
(defn key-chan [keydowns keyups sampler keycodes] (defn key-chan [keydowns keyups sampler keycodes]
(let [c (chan) (let [c (chan)