Fixed the issue with switching tab causing the ball to go out of boundaries

10 years ago · a5aa5964cd
parent 25ab05ede0
commit a5aa5964cd
3 changed files with 39 additions and 13 deletions
--- a/resources/public/index.html
+++ b/resources/public/index.html
@ -8,13 +8,14 @@
    <![endif]-->
 </head>
 <body>
-	<div>FPS: <span id="fps"></span></div>
-	<div>Position: <span id="pos"></span></div>
-	<div>Velocity: <span id="vel"></span></div>
-	<svg style="width: 300px; height: 200px; border: 1px black solid" id="canvas">
-		<circle id="ball" r="5" cx="5" cy="100"/>
-	</svg>
-	
+    <div>Frame: <span id="frame"></span></div>
+    <div>FPS: <span id="fps"></span></div>
+    <div>Position: <span id="pos"></span></div>
+    <div>Velocity: <span id="vel"></span></div>
+    <svg style="width: 600px; height: 400px; 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>
--- a/src/cljs/frpong/core.cljs
+++ b/src/cljs/frpong/core.cljs
@ -1,5 +1,5 @@
 (ns frpong.core
-  (:require [frpong.helpers :as h]
+  (:require [frpong.helpers :as h :refer [log]]
            [cljs.core.async :as async
             :refer [<! >! chan put! close! sliding-buffer dropping-buffer timeout]]
            [domina :as dom :refer [log]]
@ -32,6 +32,16 @@

 (defn abs [x] (.abs js/Math x))

+(defn tick-chan [frame-chan]
+  (let [c (chan)]
+    (go
+      (loop [prev (<! frame-chan)]
+        (let [t (<! frame-chan)]
+          (when (< t (* 10 prev))
+            (>! c t))
+            (recur t))))
+    c))
+
 (defn positioner [tick-chan vel-chan pos-chan-in pos-chan-out]
  (go-loop
    (let [tick (<! tick-chan)
@ -65,7 +75,7 @@
      (dom/set-attr! (dom/by-id "ball") "cy" y))))

 (defn game-setup [width height padding frame-chan pos-chan vel-chan]
-  (let [[tick-chan-pos tick-chan-collsion] (h/dup-chan (h/diff-chan frame-chan))
+  (let [[tick-chan-pos tick-chan-collsion] (h/dup-chan (tick-chan (h/diff-chan frame-chan)))
        [pos-chan-pos pos-chan-render pos-chan-collision] (h/multiplex pos-chan 3)
        [vel-chan-pos vel-chan-collision vel-chan-render] (h/multiplex vel-chan 3)]
    (positioner tick-chan-pos vel-chan-pos pos-chan-pos pos-chan)
@ -85,14 +95,17 @@

 (defn ^:export init []
  (let [frame-chan (h/frame-chan)
-        [frame-chan-fps frame-chan-game] (h/dup-chan frame-chan)
+        [frame-chan-fps frame-chan-game frame-chan-count] (h/multiplex frame-chan 3)

        fps-chan (h/map-chan #(/ 1000 %) (h/diff-chan frame-chan-fps))
+        frame-count-chan (h/counting-chan frame-chan-count)

-        width 300
-        height 200
+        width 600
+        height 400
        padding 5
        init-pos [5 100]
        init-vel [0.2 0.22]]
-    (go-loop (dom/set-text! (dom/by-id "fps") (<! fps-chan)))
+    (go-loop
+      (dom/set-text! (dom/by-id "fps") (<! fps-chan))
+      (dom/set-text! (dom/by-id "frame") (<! frame-count-chan)))
    (game-init width height padding init-pos init-vel frame-chan-game)))
--- a/src/cljs/frpong/helpers.cljs
+++ b/src/cljs/frpong/helpers.cljs
@ -9,6 +9,8 @@
 (defn now []
  (.valueOf (js/Date.)))

+(defn log [s] (.log js/console s))
+
 (defn put-all! [cs x]
  (doseq [c cs]
    (put! c x)))
@ -178,3 +180,13 @@
            (>! c (- ts start))
            (recur ts)))))
    c))
+
+(defn dropping-chan [source n]
+  (let [c (chan)]
+    (go
+      (loop [count 0]
+        (if (= count 0)
+          (>! c (<! source))
+          (<! source))
+        (recur (rem (inc count) n))))
+    c))