Bỏ qua để đến nội dung
SignalRGB

Ball class

Hướng dẫn này giải thích việc sử dụng các lớp JavaScript trong canvas animations và không dành cho người mới bắt đầu. Tôi khuyên bạn nên đọc qua phần Lighting Engine của chúng tôi trước và thử hướng dẫn color cycle.

Ngoài ra, ở đây tôi sẽ không sử dụng cú pháp lớp nghiêm ngặt, vì đó chỉ là “đường cú pháp” trong JavaScript và các khái niệm cơ bản vẫn như nhau. Nếu bạn quan tâm đến cú pháp lớp phức tạp hơn, tôi khuyên bạn truy cập trang này để có phần giới thiệu toàn diện. Nếu không, chúng ta hãy giữ ở mức cơ bản.

Trước hết, một lớp chỉ đơn giản là một hàm JavaScript thông thường. Nó hoạt động theo cùng một cách, nhưng chúng ta thêm khả năng gắn các giá trị vào một instance cụ thể của hàm. Trong ví dụ này tôi đã tạo một quả bóng hoạt động theo vật lý cơ bản. Nó theo dõi vị trí và vận tốc của nó cũng như “trọng lực” tác động lên nó.

Nảy đơn giản

Phần tiêu đề “Nảy đơn giản”
<head>
    <title>Simple Ball Bounce</title>
    <meta description="Ball bounce"/>
    <meta publisher="WhirlwindFX" />
</head>


<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>


