Moved to basic SVG
parent
6d78cdad2f
commit
b367dfe6cb
|
@ -10,7 +10,10 @@
|
|||
<body>
|
||||
<div>FPS: <span id="fps"></span></div>
|
||||
<div>Position: <span id="pos"></span></div>
|
||||
<div style="position: absolute" id="ball">O</div>
|
||||
<svg style="width: 300px; height: 200px; border: 1px black solid" id="canvas">
|
||||
<circle id="ball" r="5" cx="5" cy="100"/>
|
||||
</svg>
|
||||
|
||||
<!-- pointing to cljsbuild generated js file -->
|
||||
<script src="js/frpong.js"></script>
|
||||
<script type="text/javascript">frpong.core.init()</script>
|
||||
|
|
|
@ -9,26 +9,26 @@
|
|||
;;
|
||||
;; Signal Diagram
|
||||
;;
|
||||
;; +---------------------+
|
||||
;; | +-------------+ |
|
||||
;; | | | |
|
||||
;; v v | |
|
||||
;; +----------+ vel-chan | |
|
||||
;; +-->|c-detector+----------+ |
|
||||
;; | +----------+ | |
|
||||
;; | +-----------------+ |
|
||||
;; | | +-----------------+
|
||||
;; | | | |
|
||||
;; | v v |
|
||||
;; +---------+ frame-chan +------+ tick-chan | +----------+ pos-chan |
|
||||
;; |frame-gen+------------>|ticker+-----------+-->|positioner+--------------+
|
||||
;; +---------+ +------+ +----------+ |
|
||||
;; +---------------------+
|
||||
;; |
|
||||
;; v
|
||||
;; +----------+
|
||||
;; | renderer |
|
||||
;; +----------+
|
||||
;; +---------------------+
|
||||
;; | +-------------+ |
|
||||
;; | | | |
|
||||
;; v v | |
|
||||
;; +----------+ vel-chan | |
|
||||
;; +-->|c-detector+----------+ |
|
||||
;; | +----------+ | |
|
||||
;; | +-----------------+ |
|
||||
;; | | +-----------------+
|
||||
;; | | | |
|
||||
;; | v v |
|
||||
;; +---------+ frame-chan +------+ tick-chan | +----------+ pos-chan |
|
||||
;; |frame-gen+------------>|ticker+-----------+-->|positioner+--------------+
|
||||
;; +---------+ +------+ +----------+ |
|
||||
;; +---------------------+
|
||||
;; |
|
||||
;; v
|
||||
;; +----------+
|
||||
;; | renderer |
|
||||
;; +----------+
|
||||
|
||||
(defn positioner [tick-chan vel-chan pos-chan-in pos-chan-out]
|
||||
(go-loop
|
||||
|
@ -38,19 +38,15 @@
|
|||
pos-next [(+ x (* vel-x tick)) (+ y (* vel-y tick))]]
|
||||
(>! pos-chan-out pos-next))))
|
||||
|
||||
(defn collision-detector [width height tick-chan pos-chan vel-chan-in vel-chan-out]
|
||||
(defn collision-detector [width height padding tick-chan pos-chan vel-chan-in vel-chan-out]
|
||||
(go-loop
|
||||
(let [tick (<! tick-chan)
|
||||
[vel-x vel-y] (<! vel-chan-in)
|
||||
[x y] (<! pos-chan)
|
||||
[xn yn] [(+ x (* vel-x tick)) (+ y (* vel-y tick))]]
|
||||
(>! vel-chan-out
|
||||
(cond
|
||||
(< xn 0) [(- vel-x) vel-y]
|
||||
(< yn 0) [vel-x (- vel-y)]
|
||||
(> xn width) [(- vel-x) vel-y]
|
||||
(> yn height) [vel-x (- vel-y)]
|
||||
:else [vel-x vel-y])))))
|
||||
[xn yn] [(+ x (* vel-x tick)) (+ y (* vel-y tick))]
|
||||
vel-xn (if (and (> xn padding) (< xn (- width padding))) vel-x (- vel-x))
|
||||
vel-yn (if (and (> yn padding) (< yn (- height padding))) vel-y (- vel-y))]
|
||||
(>! vel-chan-out [vel-xn vel-yn]))))
|
||||
|
||||
(defn ^:export init []
|
||||
(let [frame-chan (h/frame-chan)
|
||||
|
@ -58,10 +54,11 @@
|
|||
|
||||
fps-chan (h/map-chan #(/ 1000 %) (h/diff-chan frame-chan2))
|
||||
|
||||
width 100
|
||||
height 100
|
||||
init-pos [0 50]
|
||||
init-vel [0.05 0.05]
|
||||
width 300
|
||||
height 200
|
||||
padding 5
|
||||
init-pos [5 100]
|
||||
init-vel [0.1 0.12]
|
||||
|
||||
[tick-chan-pos tick-chan-collsion] (h/dup-chan (h/diff-chan frame-chan1))
|
||||
|
||||
|
@ -71,7 +68,8 @@
|
|||
vel-chan (chan)
|
||||
[vel-chan-pos vel-chan-collision] (h/dup-chan vel-chan)]
|
||||
(positioner tick-chan-pos vel-chan-pos pos-chan-pos pos-chan)
|
||||
(collision-detector width height tick-chan-collsion pos-chan-collision vel-chan-collision vel-chan)
|
||||
(collision-detector width height padding
|
||||
tick-chan-collsion pos-chan-collision vel-chan-collision vel-chan)
|
||||
|
||||
(go (>! pos-chan init-pos))
|
||||
(go (>! vel-chan init-vel))
|
||||
|
@ -80,5 +78,5 @@
|
|||
(let [[x y] (map int (<! pos-chan-render))]
|
||||
(dom/set-text! (dom/by-id "fps") (<! fps-chan))
|
||||
(dom/set-text! (dom/by-id "pos") [x y])
|
||||
(dom/set-style! (dom/by-id "ball") "left" (str (+ 50 x) "px"))
|
||||
(dom/set-style! (dom/by-id "ball") "top" (str (+ 50 y) "px"))))))
|
||||
(dom/set-attr! (dom/by-id "ball") "cx" x)
|
||||
(dom/set-attr! (dom/by-id "ball") "cy" y)))))
|
||||
|
|
Loading…
Reference in New Issue