Added a circle in center to indicate the mass causing gravity

master
Abhinav Sarkar 2013-10-15 20:12:06 +05:30
parent 7a9712061d
commit 6a1b50c33d
2 changed files with 19 additions and 3 deletions

View File

@ -22,6 +22,11 @@ body {
fill: orange;
}
#mass {
opacity: 0.5;
fill: khaki;
}
#rpaddle, #lpaddle {
fill: rgb(108, 182, 108);
}
@ -48,13 +53,14 @@ body {
<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" />
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">
<circle id="mass" />
<text id="score">0</text>
<circle id="ball" />
<rect id="lpaddle" />

View File

@ -62,18 +62,24 @@
(def *init-vel-deg-lim* [35 55])
(def *perturb-factor* 0.02)
(def *init-mass-radius* 0)
(def *paddle-width* 10)
(def *paddle-step* 8)
(def *max-paddle-y* (- *height* *paddle-size*))
(def *ef-paddle-width* (+ *paddle-width* *padding*))
(def *init-paddle-pos* (/ (- *height* *paddle-size*) 2))
(def *gravity* (atom 0.01))
(def *gravity* (atom 0.005))
(defn mass-radius []
(+ *init-mass-radius* (* (deref *gravity*) 1000)))
;; listen for changes in the gravity input slider and set the atom value accordingly
(ev/listen! (dom/by-id "gravity") :change
#(let [val (* (int (dom/value (dom/by-id "gravity"))) 0.005)]
#(let [val (* (int (dom/value (dom/by-id "gravity"))) 0.01)]
(reset! *gravity* val)
(dom/set-attr! (dom/by-id "mass") "r" (mass-radius))
(.blur (dom/by-id "gravity"))))
(defn layout-game
@ -86,6 +92,10 @@
(dom/set-attr! "r" *ball-radius*)
(dom/set-attr! "cx" (first *center*))
(dom/set-attr! "cy" (second *center*)))
(doto (dom/by-id "mass")
(dom/set-attr! "r" (mass-radius))
(dom/set-attr! "cx" (first *center*))
(dom/set-attr! "cy" (second *center*)))
(doto (dom/by-id "score")
(dom/set-attr! "x" (first *center*))
(dom/set-attr! "y" (second *center*)))