Нерестовые шары сбиваются

Question

Я создал небольшую симуляцию, в которой шары появляются, когда щелкают левой кнопкой мыши на холсте, затем шары начинают падать.Сценарий написан на javascript:

var ctx = canvas.getContext("2d");

var vy = 0;
var a = 0.5;
var bouncing_factor = 0.9;

var balls = [];
class Ball {
    constructor(x, y, r){
        this.x = x;
        this.y = y;
        this.r = r;
    }

    show () {
        ctx.fillStyle="red";
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
        ctx.fill();
    }

    bounce () {
        var ground = canvas.height - this.r;

        if(this.y > ground && Math.abs(vy) < a + 1) {
            cancelAnimationFrame(draw);
        } 
        else if (this.y < ground) {
            vy += a;
            this.y += vy;
        } 
        else {
            vy = -vy * bouncing_factor;
            this.y = ground - 1;
        }
    }
}

function spawn(event) {
    var r = (Math.random()*20)+10;
    var b = new Ball(event.clientX, event.clientY, r);
    balls.push(b);
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < balls.length; i++) {
        balls[i].show();
        balls[i].bounce();
    }
}
setInterval(draw,10);

Проблема здесь в том, что если вы запустите этот скрипт, он отлично работает для первого шара, но когда вы создаете другой шар;оно следует за подпрыгиванием как первое.
Любая помощь будет высоко оценена.

Answer 1

Я сделал несколько изменений в вашем коде: скорость vx и ускорение a теперь являются частью объекта ball.Скорость начинается с 3, и ускорение будет уменьшаться каждый раз, когда мяч падает на землю.Мяч перестает подпрыгивать при ускорении this.a <.1 </p>

const canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");



var bouncing_factor = 0.9;

var balls = [];
class Ball {
    constructor(x, y, r){
        this.x = x;
        this.y = y;
        this.r = r;
        this.vy = 3;
        this.a = 0.5;
    }

    show () {
        ctx.fillStyle="red";
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
        ctx.fill();
    }

    bounce () {
        var ground = canvas.height - this.r;
       
      
       if (this.y < ground) {     
            this.vy += this.a;
            this.y += this.vy;
        } 
        else {
            this.vy = -this.vy * bouncing_factor;
            this.y = ground - 1;
            this.a *=.95;
        }
       
       if(Math.abs(this.a) < .1){this.a=0; this.vy=0}
    }
}

function spawn(event) {
    var r = (Math.random()*20)+10;
    var b = new Ball(event.clientX, event.clientY, r);
    balls.push(b);
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var i = 0; i < balls.length; i++) {
        balls[i].show();
        balls[i].bounce();
    }
}
setInterval(draw,10);


canvas.addEventListener("click", spawn)

<canvas id="myCanvas"  style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>