Clojurescript：制作弹跳球的功能性方法

Question

我正在学习Clojurescript，同时将它与javascript进行比较并重写一些脚本。

在Javascript中，我创建了一个带有球的画布，当它到达画布的边框时，它会反弹回来。我在Clojurescript中做了同样的工作，但是我需要在函数外创建atoms，所以我可以跟踪状态。如果我想创造更多的球，我将需要复制这些原子。那时代码将是丑陋的。我应该如何更改代码，以便创建多个球，每个球都有自己的状态？

这是Javascript代码：

// Circle object
function Circle(pos_x, pos_y, radius, vel_x, vel_y){

    // Starting variables
    this.radius = radius;
    this.pos_x = pos_x;
    this.pos_y = pos_y;
    this.vel_x = vel_x;
    this.vel_y = vel_y;

    // Draw circle on the canvas
    this.draw = function(){
        c.beginPath();
        c.arc(this.pos_x, this.pos_y, this.radius, 0, Math.PI * 2, false);
        c.strokeStyle = this.color;
        c.lineWidth = 5;
        c.fillStyle = this.color_fill;
        c.fill();
        c.stroke();
    };

    // Update the circle variables each time it is called
    this.update = function(){
        // Check if it goes out of the width
        if(this.pos_x + this.radius > canvas.width || this.pos_x - this.radius < 0){
            // Invert velocity = invert direction
            this.vel_x = -this.vel_x;
        }

        // Check if it goies out of the height
        if(this.pos_y + this.radius > canvas.height || this.pos_y - this.radius < 0){
            this.vel_y = -this.vel_y;
        }

        // Apply velocity
        this.pos_x += this.vel_x;
        this.pos_y += this.vel_y;

        // Draw circle
        this.draw();
    };
};

// Create a single circle
let one_circle = new Circle(300, 300, 20, 1, 1);

function animate(){
    requestAnimationFrame(animate);
    // Clear canvas
    c.clearRect(0, 0, canvas.width, canvas.height);

    // Update all the circles
    one_circle.update();
}

animate();

这是Clojurescript代码：

(def ball-x (atom 300))
(def ball-y (atom 300))
(def ball-vel-x (atom 1))
(def ball-vel-y (atom 1))

(defn ball
  [pos-x pos-y radius]
   (.beginPath c)
   (.arc c pos-x pos-y radius 0 (* 2 Math/PI))
   (set! (.-lineWidth c) 5)
   (set! (.-fillStyle c) "red")
   (.fill c)
   (.stroke c))

(defn update-ball
  []
  (if (or (> (+ @ball-x radius) (.-width canvas)) (< (- @ball-x radius) 0))
    (reset! ball-vel-x (- @ball-vel-x)))
  (if (or (> (+ @ball-y radius) (.-height canvas)) (< (- @ball-y radius) 60))
    (reset! ball-vel-y (- @ball-vel-y)))
  (reset! ball-x (+ @ball-x @ball-vel-x))
  (reset! ball-y (+ @ball-y @ball-vel-y))
  (ball @ball-x @ball-y 20))

(defn animate
  []
  (.requestAnimationFrame js/window animate)
  (update-ball))

(animate)

编辑：我已经尝试了解决问题的新方法，但这不起作用。球被创造，但它不会移动。

(defrecord Ball [pos-x pos-y radius vel-x vel-y])

(defn create-ball
  [ball]
  (.beginPath c)
  (.arc c (:pos-x ball) (:pos-y ball) (:radius ball) 0 (* 2 Math/PI))
  (set! (.-lineWidth c) 5)
  (set! (.-fillStyle c) "red")
  (.fill c)
  (.stroke c))

(def balls (atom {}))
(reset! balls (Ball. 301 300 20 1 1))

(defn calculate-movement
  [ball]
  (let [pos-x (:pos-x ball)
        pos-y (:pos-y ball)
        radius (:radius ball)
        vel-x (:vel-x ball)
        vel-y (:vel-y ball)
        new-ball (atom {:pos-x pos-x :pos-y pos-y :radius radius :vel-x vel-x :vel-y vel-y})]

    ; Check if out of boundaries - width
    (if (or (> (+ pos-x radius) (.-width canvas)) (< (- pos-x radius) 0))
      (swap! new-ball assoc :vel-x (- vel-x)))

    ; Check if out of boundaries - height
    (if (or (> (+ pos-y radius) (.-height canvas)) (< (- pos-y radius) 60))
      (swap! new-ball assoc :vel-y (- vel-y)))

    ; Change `pos-x` and `pos-y`
    (swap! new-ball assoc :pos-x (+ pos-x (@new-ball :vel-x)))
    (swap! new-ball assoc :pos-x (+ pos-y (@new-ball :vel-y)))

    (create-ball @new-ball)
    (println @new-ball)
    @new-ball))


(defn animate
  []
  (.requestAnimationFrame js/window animate)
  (reset! balls (calculate-movement @balls)))

(animate)

Answer 1

另一答案