<script>
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    // Canvas variables
    var width = 320;
    var height = 200;
    // X-component of ball position
    let ballX = 160;
    // Y-component of ball position
    let ballY = 100;
    // Change in ballY over time. Positive values move down, negative move up
    let velocityY = 0;
    // Change in velocityY over time.
    let accelerationY = 1;
    // Effects array
    let effects = [];


    function update() {
      // 1. Overwrite the previous frame
      ctx.fillStyle = background;
      ctx.fillRect(0, 0, 320,200);


      // 2. Make sure there is one instance of the Ball class in the effects array
      if (effects.length < 1){
        effects.push(new Ball());
      }


      // 3. Iterate through the effects array and call each element's draw function
      effects.forEach(ele => {
        ele.draw();
      })


      window.requestAnimationFrame(update);
    }


    // 4. Declare the Ball class
    function Ball(){
      // 5. Set instance variables
      this.bx = ballX;
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      this.impact = false;
      // 6. Define draw function
      this.draw = function(){
        // 7. Change the y-velocity by the y-acceleration
        this.vy += this.ay;


        // 8. If an impact with the ground has been detected, set the velocity upwards and set the impact boolean to false. This check happens before the next function so that we draw the impact frame instead of skipping it.
        if (this.impact){
          this.vy = -10;
          this.impact = false;
        }


        // 9. Detect a future impact. If the ball position plus its radius plus its velocity would put it under the floor, we run a few operations -
        if (this.by + this.radius + this.vy > 200){
          // Set the velocity to 0 so the ball stays where we put it this frame.
          this.vy = 0;
          // Set impact to true so the next run-through draws the up-bounce
          this.impact = true;
          // Next frame draws the up-bounce. This frame detected a future collision. If we want to see the impact itself we have to force it. While the ball's outer radius is below the floor, we move the ball up.
          while (this.by + this.radius < 200){
            this.by++;
          }
        }
        // 10. Change the y-component by the y-velocity.
        this.by += this.vy;
        // Draw shape.
        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }


    window.requestAnimationFrame(update);


</script>
<head>
    <title>Simple Ball Bounce</title>
    <meta description="Ball bounce"/>
    <meta publisher="WhirlwindFX" />
</head>


<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>
<script>
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    // Canvas variables
    var width = 320;
    var height = 200;
    // X-component of ball position
    let ballX = 160;
    // Y-component of ball position
    let ballY = 100;
    // Change in ballY over time. Positive values move down, negative move up
    let velocityY = 0;
    // Change in velocityY over time.
    let accelerationY = 1;
    // Effects array
    let effects = [];


    function update() {
      // 1. Overwrite the previous frame
      ctx.fillStyle = background;
      ctx.fillRect(0, 0, 320,200);


      // 2. Make sure there is one instance of the Ball class in the effects array
      if (effects.length < 1){
        effects.push(new Ball());
      }


      // 3. Iterate through the effects array and call each element's draw function
      effects.forEach(ele => {
        ele.draw();
      })


      window.requestAnimationFrame(update);
    }


    // 4. Declare the Ball class
    function Ball(){
      // 5. Set instance variables
      this.bx = ballX;
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      this.impact = false;
      // 6. Define draw function
      this.draw = function(){
        // 7. Change the y-velocity by the y-acceleration
        this.vy += this.ay;


        // 8. If an impact with the ground has been detected, set the velocity upwards and set the impact boolean to false. This check happens before the next function so that we draw the impact frame instead of skipping it.
        if (this.impact){
          this.vy = -10;
          this.impact = false;
        }


        // 9. Detect a future impact. If the ball position plus its radius plus its velocity would put it under the floor, we run a few operations -
        if (this.by + this.radius + this.vy > 200){
          // Set the velocity to 0 so the ball stays where we put it this frame.
          this.vy = 0;
          // Set impact to true so the next run-through draws the up-bounce
          this.impact = true;
          // Next frame draws the up-bounce. This frame detected a future collision. If we want to see the impact itself we have to force it. While the ball's outer radius is below the floor, we move the ball up.
          while (this.by + this.radius < 200){
            this.by++;
          }
        }
        // 10. Change the y-component by the y-velocity.
        this.by += this.vy;
        // Draw shape.
        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }


    window.requestAnimationFrame(update);


</script>
function update() {
      // 1. Overwrite the previous frame
      ctx.fillStyle = background;
      ctx.fillRect(0, 0, 320,200);


      // 2. Make sure there is one instance of the Ball class in the effects array
      if (effects.length < 1){
        effects.push(new Ball());
      }


      // 3. Iterate through the effects array and call each element's draw function
      effects.forEach(ele => {
        ele.draw();
      })


      window.requestAnimationFrame(update);
    }
// 4. Declare the Ball class
    function Ball(){
      // 5. Set instance variables
      this.bx = ballX;
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      this.impact = false;
      // 6. Define draw function
      this.draw = function(){
        // 7. Change the y-velocity by the y-acceleration
        this.vy += this.ay;


        // 8. If an impact with the ground has been detected, set the velocity upwards and set the impact boolean to false. This check happens before the next function so that we draw the impact frame instead of skipping it.
        if (this.impact){
          this.vy = -10;
          this.impact = false;
        }


        // 9. Detect a future impact. If the ball position plus its radius plus its velocity would put it under the floor, we run a few operations -
        if (this.by + this.radius + this.vy > 200){
          // Set the velocity to 0 so the ball stays where we put it this frame.
          this.vy = 0;
          // Set impact to true so the next run-through draws the up-bounce
          this.impact = true;
          // Next frame draws the up-bounce. This frame detected a future collision. If we want to see the impact itself we have to force it. While the ball's outer radius is below the floor, we move the ball up.
          while (this.by + this.radius < 200){
            this.by++;
          }
        }
        // 10. Change the y-component by the y-velocity.
        this.by += this.vy;
        // Draw shape.
        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }

Nảy đầy đủ

Phần tiêu đề “Nảy đầy đủ”

Khi đã nắm được sự phức tạp ban đầu, việc thêm các hành vi nâng cao hơn trở nên dễ dàng hơn. Trong ví dụ tiếp theo tôi đã thêm va chạm với tường và đưa ra một số biến thể ngẫu nhiên theo hướng x để quả bóng tiếp tục chuyển động.

<head>
    <title>Full Bounce</title>
    <meta description="Snake-like climbing gradient effect"/>
    <meta publisher="WhirlwindFX" />
</head>


<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>


<script>
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;
    let ballX = 160;
  // 1. Added velocityX
    let velocityX = 0;
    let ballY = 100;
    let velocityY = 0;
    let accelerationY = 1;
    let effects = [];


    function update() {


      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, 320,200);


      if (effects.length < 1){
        effects.push(new Ball());
      }


      effects.forEach(ele => {
        ele.draw();
      })




      window.requestAnimationFrame(update);
    }




    function Ball(){
      this.bx = ballX;
      // 2. Give x a random initial velocity
      this.vx = 100 * Math.sin(Date.now());
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      // 3. Add x and y-components to the impact boolean for horizontal contact
      this.impactX = false;
      this.impactY = false;


      this.draw = function(){
        this.vy += this.ay;


        // 4. Each frame, add a small amount of random velocity in the x-direction to keep momentum going
        this.vx += Math.sin(Date.now());


        if (this.impactY){
          this.vy = -10;
          this.impactY = false;
        }
        // 5. If a horizontal impact is detected, reverse the x-velocity and subtract a small amount of force to prevent an out-of-control ball. Mirroring or adding to the force here can have interesting consequences.
        if (this.impactX){
          this.vx *= -.9;
          this.impactX = false;
        }


        if (this.by + this.radius + this.vy > height){
          this.vy = 0;
          this.impactY = true;
          while (this.by + this.radius < height){
            this.by++;
          }
        }
        // 6. Detect a horizontal impact left or right and adjust like we did the y-component.
        if (this.bx + this.radius + this.vx > width){
          this.vx = 0;
          this.impactX = true;
          while (this.bx + this.radius > width){
            this.bx--;
          }
        } else if (this.bx - this.radius + this.vx < 0){
          this.vx = 0;
          this.impactX = true;
          while (this.bx - this.radius < 0){
            this.bx++;
          }
        }
        // 7. Change the x- and y-components by their velocity.
        this.by += this.vy;
        this.bx += this.vx;


        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }


    window.requestAnimationFrame(update);


</script>
<head>
    <title>Full Bounce</title>
    <meta description="Snake-like climbing gradient effect"/>
    <meta publisher="WhirlwindFX" />
</head>


<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>
<script>
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;
    let ballX = 160;
  // 1. Added velocityX
    let velocityX = 0;
    let ballY = 100;
    let velocityY = 0;
    let accelerationY = 1;
    let effects = [];


    function update() {


      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, 320,200);


      if (effects.length < 1){
        effects.push(new Ball());
      }


      effects.forEach(ele => {
        ele.draw();
      })




      window.requestAnimationFrame(update);
    }




    function Ball(){
      this.bx = ballX;
      // 2. Give x a random initial velocity
      this.vx = 100 * Math.sin(Date.now());
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      // 3. Add x and y-compnents to the impact boolean for horizontal contact
      this.impactX = false;
      this.impactY = false;


      this.draw = function(){
        this.vy += this.ay;


        // 4. Each frame, add a small amount of random velocity in the x-direction to keep momentum going
        this.vx += Math.sin(Date.now());


        if (this.impactY){
          this.vy = -10;
          this.impactY = false;
        }
        // 5. If a horizontal impact is detected, reverse the x-velocity and subtract a small amount of force to prevent an out-of-control ball. Mirroring or adding to the force here can have interesting consequences.
        if (this.impactX){
          this.vx *= -.9;
          this.impactX = false;
        }


        if (this.by + this.radius + this.vy > height){
          this.vy = 0;
          this.impactY = true;
          while (this.by + this.radius < height){
            this.by++;
          }
        }
        // 6. Detect a horizontal impact left or right and adjust like we did the y-component.
        if (this.bx + this.radius + this.vx > width){
          this.vx = 0;
          this.impactX = true;
          while (this.bx + this.radius > width){
            this.bx--;
          }
        } else if (this.bx - this.radius + this.vx < 0){
          this.vx = 0;
          this.impactX = true;
          while (this.bx - this.radius < 0){
            this.bx++;
          }
        }
        // 7. Change the x- and y-components by their velocity.
        this.by += this.vy;
        this.bx += this.vx;


        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }


    window.requestAnimationFrame(update);


</script>
function update() {


      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, 320,200);


      if (effects.length < 1){
        effects.push(new Ball());
      }


      effects.forEach(ele => {
        ele.draw();
      })




      window.requestAnimationFrame(update);
    }
function Ball(){
      this.bx = ballX;
      // 2. Give x a random initial velocity
      this.vx = 100 * Math.sin(Date.now());
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      // 3. Add x and y-compnents to the impact boolean for horizontal contact
      this.impactX = false;
      this.impactY = false;


      this.draw = function(){
        this.vy += this.ay;


        // 4. Each frame, add a small amount of random velocity in the x-direction to keep momentum going
        this.vx += Math.sin(Date.now());


        if (this.impactY){
          this.vy = -10;
          this.impactY = false;
        }
        // 5. If a horizontal impact is detected, reverse the x-velocity and subtract a small amount of force to prevent an out-of-control ball. Mirroring or adding to the force here can have interesting consequences.
        if (this.impactX){
          this.vx *= -.9;
          this.impactX = false;
        }


        if (this.by + this.radius + this.vy > height){
          this.vy = 0;
          this.impactY = true;
          while (this.by + this.radius < height){
            this.by++;
          }
        }
        // 6. Detect a horizontal impact left or right and adjust like we did the y-component.
        if (this.bx + this.radius + this.vx > width){
          this.vx = 0;
          this.impactX = true;
          while (this.bx + this.radius > width){
            this.bx--;
          }
        } else if (this.bx - this.radius + this.vx < 0){
          this.vx = 0;
          this.impactX = true;
          while (this.bx - this.radius < 0){
            this.bx++;
          }
        }
        // 7. Change the x- and y-components by their velocity.
        this.by += this.vy;
        this.bx += this.vx;


        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }

Nhiều quả bóng

Phần tiêu đề “Nhiều quả bóng”

Tôi phải thành thật mà nói: ví dụ này Phức tạp với chữ P hoa và có lẽ đòi hỏi nhiều công sức hơn mức cần thiết cho hầu hết các hiệu ứng cơ bản. Để tránh comment code quá nhiều, ở đây chúng ta sẽ đi qua một số khái niệm khó khăn.

Thứ nhất: làm thế nào một quả bóng biết nó sẽ va chạm với một quả bóng khác? Mỗi khung mỗi instance của lớp bóng phải kiểm tra vị trí của mọi instance bóng khác. Bằng cách so sánh vị trí của chúng, chúng ta có thể xác định xem hai quả bóng có nằm trong bán kính của nhau hay không, sau đó đảo ngược vận tốc x và y của chúng tương ứng.

Đôi khi một quả bóng có thể tích đủ vận tốc để đi qua quả bóng khác và gần như chiếm cùng một không gian. Toán học để điều chỉnh vị trí của cả hai quả bóng sẽ quá phức tạp, vì vậy tôi chỉ đơn giản xóa instance bóng mà chúng ta đang kiểm tra. Vì hàm update đảm bảo số lượng bóng tối thiểu, một instance bóng mới sẽ được tạo ra và mô phỏng tiếp tục.

Cuối cùng: khi nào thì tính toán sự thay đổi vận tốc và vị trí của mỗi quả bóng? Liệu có quan trọng hay không khi quả bóng được vẽ trước hay sau khi cập nhật các biến? Vấn đề trong lập trình là có nhiều câu trả lời cho cả hai câu hỏi. Để đối phó với điều đó, tôi đã giới thiệu một phương pháp theo dõi va chạm hơi khác. Bạn có thể chọn phương pháp ưa thích, nhưng cả hai phương pháp đều có thể và đang hoạt động.

<head>
    <title>Multiple Balls</title>
    <meta description="Snake-like climbing gradient effect"/>
    <meta publisher="WhirlwindFX" />
</head>


<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>


<script>
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;
    let ballX = 160;
    let velocityX = 0;
    let ballY = 100;
    let velocityY = 0;
    let accelerationY = 1;
    let effects = [];


    function update() {


      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, 320,200);


      // 1. Increase the number of balls present in the effects array
      if (effects.length < 3){
        effects.push(new Ball());
      }


      effects.forEach(ele => {
        ele.draw();
      })


      window.requestAnimationFrame(update);
    }


    function Ball(){
      this.bx = ballX;
      this.vx = 100 * Math.sin(Date.now());
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      // 2. Add a unique ID to each ball so we can compare them to each other and not themselves. We have also removed "impactX" and "impactY" in favor of a better solution for more balls.
      this.id = Math.random();


      this.draw = function(){
        this.vy += this.ay;
        this.vx += Math.sin(Date.now());


        if (this.by + this.radius + this.vy > height){
          this.vy = -10;
        } else if (this.by - this.radius + this.vy < 0){
          // 3. Add a "ceiling" to the canvas in case a ball collision causes the height to exceed 0y.
          this.vy = 1;
        }
        if (this.bx + this.radius + this.vx > width){
          this.vx = -.9;
        } else if (this.bx - this.radius + this.vx < 0){
          this.vx = -.9;
        }
        // 4. Iterate through each ball in the effects array to check for collisions
        for (let i = 0; i < effects.length; i++){
          let ele = effects[i];
          // If the ball we are checking against is this ball, skip this cycle
          if (this.id == ele.id){
            continue;
          }
          // If the balls are clipping too much, remove this ball from the canvas
          if (Math.abs(this.bx - ele.bx) < this.radius && Math.abs(this.by - ele.by) < this.radius){
            effects.splice(i, 1);
          }
          // If the balls will collide, reverse their velocities and subtract some force to account for elasticity
          if (Math.abs(this.bx + this.vx - ele.bx) < (this.radius * 2) && Math.abs(this.by + this.vy - ele.by) < (this.radius * 2)){
            this.vx *= -.9;
            this.vy *= -.9;
          }
        }


        this.by += this.vy;
        this.bx += this.vx;


        // 5. Because complicated calcualtions for the velocities happen before this point, finalize the x- and y-coordinates by making sure they are bounded within the canvas.
        while (this.bx - this.radius < 0){
          this.bx++
        }
        while (this.bx + this.radius > width){
          this.bx--
        }
        while (this.by - this.radius < 0){
          this.by++
        }
        while (this.by + this.radius > height){
          this.by--
        }


        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }


    window.requestAnimationFrame(update);


</script>
<head>
    <title>Multiple Balls</title>
    <meta description="Snake-like climbing gradient effect"/>
    <meta publisher="WhirlwindFX" />
</head>


<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>
<script>
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;
    let ballX = 160;
    let velocityX = 0;
    let ballY = 100;
    let velocityY = 0;
    let accelerationY = 1;
    let effects = [];


    function update() {


      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, 320,200);


      // 1. Increase the number of balls present in the effects array
      if (effects.length < 3){
        effects.push(new Ball());
      }


      effects.forEach(ele => {
        ele.draw();
      })


      window.requestAnimationFrame(update);
    }


    function Ball(){
      this.bx = ballX;
      this.vx = 100 * Math.sin(Date.now());
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      // 2. Add a unique ID to each ball so we can compare them to each other and not themselves. We have also removed "impactX" and "impactY" in favor of a better solution for more balls.
      this.id = Math.random();


      this.draw = function(){
        this.vy += this.ay;
        this.vx += Math.sin(Date.now());


        if (this.by + this.radius + this.vy > height){
          this.vy = -10;
        } else if (this.by - this.radius + this.vy < 0){
          // 3. Add a "ceiling" to the canvas in case a ball collision causes the height to exceed 0y.
          this.vy = 1;
        }
        if (this.bx + this.radius + this.vx > width){
          this.vx = -.9;
        } else if (this.bx - this.radius + this.vx < 0){
          this.vx = -.9;
        }
        // 4. Iterate through each ball in the effects array to check for collisions
        for (let i = 0; i < effects.length; i++){
          let ele = effects[i];
          // If the ball we are checking against is this ball, skip this cycle
          if (this.id == ele.id){
            continue;
          }
          // If the balls are clipping too much, remove this ball from the canvas
          if (Math.abs(this.bx - ele.bx) < this.radius && Math.abs(this.by - ele.by) < this.radius){
            effects.splice(i, 1);
          }
          // If the balls will collide, reverse their velocities and subtract some force to account for elasticity
          if (Math.abs(this.bx + this.vx - ele.bx) < (this.radius * 2) && Math.abs(this.by + this.vy - ele.by) < (this.radius * 2)){
            this.vx *= -.9;
            this.vy *= -.9;
          }
        }


        this.by += this.vy;
        this.bx += this.vx;


        // 5. Because complicated calcualtions for the velocities happen before this point, finalize the x- and y-coordinates by making sure they are bounded within the canvas.
        while (this.bx - this.radius < 0){
          this.bx++
        }
        while (this.bx + this.radius > width){
          this.bx--
        }
        while (this.by - this.radius < 0){
          this.by++
        }
        while (this.by + this.radius > height){
          this.by--
        }


        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }


    window.requestAnimationFrame(update);


</script>
function update() {


      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, 320,200);


      // 1. Increase the number of balls present in the effects array
      if (effects.length < 3){
        effects.push(new Ball());
      }


      effects.forEach(ele => {
        ele.draw();
      })


      window.requestAnimationFrame(update);
    }
function Ball(){
      this.bx = ballX;
      this.vx = 100 * Math.sin(Date.now());
      this.by = ballY;
      this.vy = velocityY;
      this.ay = accelerationY;
      this.radius = 15;
      // 2. Add a unique ID to each ball so we can compare them to each other and not themselves. We have also removed "impactX" and "impactY" in favor of a better solution for more balls.
      this.id = Math.random();


      this.draw = function(){
        this.vy += this.ay;
        this.vx += Math.sin(Date.now());


        if (this.by + this.radius + this.vy > height){
          this.vy = -10;
        } else if (this.by - this.radius + this.vy < 0){
          // 3. Add a "ceiling" to the canvas in case a ball collision causes the height to exceed 0y.
          this.vy = 1;
        }
        if (this.bx + this.radius + this.vx > width){
          this.vx = -.9;
        } else if (this.bx - this.radius + this.vx < 0){
          this.vx = -.9;
        }
        // 4. Iterate through each ball in the effects array to check for collisions
        for (let i = 0; i < effects.length; i++){
          let ele = effects[i];
          // If the ball we are checking against is this ball, skip this cycle
          if (this.id == ele.id){
            continue;
          }
          // If the balls are clipping too much, remove this ball from the canvas
          if (Math.abs(this.bx - ele.bx) < this.radius && Math.abs(this.by - ele.by) < this.radius){
            effects.splice(i, 1);
          }
          // If the balls will collide, reverse their velocities and subtract some force to account for elasticity
          if (Math.abs(this.bx + this.vx - ele.bx) < (this.radius * 2) &&
              Math.abs(this.by + this.vy - ele.by) < (this.radius * 2)){
            this.vx *= -.9;
            this.vy *= -.9;
          }
        }


        this.by += this.vy;
        this.bx += this.vx;


        // 5. Because complicated calculations for the velocities happen before this point, finalize the x- and y-coordinates by making sure they are bounded within the canvas.
        while (this.bx - this.radius < 0){
          this.bx++
        }
        while (this.bx + this.radius > width){
          this.bx--
        }
        while (this.by - this.radius < 0){
          this.by++
        }
        while (this.by + this.radius > height){
          this.by--
        }


        ctx.beginPath();
        ctx.arc(this.bx, this.by, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "black"
        ctx.fill();
      }
    }

Điều khiển người dùng

Phần tiêu đề “Điều khiển người dùng”

Cuối cùng chúng ta thêm một số điều khiển người dùng cơ bản để làm cho mọi thứ thú vị hơn. Tôi đã đề cập chi tiết về thay đổi sắc độ rồi, vì vậy để đơn giản hóa code, chúng ta sẽ tập trung vào việc điều chỉnh số lượng và bán kính bóng. Điều này chỉ yêu cầu một vài thay đổi nhỏ đối với các hàm hiện có.

<head>
    <title>User Controls</title>
    <meta description="Snake-like climbing gradient effect"/>
    <meta publisher="WhirlwindFX" />
  <!-- Add two numerical sliders: radius and amount --->
    <meta property="radius" label="Size" type="number" min="5" max="100" default="20">
    <meta property="amount" label="Amount" type="number" min="1" max="50" default="2">
</head>
function update() {


      ctx.fillStyle = "white";
      ctx.fillRect(0, 0, 320,200);


      // Set the minimum effects to be the user-controlled amount. If the length of effects is greater than amount, pop an element off the end.
      if (effects.length < amount){
        effects.push(new Ball());
      } else if (effects.length > amount){
        effects.pop();
      }


      effects.forEach(ele => {
        ele.draw();
      })


      window.requestAnimationFrame(update);
    }
this.draw = function(){
        // Finally, set the radius to be the user-controlled radius inside of the draw function each frame.
        this.radius = radius;
        this.vy += this.ay;
        this.vx += Math.sin(Date.now());


  // . . . rest of function . . .
}

Hy vọng bạn đã thích hướng dẫn của chúng tôi về các animation với các lớp JavaScript! Ngay cả ở mức độ phức tạp này, hiệu ứng này chỉ là phần nổi của tảng băng những gì có thể đạt được với HTML canvas. Ngoài ra, tôi vẫn chưa coi nó là hoàn chỉnh. Nếu chúng ta phấn đấu đến sự hoàn hảo, bạn sẽ nhận thấy rằng các va chạm bóng được phát hiện một khung trước khi va chạm thực sự xảy ra, có nghĩa là chúng thường không đến va chạm thực sự. Các va chạm cũng được đơn giản hóa về mặt truyền năng lượng, vì vận tốc kết quả chỉ tính đến vận tốc hiện tại của quả bóng, không phải năng lượng của quả bóng kia. Cuối cùng, việc kiểm tra vị trí của mỗi quả bóng nhiều lần mỗi vòng lặp kém hiệu quả về mặt độ phức tạp thời gian và có thể được tối ưu hóa với memoization cơ bản.

Cuối cùng, hãy luôn phê phán các hiệu ứng của bạn. Chúng thường có thể được cải thiện theo cách này hay cách khác, và sự khác biệt giữa hiệu ứng tầm thường và xuất sắc thường chỉ đến từ việc nhìn vào nó và cho phép bản thân không hài lòng với nó ít nhất một lần.

Để xem hướng dẫn từng bước cuối cùng, hãy xem phần Callbacks của chúng tôi, nơi tôi trình bày quy trình lấy dữ liệu meter để kích hoạt và hủy kích hoạt các hiệu ứng.