Added key controls for gravity, removed slider. Changed the message display.
This commit is contained in:
parent
724f91ec8f
commit
e023942ac2
@ -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 <space> 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>
|
||||||
|
@ -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 <space> 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))
|
||||||
|
@ -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)
|
||||||
|
Loading…
Reference in New Issue
Block a user